Altitude Footer Credits + Social Icons?

[VasilisMember]

So, here is a weird problem Erik...dunno if other members of forum know about this already...

Social Icons Widget conflicts if you have it active 2 times in different widgets

So, I have one Social Icons Widget on my primary sidebar and one on the new Page Footer we just fixed...

For some reason the social icons widget on the primary sidebar conflicts with the page footer social icons widget settings...

It conflicts with the colors and now we changed the css and added float: right the primary sidebar widget also followed this.

Here is the link to check it

http://cleancar.me/blog/

For instance the social icons widget on the primary sidebar should have white background on the social icons....and the social icons widget on the footer should have black background....however the first one follows the second one settings...

Weird? Right?

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. SlaterMember]

Whatever CSS you added for the sidebar version of the plugin, prefix your selector with .sidebar followed by a space, for example:

If the sidebar version of the CSS is something like .simple-social-icons ul li a, change it to .sidebar .simple-social-icons ul li a.

The most effective method is to find the CSS for .simple-social-icons ul li a, then define .sidebar .simple-social-icons ul li a immediately below it to include only the changes you want, i.e. you don't have to duplicate every style element.

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[VasilisMember]

Awesome!

Here is what I tried

.sidebar .simple-social-icons ul li a {
        margin: 0 15px;
}

But the results are just expanding the area between the social icons.

Check it here => http://cleancar.me/blog

Kind Regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. SlaterMember]

Right ... the point being that you have now targeted the sidebar version of your social buttons while leaving the footer version unchanged.

The code I provided was just a sample to show you the way 🙂 The code that you tried will add a margin of 15px to the left and right of each of your social button links.

To get your white background thingy going, just change that margin: 0 15px; to background-color: #fff !important; ... or add to it, depending on what you want to do.

I should also add that I absolutely hate the Simple Social Icons plugin 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[VasilisMember]

Ok I see...

However the problem is that if there is a margin less than 15px it again makes the next sidebar widget to get up at the same horizontal level with social icons widget and overlap each other...

And the 15px margin lets a lot of space between each social icon...

Check this screenshot with 5px margin to understand more

Kindly appreciated

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. SlaterMember]

Remember when I said before that we will likely have to "replace the bit we just added"? Well, we have arrived at that moment 🙂

You now need to change:

.simple-social-icons {
float: right;
}


to

.site-footer .simple-social-icons {
float: right;
}


---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[VasilisMember]

Awesome!

That did the trick, AGAIN 🙂

Thank you Erik!

Tons of appreciation for you.

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Author]

Posts