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>



Article ID: 682
Created On: Tue, May 31, 2016 at 4:04 PM
Last Updated On: Mon, Jun 6, 2016 at 10:08 AM

Online URL: http://help.ncrretailonline.com/article/adding-more-social-media-icons-to-the-footer.html