Is it possible to change the tumblr default like/reblog buttons and insert an img? I'm trying to change my like button to http://38.media.tumblr.com/tumblr_m7wvvwuZdH1r17mw1.png
(excuse the link. I can't post images yet because of reputation/I'm a newbie.)
.
here is what my like/reblog button code looks like
<div id="buttons">
<div class="buttoned">{LikeButton size="14" color="black"}</div>
<div class="buttoned">{ReblogButton size="14" color="black"}</div>
and
/* BUTTONS */
#buttons {
width: 18px;
height: auto;
position:absolute;
margin: -5px 0 0 540px;
}
.buttoned {
width:14px;
height:14px;
padding: 2px;
margin: 0 auto 4px auto;
background-color: {color:buttons};
border: 1px solid {color:buttons};
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.buttoned img {
width: 14px;
height: 14px;
margin: auto;
text-align:center;
}
Here is the blog I am trying to change it on. http://kobisart.tumblr.com/
As you can see I'm trying on the like button. It allowed me to put the img but it won't let me use it as the like button
Thanks
A reblog button can be achieved with the undocumented {ReblogURL}.
<img src="img.png">
An alternate like button can be achieved via this previously answered question.
Related
I am having a hover issue. Whenever I hover over a specific .servNavItemTitle the font weight for the other .servNavItemTitle decreases for a moment and then goes back to normal quickly.
To see it in the demo, just hover over one of the titles and watch the other titles as the font-weight reduces.
Does anyone see what the issue is?
Here is a jsfiddle demo
Here is a narrowed down version of the code:
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;
transition: all 0.25s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
<div id="serviceNavBlock2" class="iblock">
<div class="servNavItemWrap">
<a href="http://localhost:8080/profile.php">
<img src="" alt="Aluminum Profile">
<span class="servNavItemTitle hGc block">Aluminum</span>
</a>
</div>
<div class="servNavItemWrap">
<a href="#">
<img src="" alt="Aluminum Components">
<span class="servNavItemTitle hGc block">Components</span>
</a>
</div>
After Temani narrowed down the issue, I searched and found the answer here: css transform element affects other element which use transform:scale(0.5) in android webview . Basically, I added -webkit-backface-visibility: hidden; to the scaled image and it works perfectly now.
I have a HTML/CSS page on the go right now where in the middle is an image map. On the left hand side I have an accordion menu in CSS. The idea is that when a user opens the accordion menu, when they change to the next page by clicking on a part of the image, the accordion will stay open to that spot. This is for training. So the instructions are on the left hand side and they can do it on the image map in the middle. Here's the CSS I have for the accordion:
Here is the stylesheet:
body {
background-color: #000000;
}
div.img {
float: right;
Border: 1px solid white;
}
.right {
margin: auto;
}
.accordion {
width: 350px;
box-shadow:
0px 0px 0px 1px rgba(12,12,12,0.3),
0px 2px 2px rgba(0,0,0,0.1);
Float: left;
Position: fixed;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: Relative;
display: block;
height: 30px;
cursor: pointer;
color: #FFFFFF;
line-height: 33px;
font-size: 19px;
background: #3333ff;
border: 1px solid #CCC;
}
.accordion name:hover {
background: #F3FF3F3;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
background: #ff2000;
color: #FFFFFF;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
display: none;
}
.accordion .content {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .content p {
font-family: "Arial";
color: #777;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .content {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .content.ac-medium {
height: 195px;
}
And here is the HTML:
<html>
<head>
<p style="color:white;float:top-left;font-family:Arial;font-size:25px;margin-bottom:0px;">Title</p>
<p style="color:white;float:top-left;font-family:Arial;font-size:15px;margin-top:0px;margin-bottom:0px;"> Subtitle</p>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<br>
<br>
<div class="container">
<div class="accordion">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Description</label>
<div class="content ac-medium">
</p>
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Description</label>
<div class="content ac-medium">
Description
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">Category</label>
<div class="content ac-medium">
Description
</div>
<div>
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">Category</label>
<div class="content ac-medium">
Description
</div>
</div>
</div>
</div>
</div>
</div>
<div class="img">
<div class="right">
<img src="CWS.png" width="1200" height="900" usemap="#CWS" />
</div>
</div>
<map name="CWS">
</map>
</html>
If this can be kept in CSS and HTML, that would be great as I'm not familiar with any other languages. Thank you in advance for your help!
EDIT:
So after scouring the internet I've found something that seems promising. I'm not a java guy but I figured I'd give this a shot:
// Initialize Stop Var
var stop = false;
// When the Drop Down is Clicked, Set Stop Var to True
$("#drop-down").click(function(event) { stop=true; });
// Prevent Accordion Close if Stop Var Set
$("#accordion").click(function(event) {
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
I guess my question is, how can I implement the above java to work with my code. I'm not sure what values to change the "drop-down" and "accordion" to (if I even have to change accordion)
This will be stand alone, so there won't be any server side code.
Edit2:
Looks like I might not be allowed to use java.... is there a way to not have the menu refresh when changing screens?
You need some way to tell the page that something needs to be set/changed.
HTML: you create all pages the user can click and add the CSS needed to display the desired result. Fx. www.example.com/page1.html, page2.html ect. Then you set the display/hide specifically in the accordion.
Javascript: You set a cookie with the desired option/selection and then read that cookie on page load. This is not perfect as you may experience a flicker while page is being rendered.
Serverside: fx. using PHP you make your link like this: www.example.com/?accordion=1, ?accordion=2 ect. Then you check for this URL parameter and set's the CSS accordingly.
Looks like I'm going in a different direction with this project. Framesets are what I'll be using. Thanks everyone for your help!
I am working on Grouping CSS Selector (Hover). I have two text boxes the first one is Username and second one is Password.
When I hover these text field's the icon background has changing the color using transistion.
Here is the HTML Code
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 login-panel-padng">
<span class="icon-user">
<input type="text" class="txt-padding login-panel-usr-name" placeholder="Username" />
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 login-panel-padng">
<span class="icon-password">
<input class="txt-padding login-panel-usr-name" id="txt_pwd" type="password" placeholder="Password"/>
</span>
</div>
Here is the code.
.icon-user::before {
font-family: FontAwesome;
content:"\f007";
font-size: 18px;
position: absolute;
border-right: 1px solid lightBlue;
border-top-left-radius: 10px;
height: 40px;
padding: 10px 15px 15px 15px;
-webkit-transition : background 500ms ease-out;
-moz-transition : background 500ms ease-out;
-o-transition : background 500ms ease-out;
}
.icon-password::before {
font-family: FontAwesome;
content:"\f084";
font-size: 18px;
position: absolute;
border-right: 1px solid lightBlue;
border-top-left-radius: 10px;
height: 40px;
padding: 10px 15px 15px 15px;
-webkit-transition : background 500ms ease-out;
-moz-transition : background 500ms ease-out;
-o-transition : background 500ms ease-out;
}
.icon-user .icon-password:hover:after {
background-color: lightBlue;
border-top-left-radius: 10px;
border: 1px solid #336699;
}
For the Hover I want to use both icon-user and icon-password class tags. So I can reduce the Number of code line.
Here is the jsfiddle Link
Kindly help me for this question.
Cheers
Mahadevan
Thanks for the reply. I got the solution for the above question.
.icon-user:hover::before, .icon-password:hover::before{
background-color: lightBlue;
border-top-left-radius: 10px;
border: 1px solid #336699;
}
You have to call all the class like above example. Then the Hover effect will come.
Cheers,
Mahadevan
If you want to group them, why not use the same class on both,
...
<span class="inputIcon icon-user">
...
</span>
...
<span class="inputIcon icon-password">
...
</span>
...
and then,
.inputIcon:hover::before { ... }
I'm quite new to CSS and out of ideas about how to make this kind of navigation work. By default, the navigation should look like this:
When the contact section is hovered, it looks like this:
And of course, it should work the other way around as well:
You can see my markup, CSS and demo here: https://jsfiddle.net/xr2jp5r9/. I'll paste the HTML/CSS here too:
<body>
<div id="navigation-menu">
<div id="portfoolio">
<h4>PORTFOOLIO</h4>
<nav id="portfoolionav">
<ul>
<li>sisearhitektuur</li>
<li>graafiline disain</li>
<li>tootedisain</li>
</ul>
</nav>
</div>
<!--end portfoolio-->
<div id="kontakt">
<h4>KONTAKT</h4>
<p id="kontaktadd">Männiku tee 31a, 11214, Tallinn, Estonia</p>
</div>
<!--end kontakt-->
</div>
<!--end navigation-menu-->
</body>
And the CSS:
.body
{
background-color: white;
}
#navigation-menu
{
height: 100px;
line-height: 100px;
font-family: 'Lato', sans-serif;
}
#portfoolio
{
position: fixed;
color: white;
text-align: right;
top: 0px;
left: 0px;
width: 50%;
background-color: #3BB6E4;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#portfoolio h4
{
padding-right: 30px;
}
#portfoolio:hover
{
width: 90%;
z-index: 400;
}
#portfoolionav ul
{
list-style-type: none;
}
#portfoolionav li
{
display: inline;
padding: 20px;
}
#kontakt
{
color: white;
text-align: left;
top: 0px;
right: 0px;
width: 50%;
position: fixed;
background-color: #E8940D;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#kontakt h4
{
padding-left: 30px;
}
#kontakt:hover
{
width: 90%;
}
So how can I center all the sections to one line + hide the submenu and the address? Also, the submenu and the address are sliding along when hovering, they shouldn't do that.
I hope that someone can help me, I'd really appreciate this. Thanks. :)
Maybe you could use something like the typical carousel system.
A container with both of the menus at their greatest size, and a "window" div with specific width (here the page's one) and slide components in it.
Do not change menus widths but theirs positions in the big container.
We could just see menus sliding/moving, and during this movement you can easily change the title font-size.
You can use Jquery to find and manage the best menus widths when the page loads or resize.
Sry for my english ;)
Complete newby question - I've looked everywhere (as I'm not a .NET dev finding it hard) to create a macro that pulls information from content items create into a list.
Here is the information I would like to present:
<style>
ul#showcase {
position: absolute;
left: 0px;
list-style: none;
margin: 0px;
padding: 0px;
text-align: right;
}
.showbox {
border: 2px solid #ffd83d;
border-color: #ffd83d;
border-radius: 2px;
background-color: #660000;
padding: 1em 2em;
width: 190px;
height: 152px;
margin-left: -110px;
box-shadow: 4px 4px 4px -1.5px rgba(62,99,125,.8);
}
.showbox a{
color: #ffd83d;
text-align: right;
}
.showbox:hover {
-moz-transition: margin-left,background-color;
-moz-transition-duration: 3s;
-webkit-transition: margin-left,background-color;
-webkit-transition-duration: 3s;
-o-transition: margin-left,background-color;
-o-transition-duration: 3s;
transition: margin-left,background-color;
transition-duration:3s;
margin-left: 0px;
background-color:#ffd83d;
}
.showbox:hover a {
position: relative;
-moz-transition: color;
-moz-transition-duration: 3s;
-webkit-transition: color;
-webkit-transition-duration: 3s;
transition: color;
transition-duration:3s;
color: #333333;
}
.showbox a:hover {
-moz-transition: color;
-moz-transition-duration: 1s;
-webkit-transition: color;
-webkit-transition-duration: 1s;
-o-transition: color;
-o-transition-duration: 1s;
transition: color;
transition-duration:1s;
color: #660000;
}
.showbox-inner {
position: relative;
border: 0px solid red;
border-radius: 4px;
background-color: #333333;
width: 110px;
height: 120px;
padding: 0px 90px 0px 10px;
margin: 0px 0px 0px 0px;
}
.showbox-inner:hover {
-moz-transition: margin-left,background-color;
-moz-transition-duration: 3s;
-webkit-transition: margin-left,background-color;
-webkit-transition-duration: 3s;
-o-transition-: margin-left,background-color;
-o-transition--duration: 3s;
transition: margin-left,background-color;
transition-duration:3s;
margin-left: 0px;
background-color:#333333;
}
.showbox-inner p {
float: left;
width: 75px;
margin-left: 5px;
padding: 5px 10px 5px 0px;
margin: 0px 15px 5px 0px;
text-align: left;
color: white;
}
.showbox-image img{
position: absolute;
margin: 5px -10px;
padding: 0px -10px;
}
.showbox-inner:hover p {
-moz-transition:color;
-moz-transition-duration: 3s;
-webkit-transition: color;
-webkit-transition-duration: 3s;
-o-transition-: color;
-o-transition--duration: 3s;
transition: color;
transition-duration:3s;
margin-left: 0px;
color:#ffd83d;
}
</style>
<div>
<ul id="showcase">
</li>
<li>
<div class="showbox">MooMooKwan
<div class="showbox-inner">
<p>Korean MooMooKwan Hapkido Association Australia</p>
<div class="showbox-image"><img src="../media/11698/MMK.png" width=110px height=110 /></div>
</div>
Click to Visit
</div></li>
<li>
<div class="showbox">H.I.A
<div class="showbox-inner">
<p>Hapkido International Association Australia</p>
<div class="showbox-image"><img src="../media/11692/HIA-Logo.png" width=110px height=110 /></img></div>
</div>
Click to Visit
</div></li>
<li>
<div class="showbox">Warrior Hapkido
<div class="showbox-inner">
<p>Warrior Hapkido GoldCoast, QLD</p>
<div class="showbox-image"><img src="../media/11710/warriorhapkido.png" width=110px height=110 /></div>
</div>
Click to Visit
</div></li>
<li>
<div class="showbox">Steve's Hapkido
<div class="showbox-inner">
<p>Steve's Hapkido Brisbane, QLD</p>
<div class="showbox-image"><img src="../media/11704/SHA-Bris.png" width=110px height=110 /></div>
</div>
Click to Visit
</div></li>
</ul>
</div>
I've included the style (even though this would be a seperate stylesheet) the issue i have is that every time i create a variable to display the items i want i just seem to make a complete mess of it.
The items i want to display are all "showcaseItem" document types i have created under a "showcaseFolder" off the root node.
The properties i want to display from each showcaseItem are:
dojangName - textstring
dojangUrl - textstring
dojangDescription - simple editor
dojangImage - Image Picker(from media)
Look - obviously i'm lost, ideally this is the "sort" of information i would like to present......
<li>
<div class="showbox">showcaseItem.dojangName
<div class="showbox-inner">
<p>showcaseItem.dojangDescription</p>
<div class="showbox-image"><img src="showcaseItem.dojangImage" width=110px height=110 /> </div>
</div>
Click to Visit
</div></li>
BUT i just don't know where to go from here so that i can:
List each child under the parent folder
Limit the list to 5 items that change at random (wish item)
Can anyone help?
Have a look at my dummy site http://propertymj.com (chrome or firefox only).
Something like this should work:
#{
// Get showcaseFolder:
var showcaseFolder = Library.NodeById(folderId);
// For debugging, output the name:
#showcaseFolder.Name
// Get five children at random:
var showcaseItems = showcaseFolder.Children.Random(5);
// For debugging, output the count:
#showcaseItems.Count()
// Iterate through items:
<ul>
#foreach (var item in showcaseItems)
{
<li>
<div class="showbox">#item.dojangName
<div class="showbox-inner">
<p>#item.dojangDescription</p>
<div class="showbox-image"><img src="#Library.MediaById(item.dojangImage).umbracoFile" width=110px height=110 /></div>
</div>
Click to Visit
</div>
</li>
}
</ul>
}
Have a look at this answer for some good resources on learning more about Umbraco's Razor syntax.