Hi there,
I have been customizing the css of back to top button. From the original code into this :
#to-top {
display: block;
position: fixed;
text-align: center;
right: 17px;
bottom: -36px;
color: #fff;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
z-index: 10000;
height: 35px;
width: 35px;
background-color: rgba(240,81,51,0.5);
background-repeat: no-repeat;
background-position: center;
transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-webkit-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
}
#to-top i {
line-height: 35px!important;
width: 35px!important;
height: 35px!important;
font-size: 20px!important;
top: 0px!important;
left: 0px!important;
text-align: center!important;
background-color: transparent!important;
}
#to-top:hover, #to-top.dark:hover {
background-color: #27CFC3;
}
#to-top.dark {
background-color: #F3735C;
}
The new size and colors are works fine, but the only problem is that after I scroll down and then scroll back up, the button is not completely hidden again as before I scroll it down (see the attachment, pointed by blue arrow at the bottom). It seems the bottom: -36px; that I use as the new code are not working again when I scroll it back up. How do I fix this?
Also, how can I enlarge the "posted by..." font size (see the attachment, pointed by blue arrow above). I want to make it a little bit bigger and maybe change the text color also the text-link color to be different among the overall text, where I can find this code in the style.css file?
Anyway, I want to fix these 2 issues by directly editing the style.css file instead of using "custom css" box that you provided, since that custom css box of mine is already kind of "untidy".
Last but not least, you work on this Salient theme is fantastic, and your after sales support too.
Regards,
Robertus Audy
[code language="css"]
#to-top {
display: block;
position: fixed;
text-align: center;
right: 17px;
bottom: -36px;
color: #fff;
cursor: pointer;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
z-index: 10000;
height: 35px;
width: 35px;
background-color: rgba(240,81,51,0.5);
background-repeat: no-repeat;
background-position: center;
transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
-webkit-transition: background-color 0.1s linear;
-o-transition: background-color 0.1s linear;
}
#to-top i {
line-height: 35px!important;
width: 35px!important;
height: 35px!important;
font-size: 20px!important;
top: 0px!important;
bottom: -36px!important;
left: 0px!important;
text-align: center!important;
background-color: transparent!important;
}
#to-top:hover, #to-top.dark:hover {
background-color: #27CFC3;
}
#to-top.dark {
background-color: #F3735C;
}
[/code]
Hey Robertus,
To modify the size of the meta info in the blog use this in your custom css box in the Salient options panel:
.post-header, #single-below-header { font-size: 14px!important; }To modify the distance that the scroll to top button moves you'll need to edit the init.js file located in the js folder at these sections:
function showToTop(){ if( $scrollTop > 350 ){ $('#to-top').stop(true,true).animate({ 'bottom' : '17px' },350,'easeInOutCubic'); $(window).unbind('scroll',showToTop); $(window).bind('scroll',hideToTop); } } function hideToTop(){ if( $scrollTop < 350 ){ $('#to-top').stop(true,true).animate({ 'bottom' : '-30px' },350,'easeInOutCubic'); $(window).unbind('scroll',hideToTop); $(window).bind('scroll',showToTop); } }Cheers!
You're welcome! I'll be with you on that one shortly :)