Joomla Templates Club 406,261 posts

[zomidaily Friend zomidailyJoin date: March 2013Posts: 132Downloads:0Uploads:4 Thanks: 7 Thanked: 9 times in 1 posts]

#195613

Hi…

How can I change the “Back to Top” icon (color)?

My icon appears like this http://awesomescreenshot.com/0a72gq3v09
Live site here: http://www.ciimnuai.com/zd1/

Regards,
Joseph

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#525959

Hi

In this file /templates/ja_biz/css/template.css line 4314

.back-to-top {
background-color: #000000
bottom: 15px;
border: 1px solid #f2735a
border-radius: 2px;
height: 40px;
margin: 0;
position: fixed;
right: 21px;
width: 40px;
z-index: 1000;
opacity: 0.2;
filter: alpha(opacity=20);
-webkit-transition: opacity 350ms;
transition: opacity 350ms;
}

[zomidaily Friend zomidailyJoin date: March 2013Posts: 132Downloads:0Uploads:4 Thanks: 7 Thanked: 9 times in 1 posts]

#526228

Hi @pavit

Is there any code that I can apply from the custom.css please?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#526229

<em>@exoduser 415759 wrote:</em><blockquote>Hi @pavit

Is there any code that I can apply from the custom.css please?</blockquote>

what you mean ?

In the custom.css file you can add

.back-to-top {
background-color: #your color!important:
}

[zomidaily Friend zomidailyJoin date: March 2013Posts: 132Downloads:0Uploads:4 Thanks: 7 Thanked: 9 times in 1 posts]

#526256

Hi @pavit

I did try this code:

.back-to-top {
background-color: #ffffff !important:
}

but no different. I can’t see the arrow icon in the middle as well. screenshot: http://awesomescreenshot.com/08b2h0f20d

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#526301

Hi

There was a misunderstanding i thought you want to change the square background not the icon
anyway to change the icon color; in the same file /templates/ja_biz/css/template.css around line 4340

.back-to-top i {
color: #ffffff <------change icon color here
font-size: 12px;
line-height: 1em;
left: 50%;
margin-top: -7px;
margin-left: -3px;
position: absolute;
top: 50%;
}

[Author]

Posts