0
Cart Empty
0.00 (0 votes)

In this article I would like to guide you how to display social icons on the site.
I will use the template JM Real Estate Ads as an example.

Locate module position

At first you need to locate a module position for social icons.
In JM Real Estate Ads template social icons are located at the bottom of site.

 

custom-social-icons

 

Best way to check module position on already installed demo sites - quickstart is using front-end site management in Joomla 3.x 
If you build from scratch take a look at  All Templates Positions article (Template Features -> All Template's Positions) or follow Subpage link on the demo site.

In this case I would like to display social icons on position bottom3. Remember that in the other template positions may be different. In most of our templates social icons module is published on position social. You can also search for module using Module Manager and Filter: Position.

Get social icons code

If you want to create new custom HTML module with social icons you need to get social icons code. Each demo site of the particular template includes Typography article (Template Features -> Typography) where  you can find the ready made code.

 

social-icons-code

 

Just copy the code to clipboard.

Create the custom HTML module

Next, I need to create Custom HTML module on bottom3 position.

TIP: How to create a custom HTML module?

Go to backend -> Extensions -> Module Manager -> New. Then select Custom HTML module
Then you need to paste the code to module. Use source code editor (because you need to paste HTML code, not regular text).

 

source-code

 

Change the default URLs to your own profile links

The last step is to change the default URLs to your own URLs. To do this, simply change the pasted code from the previous step. Remember to change only HREF value which is responsible for URL. Otherwise icons may appear incorrectly.

 

profile-links

Example:


<a class="jm-facebook" href="#link"> </a>

Change to:


<a class="jm-facebook" href="http://www.facebook.com"> </a>

 

If social icons are already published on the site, the only you need to do is to change URLs.
Skip steps 1-3, just search for social module. 

Worth to mention

After adding a custom HTML code in module, you may find out the HTML code is different once you saved the module. It is because Joomla Editor changes '&nbsp;' to white space and could remove some HTML tags. Remember to always copy the code from Typography if you like to edit URLs.

 

Users' reviews

Total rating: (0 votes) Add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2017 Joomla-Monster.com All rights reserved. Joomla! is Free Software released under the GNU/GPL License.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Joomla-Monster.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

You will Get best support ever!

Do you know that besides high-quality templates
& pro extensions given for FREE 
our customers appreciate the excellent support

Check here why :)