Scroll Top Anchor Styling Problem

Support
#1

Hi there,

I tried to style the anchor in our design as in the forum Thread “Scroll top anchor CSS styling” from Apr 12 described.
What do I do wron? Nothing changes besides the hover i class.

//scroll-top-anchor-css-styling
.x-scroll-top:link i{
color: rgb(235, 114, 35);
border-color: rgb(235, 114, 35);
opacity: 0.5 !important;
}

.x-scroll-top:hover i{
color: rgb(235, 114, 35);
border-color: rgb(235, 114, 35);
opacity: 1 !important;
}

.x-scroll-top:active{
color: rgb(235, 114, 35);
border-color: rgb(235, 114, 35);
opacity: 0.5 !important;
}

.x-scroll-top:visited{
color: rgb(235, 114, 35);
border-color: rgb(235, 114, 35);
opacity: 0.5 !important;
}

I want to change the color of the indicator an the border to rgb (235, 114, 35) when the ink is not hovered (as normal link, active and visited).

Any help?
Thank you.

#2

Hi @begeistert

Thanks for writing in! Could you please copy all of your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any CSS errors. If you’re getting any errors, you need to correct those so that your CSS will parse correctly.

Let us know how it goes.
Thanks!

#3

There are only warnings. Comment changed in /…/

Same affects on website. Can you help?

#4

Hi There @begeistert

I have checked your issue further. Use the :link selector to style links to un-visited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

:hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective. Also instead of .x-scroll-top, try using .x-scroll-top.in and see if that helps.

Hope that helps.
Thanks!

#5

Hi, it runs like you said with this code:

/*scroll-top-anchor-css-styling*/
.x-scroll-top.in:link {
	color: rgb(235, 114, 35);
	border-color: rgb(235, 114, 35);
	opacity: 0.5 !important;
}
.x-scroll-top.in:visited{
	color: rgb(235, 114, 35);
	border-color: rgb(235, 114, 35);
	opacity: 0.5 !important;
}
.x-scroll-top.in:active{
	color: rgb(235, 114, 35);
	border-color: rgb(235, 114, 35);
	opacity: 0.5 !important;
}
.x-scroll-top.in:hover {
	color: rgb(235, 114, 35);
	border-color: rgb(235, 114, 35);
	opacity: 1 !important;
}
#6

Hi There,

Please update your CSS code to this:

a.x-scroll-top {
    border-color: rgb(235, 114, 35);
    color: rgb(235, 114, 35);
}

And if you want to have a different color on hover, add this as well:

a.x-scroll-top:hover,
a.x-scroll-top:hover i {
	border-color: red;
	color: red;
}

Replace the red with the desired color.

Hope it helps,
Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.