Changing Social Icon and Action Bar icon colors

jtrandental · July 2014

Hi,

How do I change the color of the Social Icons and the Action Bar telephone and mail icons? I've set my action bar to be white and now they are not showing up.

Thank you

Albert · July 2014

Hi,

at this moment we don`t have option to set them from muffin options section but we`ll add it in future updates. But at this moment you can use below custom css for that:

#Action_bar .contact_details li { color: #000; }
#Action_bar .contact_details li a { color: #E2E2E2; }
#Action_bar .social li a { color: #000; }

Of course like each custom css, you should paste it into Theme options > Layout > Custom CSS section. This will definitely help

jtrandental · July 2014

worked great. thank you!

pariz · January 2015

Hi, I am trying to do the same with the "Sliding top". I would like t change link colors. What are the right instructions I should put in my custom CSS?

#Sliding-top ???

Thanks!

Albert · January 2015

@pariz Each css should be pasted in Theme options > Layout > Custom CSS & JS > Custom CSS section.

ProdigalMedia1 · May 2015

Hi this solved my issue but now this section turns completely when on mobile devices. It displays how i want it to on the browsers but is not visible on other devices. http://mk.prodigalcompany.com/

Albert · May 2015

@prodigitalMedia1 Sorry but what your issue exactly is? Because this topic is related with social icons and your question is a little bit confusing.

keyandcee · June 2015

anybody a idea to change the icon color of "#social-menu" at the footer? my background is white, i would like to change the color

THX

Albert · June 2015

@keyandcee To change social icons color in footer, please use below css:

#Footer .footer_copy .social li a { color: #000 !important; }

dannypage1 · December 2015

Hey I'm really struggling to add social icons in action bar

Tried this code nothing happens


#Action_bar .contact_details li { color: #000; }
#Action_bar .contact_details li a { color: #E2E2E2; }
#Action_bar .social li a { color: #000; }

Albert · December 2015

@dannypage1 You won't be able to add icons in action bar with custom css. BTW above css is responsible for colors, nothing else. To set social icons, you supposed to set links for icons under Theme options > Social section.

pacoiglesias · January 2016

can i put a different color to each one?? how i do that?

i want twitter on blue, Gmail red for example.... to heir original colors, is that posible ? what should i type

Albert · January 2016

@pacoiglesias No, you can't unfortunately.

DebLiz · March 2016

Hi, is there a way to change the color of the hover to something else other than white in my case at http://tnsmachines.com ?

I've used the mentioned code to change the main color to navy blue, but when I hover over the social icons, it's still white. I'd like to change the action bar to a white background but need to fix the social icon hover to be #2B6CA0 on hover before I can change the action bar to white..

Thanks!

Deb

ideoestudiocreativo · March 2016

Ni, Could change the color for the slogan of the action bar with css?

Albert · March 2016

@DebLiz You can change hover color with the following css:

#Action_bar .social li a:hover { color: #000 !important; }

@ideoestudiocreativo http://forum.muffingroup.com/betheme/discussion/1021/how-to-change-betheme-action-bar-link-colour

ideoestudiocreativo · March 2016

Thx!
regards

Albert · March 2016

You're welcome!

vir · March 2016

Hello,
ican't change backgroud color of tha action bar,
i'll with back office options and css :
#Action_bar { background-color: #fff; !impotant; }

but nothing
can you help me please ?
thx a lot

Albert · March 2016

@vir Please send us link to site where you can not change it's background.

vir · March 2016

Ho sorry, i can't because it's in local host :-(

vir · March 2016

I find an issue, it's work with custom css :

.header-split #Action_bar { background-color: #DCD5C5; }

BR

Albert · March 2016

Great!

neil74white · September 2016

Hi

Is there a way to increase the size of the social icons in the header

Albert · September 2016

@neil74white http://forum.muffingroup.com/betheme/discussion/15684/changing-size-of-social-icons

TREKOOOO · December 2016

Albert · December 2016

@TREKOOOO We are sorry but we do not have any css solution to make it possible unfortunately.

modelschile · July 2019

Please send me the exact code that I must put to make the icons of social networks in footer and other sections of the template larger....

Bryan · July 2019

modelschile

We have to see a link to your website to provide you with such CSS.

Every page is different and we need to make sure that it will work with yours.

thanks

Changing Social Icon and Action Bar icon colors

Comments