Home » Categories » Multiple Categories

Adding More Social Media Icons to the Footer

Summary:

By default, the Celebrity theme includes several social media icons in the Informative footer, including Twitter, Facebook, Google +, and Mail. Depending on whether you choose the Light or Dark theme style (System / Configuration / NCR / Theme Settings), the icons will change from light to dark accordingly to work with your chosen color palette.

However, the default color palette and/or default icons may or may not meet all of your needs. Changing the default behavior is possible with CSS. If you aren't comfortable working with CSS, you can contact the Professional Services Team for assistance modifying your CSS (hourly rates will apply).

Solution:

You can modify the social media icons in the footer area to better suite your needs. The following CSS snippet adds the following social media icons and supporting CSS: Blog, Facebook, Flickr, Google +, Instagram, LinkedIn, Mail, Pinterest, Trip Advisor, Twitter, Yelp, and YouTube.

  1. Download additional social media icons.
  2. Unzip the social media icons to your local drive.
  3. In NRO, select CMS / Images & Other Files and upload the desired social media icons to the top-level directory.
  4. Select CMS / Static Blocks and edit the Celebrity Theme - Footer Links (Informative) static block. Click the Show/Hide Editor button to display the code view. For this step, you must modify the HTML source code (don't use the WYSIWYG editor!). For example, to display Facebook, Twitter, Pinterest, Instagram, and YouTube, replace the default "social-icons" section with the following code snippet:

    <ul class="footer-social">
    <li><a class="facebook" href="Insert URL Here" target="_blank">Facebook</a></li>
    <li><a class="twitter" href="Insert URL Here" target="_blank">Twitter</a></li>
    <li><a class="pinterest" href="Insert URL Here" target="_blank">Pinterest</a></li>
    <li><a class="instagram" href="Insert URL Here" target="_blank">Instagram</a></li>
    <li><a class="youtube" href="Insert URL Here" target="_blank">YouTube</a></li>
    </ul>

  5. Select System / Configuration / General / Design > HTML Head and add the following CSS to the Misc Scripts field:

    <style>

    .light .footer-links ul.footer-social a, .footer-links ul.footer-social a { height: 28px; line-height: 28px; display: block; }

    /* Social Media Icons - For Use with the Informative Footer using the LIGHT Theme Style */
    .light .footer-links ul.footer-social a.blog { background: transparent url("/media/wysiwyg/18-dark-blog.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.facebook { background: transparent url("/media/wysiwyg/18-dark-facebook.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.flickr { background: transparent url("/media/wysiwyg/18-dark-flickr.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.google, .light .footer-links ul.footer-social a.googleplus { background: transparent url("/media/wysiwyg/18-dark-googleplus.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.instagram { background: transparent url("/media/wysiwyg/18-dark-instagram.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.linkedin { background: transparent url("/media/wysiwyg/18-dark-linkedin.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.mail, .light .footer-links ul.footer-social a.email { background: transparent url("/media/wysiwyg/18-dark-mail.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.pinterest { background: transparent url("/media/wysiwyg/18-dark-pinterest.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.tripadvisor { background: transparent url("/media/wysiwyg/18-dark-tripadvisor.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.twitter { background: transparent url("/media/wysiwyg/18-dark-twitter.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.yelp { background: transparent url("/media/wysiwyg/18-dark-yelp.png") no-repeat scroll 0% 50%; }
    .light .footer-links ul.footer-social a.youtube { background: transparent url("/media/wysiwyg/18-dark-youtube.png") no-repeat scroll 0% 50%; }

    /* Social Media Icons - For Use with the Informative Footer using the DARK Theme Style */
    .footer-links ul.footer-social a.blog { background: transparent url("/media/wysiwyg/18-light-blog.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.facebook { background: transparent url("/media/wysiwyg/18-light-facebook.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.flickr { background: transparent url("/media/wysiwyg/18-light-flickr.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.google, .footer-links ul.footer-social a.googleplus { background: transparent url("/media/wysiwyg/18-light-googleplus.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.instagram { background: transparent url("/media/wysiwyg/18-light-instagram.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.linkedin { background: transparent url("/media/wysiwyg/18-light-linkedin.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.mail, .footer-links ul.footer-social a.email { background: transparent url("/media/wysiwyg/18-light-mail.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.pinterest { background: transparent url("/media/wysiwyg/18-light-pinterest.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.tripadvisor { background: transparent url("/media/wysiwyg/18-light-tripadvisor.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.twitter { background: transparent url("/media/wysiwyg/18-light-twitter.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.yelp { background: transparent url("/media/wysiwyg/18-light-yelp.png") no-repeat scroll 0% 50%; }
    .footer-links ul.footer-social a.youtube { background: transparent url("/media/wysiwyg/18-light-youtube.png") no-repeat scroll 0% 50%; }

    </style>


Attachments Attachments
There are no attachments for this article.
Comments Comments
There are no comments for this article. Be the first to post a comment.
Related Articles RSS Feed
How to Make a Static Block
Added on Tue, May 29, 2012
Pixlr Image Editor and AjaXplorer
Added on Thu, Aug 22, 2013
Adding a Customer Connect Newsletter Signup
Added on Wed, Jan 30, 2013
How can I use Flash files in NRO?
Added on Thu, Sep 20, 2012
Changing Display Labels throughout your Storefront
Added on Fri, Jun 14, 2013
Adding a Banner, Link, or Text as a CMS Block to individual sections of your site
Added on Tue, May 29, 2012
Add or Embed Video on Product Pages
Added on Wed, Nov 6, 2013
Adding New Pages to NRO
Added on Fri, May 25, 2012
How do I add a Category Banner / Image
Added on Tue, Jun 23, 2015