Joomla Templates Club 406,261 posts

[bencarlin Friend bencarlinJoin date: May 2014Posts: 43Downloads:0Uploads:24 Thanks: 13 Thanked: 1 times in 1 posts]

#202127

As demonstrated by the three screenshots I have taken, the social-link-block changes to a black colour before its rightful white colour when resizing the browser window. I’ve looked into the css but can’t find the right part to change.

Any suggestions?

Cheers

Ben

---

Attachments:

1. 
2. 
3. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#553173

Hi
can you clarify A bit more what exactly you want to do . currently social buttons are in white color and they will have different color when you hover on them >>>http://prntscr.com/4wlxdg
do you want to change the white color into black for all or want to change the color when you hover on them .
let me know i will help you

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#553178

Hi there,
Just guessing your issue.
– Web page loading
– The block have “black color” border
– Web page load finished
– The block have right border color.

If it’s i guess because css is not complete loaded. That’s why border color still not apply right color 🙂

Thank you,
Viet Vu

[bencarlin Friend bencarlinJoin date: May 2014Posts: 43Downloads:0Uploads:24 Thanks: 13 Thanked: 1 times in 1 posts]

#553243

It’s not to do with loading. It’s to do with what size the browser window is. When I scale the browser window down from how image 1 looks like, I get the black box with the + sign in it. If I leave the browser window at this size the box just stays black. However, when I reduce the the browser window size a bit more, the correct white colour appears.

Which CSS file do I need to edit to fix this problem?

Thanks again

Ben

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#553244

Hi
the background is comes from this css rule .
add this css code into your custom.css file

.social-link {
background-color: #000000 }

Change the color code as per you need.

+ There is left border css if you want to change it as per your need
add this code in custom.css and edit as per your need

.social-link {
border-left: solid 1px #1d1d1d }

Hope it helps you

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#553245

Hi
the background is comes from this css rule .
add this css code into your custom.css file

.social-link {
background-color: #000000 }

Change the color code as per you need.

+ There is left border css if you want to change it as per your need
add this code in custom.css and edit as per your need

.social-link {
border-left: solid 1px #1d1d1d }

Hope it helps you

1 user says Thank You to Pankaj Sharma for this useful post

1. bencarlin

[bencarlin Friend bencarlinJoin date: May 2014Posts: 43Downloads:0Uploads:24 Thanks: 13 Thanked: 1 times in 1 posts]

#553248

Works perfectly!:laugh:

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#553251

HI you need to change the color code as i suggested above in custom.css file .
color #000000 is black color , you need to change it from custom.css file

>>> .social-link {
background-color: #000000 }

change it as per your need . currently its black .

[bencarlin Friend bencarlinJoin date: May 2014Posts: 43Downloads:0Uploads:24 Thanks: 13 Thanked: 1 times in 1 posts]

#553253

I was being very stupid. Yep, I noticed I had put ##FFFFF instead of #FFFFF. Roockie error.

Thanks again for your time and patience. 🙂

[Author]

Posts