Custom Skin Color - Fine tunning

pdgpereira

Hi,

Selecting Custom Skin, I ran against difficulty to edit the action bar's color Vs action bar's social icon's colors.
Where can I actually change social icon's color and mouse over color?

Albert

Hi,

social icons are in RGBA color and can`t be changed from muffin options section. They are in RGBA because we used transparent option for them. So if you want to change their color, you need to use below custom css:

#Action_bar .social li a { color: rgba(255, 255, 255, 0.5); }

or you can also use them with hex colors, like below:

#Action_bar .social li a { color: #FFF; }

But for hover, you need to use them similar as above but declaration is different:

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

pdgpereira

Fantastic!

How do you declare the footer social icons and back to top button?

Thanks!

Albert

For social buttons and back to top button in footer, below css will be the best:

#Footer .footer_copy .social li a { color: #FFF; }
#Footer .footer_copy a#back_to_top { background: #000; }
#Footer .footer_copy a.button .button_icon i { color: #FFF; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

pdgpereira

Brilliant!

I guess I could get the rest from the css files as I need'em.

Albert

Yes, exactly! But much better is get them from Firebug for example. This was described on http://themes.muffingroup.com/betheme/documentation/#theme-customizations - of course the same doc you got included into theme package

Learn more: Video Tutorials | How To | FAQ Vote on what comes next