Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 14, 2017 at 7:51 am #821004
    ccyran

    Hi guys,

    Can you provide quick CSS for making the box of the scroll back up smaller? I like the arrow as is, but the box it’s inside of is pretty big. And if possible, I’d like this quick CSS to change the opacity of the box too.

    Website: ccyran.com
    Reference: https://ibb.co/bFFbua

    Thanks!
    Chris

    July 14, 2017 at 9:09 am #821030
    Vinay

    Hey ccyran,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #scroll-top-link{
	width:25px;
	height:25px;
}
#scroll-top-link:before{
	top:-13px;
	right:8px;
	position:absolute;
}

    Best regards,
    Vinay

    July 14, 2017 at 3:19 pm #821202
    ccyran

    Thanks! Is there quick CSS to reducing the opacity of the box too? But keeping the arrow as is.

    July 14, 2017 at 5:31 pm #821305
    Sarah

    Hi Chris!

    Please try this:

    #scroll-top-link {background: rgba(0,0,0,0.7) !important; }

    You can add it into the first part Vinay’s code like so:

    #scroll-top-link{
	width:25px;
	height:25px;
	background: rgba(0,0,0,0.7) !important; 
}

    I hope that helps!

    Best regards,
    Sarah

    July 16, 2017 at 7:49 am #821927
    ccyran

    Hey that fixed it!

    But it looks like there’s a dark stroke around this element as well. Can you remove that?

    Actually I figured out to how to do it. Just needed to add “border: 0px;”

    Thanks guys! you can close this thread.
    Chris

    • This reply was modified 7 years, 5 months ago by ccyran.
    July 16, 2017 at 7:57 am #821929
    ccyran

    Hey guys,

    Apologies. It’s actually not quite right. Now the arrow is off center and the border stroke appears when I hover over the icon.

    Currently this is the CSS i have. Can you fix it?

    #scroll-top-link{
    width:30px;
    height:30px;
    background: rgba(0,0,0,0.5) !important;
    border: 0px;
    }
    #scroll-top-link:before{
    top:-12px;
    right: 9.5px;
    position:absolute;
    border: 0px;
    }

    **Update!** I believe I fixed it with this CSS, but could you guys make sure I did it correctly?
    See below…

    #scroll-top-link{
    width:30px;
    height:30px;
    background: rgba(0,0,0,0.5) !important;
    border: 0px;
    }
    #scroll-top-link:before{
    top:-12px;
    right: 12px;
    position:absolute;
    border: 0px;
    }

    #scroll-top-link:hover {
    background-color: #060606;
    color: #ffffff;
    border: 0px solid;

    thanks!
    Chris

    • This reply was modified 7 years, 5 months ago by ccyran.
    July 16, 2017 at 11:33 pm #822232
    Mike

    Hi,
    Well done, it looks good :)
    shall we close this then?

    Best regards,
    Mike

    July 17, 2017 at 12:40 am #822251
    ccyran

    Yes! Thank you!

    July 17, 2017 at 12:51 am #822254
    ccyran

    Hey don’t close this thread!

    I actually noticed that with this CSS, now my masonry gallery text overlay is very bold and it shrinks the overall width of it much smaller. Can you fix this?

    http://www.ccyran.com/work/
    It used to be light.

    This is the CSS im using.

    #scroll-top-link{
    width:30px;
    height:30px;
    background: rgba(0,0,0,0.4) !important;
    border: 0px;
    }
    #scroll-top-link:before{
    top:-11px;
    right: 11.5px;
    position:absolute;
    border: 0px;
    }

    #scroll-top-link:hover {
    background-color: rgba(0,0,0,0.7) !important;
    color: #ffffff;
    border: 0px solid;

    • This reply was modified 7 years, 5 months ago by ccyran.
    July 17, 2017 at 4:37 pm #822732
    Sarah

    Hey ccyran,

    That’s strange. #scroll-top-link should only affect the Scroll Top Button. The CSS that you last shared with us is missing a closing curly bracket, which can affect/negate your other CSS. Can you check if your brackets are properly closed, please? :)

    Best regards,
    Sarah

    July 17, 2017 at 6:22 pm #822805
    ccyran

    Hey Sarah,

    That fixed it! Apologies!

    July 17, 2017 at 11:50 pm #823013
    Nikko

    Hi,

    Glad that Sarah helped you. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Scroll back up arrow box’ is closed to new replies.