Page 7 of 22
Topslide - Custom HTML Module
In the topslide position our Custom HTML Module to display the social icons in a dropdown slidepanel. Use the following mark up for the Module HTML.
HTML
<div class="row-fluid"> <a href="https://www.joomlaxtc.com"><div class="span2 sleft facebook" > <i class="fa fa-facebook"></i> </div></a> <a href="https://www.joomlaxtc.com"> <div class="span2 sleft google"> <i class="fa fa-google-plus"></i> </div></a> <a href="https://www.joomlaxtc.com"> <div class="span2 sleft linkedin"> <i class="fa fa-linkedin"> </i> </div></a> <a href="https://www.joomlaxtc.com"> <div class="span2 sleft twitter"> <i class="fa fa-twitter"> </i> </div></a> <a href="https://www.joomlaxtc.com"> <div class="span2 sleft youtube"> <i class="fa fa-youtube"> </i> </div></a> <a href="/index.php/jstuff/contact"> <div class="span2 sleft email"> <i class="fa fa-envelope"> </i> </div></a> </div>
Replace the a href's with your own social network links and the email icon with your contact page. The icons are created with Font Awesome. For a full list of icons available check the template typography page.
Use the module suffix classes: nopad nomarg - This will remove the margin and padding from the module.
NOTE: Make sure if you are using a WYSIWYG editor that you have HTML Stripping off or you may lose the HTML markup when saving
For more information on configuring the HTML Module visit the full documentation HERE
