5/5 - (4 votes)

Do you want to know How To Add Social Icons For Helix Framework? Then check this tutorial to do it easily! In this article, we will make an example with VK social network and ET Tea – Responsive Tea Company Joomla Template. Let’s check now!

Step 1.  Add more social field for Helix III framework feature with PHP & HTML code

To do that, just go to Admin >> Extensions >> Templates >> Templates (File Manager for template) then open ENGINETEMPLATES template. Take a quick look at this screenshot:

Adding Social Icons For Helix Framework

At list of template file, go to the ‘features’ folder and open the ‘social.php’ file. Then we simply define new once social param and then make output style for them. Follow this screenshot :

Adding Social Icons For Helix Framework

Next we will define new more social param via function renderFeature().

$vk = $this->helix3->getParam(‘vk’);

Adding Social Icons For Helix Framework

And add more HTML output for this social (VK social network) as the following screenshot.

if( $vk ) {
$html .= ‘<li><a target=”_blank” href=”‘. $vk .’”><i class=”fa fa-vk”></i></a></li>’;
}

Adding Social Icons For Helix Framework

Note: You must to define Font Awecome class for social, it’s “fa fa-vk” in this example, you can see Font Awesome social class here.

Step 2. Define more social field for Template Settings on Helix III framework

The next thing you need to do is to go to Templates (File Manager for template), then open the ‘templateDetails.xml’ file and and define option for Template Settings by going to social defination code (you will find it by searching for keyword ‘social”).

<field name=”vk” type=”text” label=”HELIX_SOCIAL_ICON_VK” description=”HELIX_SOCIAL_ICON_VK_DESC” class=”child social_icons social_icons_1″ />

Adding Social Icons For Helix Framework

You can define HELIX_SOCIAL_ICON_VK and HELIX_SOCIAL_ICON_VK_DESC via language file, or make direct text, example: label=”VK Social Network” description=”This is social network URL and Icon for VK”.

Now, you can see new social field that we just defined by going to Template Settings, open ‘Basic’ tab, and find ‘Social’ option. See the screenshot below:

Adding Social Icons For Helix Framework

If you have any question about this post, don’t hesitate to leave a comment below. And don’t forget to share with your friends if you find it useful! Thanks!

Comments

    • engine

      Yes, you just turn off this option via Template Settings > Basic > Social Icon, then go to Module Manager, create new Custom HTML, put your pictures and place this module at position that you set for social network icon display.

Leave a Reply

Your email address will not be published. Required fields are marked *

Save 99% money with single purchase! Get All-In-One DEV package: Access all paid products! Unlimited Downloads with more than 300+ PRO items Sign Up Now!
Black Friday & Cyber Monday Sale! Get 50% OFF for your purchase on today! Coupon code: BFCM50 Redeem Now