Change the Order of the Social Icons - Aaron Meyers

Change the Order of the Social Icons

The following swaps the order of the Social Icons. It assumed that the original order was "Facebook, Twitter, G+, ... others". It moves G+ to first so the new order becomes "G+, Facebook, Twitter, ... others". You will need to tweak the # of pixels to whatever looks best for you. In the code below, the search icons were fairly large and needed to be moved by 75 pixels. On my site, and on the screenshot above, I used small icons that were separated by 35 pixels and I replaced all instances of "75px" with "35px". Also note: The code below assumes your social icons are in the HEADER (top of the page). If it is not, replace all instances of ".sm-page-layout-region-top " with:

  • ".sm-page-layout-region-top" - for social icons in the header
  • ".sm-page-layout-region-left" - for social icons in the left sidebar
  • ".sm-page-layout-region-footer" - for social icons in the footer
  • /* Move the Facebook icon to the right by 75 pixels */
    .sm-page-layout-region-top .sm-page-widget-social-links .sm-page-widget-social-links-facebook { 
      left: 75px;
      position: relative;
    }
    
    /* Move the twitter icon to the right by 75 pixels */
    .sm-page-layout-region-top .sm-page-widget-social-links .sm-page-widget-social-links-twitter {
      left: 75px;
      position: relative;
    }
    
    /* Move the G+ icon left by 140 pixels. 
       I used 140px because it looks better than 150. Tweak to desired position */
    .sm-page-layout-region-top .sm-page-widget-social-links .sm-page-widget-social-links-googlePlus {
      left: -140px;
      position: relative;
    }
    

    Comments

    Powered by SmugMug Log In