Change Social Icon Colors

By default SmugMug lets you customize the social icons to "Default", "Muted", "Accented", or "Branded". However, there's no easy way to change the colors to something else or to change the hover color of these icons. The following code will allow you to change the social media icons to be whatever color and whatever hover color you desire: Add the following CSS to your theme's Advanced CSS settings:

/* Change the color of the social media icons */
.sm-page-widget-social-links a {
   color: #F8F8F8 !important;

/* Change the hover color of the social media icons */
.sm-page-widget-social-links a:hover{
   color: #FFFFFF !important;


  • Roger Dean

    on May 27, 2016

    HI Aaron, Thanks for all your help. You've single handedly improved smugmug tenfold for our site! Quick Q, this CSS isn't working for me. My social links are in our header, left of site logo. 'Branded colours' selected. NavBar hover Colour CSS is working great. Any thoughts?

Powered by SmugMug Owner Log In