Login



Lost Password? Create An Account
Demos

Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

How to add additional Social Icons in Vertex

Often times users want to be able to add additional social icons into their site. In this Tutorial you will learn how to add additional Social Icons in the Vertex Framework. Keep in mind that not all Vertex designs have social icons built in.

We generally get asked this question a lot and while it is quite a complex task for a newer web developer I will try to outline all the steps required to make this addition properly. There are multiple files we will need to modify in this Tutorial so before I get started I recommend creating a full site backup in case something goes wrong.


  • This Tutorial is for Vertex based designs only (Paradigm Shift and Newer)
  • Some designs use positions instead for Social Icons
  • You can substitute "LinkedIn" with any other social name
  • This Tutorial is intended for Intermediate - Advanced users

Beginner Alternative


If you do not intend to use a specific pre-programmed social icon on your site such as "RSS" you can simply swap out the rss.png icon on the server with a different social icon. Then in the RSS input box in the Template Manager you can add a link to any site matching your new icon.

Files Needing Modification:


  • Index.PHP
  • Template.CSS
  • Specific.XML
  • en-GB.tpl_templatename
  • New icon image added

Step 1: Index.PHP

Do a search for "facebook" in the index.php. You will see something like the following:

<?php if ($s5_rss  != "" || $s5_twitter  != "" || $s5_facebook  != "" || $s5_google  != "" || $s5_linkedin  !="") { ?>
		<div id="s5_social_wrap">
			<?php if ($s5_facebook  != "") { ?>
				<div id="s5_facebook" onclick="window.open('<?php echo $s5_facebook; ?>')"></div>
			<?php } ?>	
			<?php if ($s5_google  != "") { ?>
				<div id="s5_google" onclick="window.open('<?php echo $s5_google; ?>')"></div>
			<?php } ?>	
			<?php if ($s5_twitter  != "") { ?>
				<div id="s5_twitter" onclick="window.open('<?php echo $s5_twitter; ?>')"></div>
			<?php } ?>
			<?php if ($s5_rss  != "") { ?>
				<div id="s5_rss" onclick="window.open('<?php echo $s5_rss; ?>')"></div>
			<?php } ?>
                        <?php if ($s5_linkedin  != "") { ?>
				<div id="s5_linkedin" onclick="window.open('<?php echo $s5_linkedin; ?>')"></div>
			<?php } ?>
		</div>
	<?php } ?>

What Was Added #1 $s5_linkedin !=""


<?php if ($s5_rss  != "" || $s5_twitter  != "" || $s5_facebook  != "" || $s5_google  != "" || $s5_linkedin  !="") { ?>

What Was Added #2


<?php if ($s5_linkedin  != "") { ?>
<div id="s5_linkedin" onclick="window.open('<?php echo $s5_linkedin; ?>')"></div>
<?php } ?>

Step 2: Template.CSS

Do a search for "facebook" in the Template.CSS file and add the following coding for the new social icon called #s5_linkedin

#s5_facebook {
height:38px;
width:38px;
background:#3D5B99 url(../images/facebook.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}

#s5_facebook:hover {
background:#334C7F url(../images/facebook.png) no-repeat center center;
}

#s5_twitter {
height:38px;
width:38px;
background:#159CEB url(../images/twitter.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}

#s5_twitter:hover {
background:#1388CD url(../images/twitter.png) no-repeat center center;
}

#s5_google {
height:38px;
width:38px;
background:#DD4B39 url(../images/google.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}

#s5_google:hover {
background:#C04232 url(../images/google.png) no-repeat center center;
}

#s5_rss {
height:38px;
width:38px;
background:#FF6F14 url(../images/rss.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}

#s5_rss:hover {
background:#DF6111 url(../images/rss.png) no-repeat center center;
}

#s5_linkedin {
height:38px;
width:38px;
background:#00c10e url(../images/linkedin.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}

#s5_linkedin:hover {
background:#00990b url(../images/linkedin.png) no-repeat center center;}

What Was Added:

#s5_linkedin {
height:38px;
width:38px;
background:#00c10e url(../images/linkedin.png) no-repeat center center;
cursor:pointer;
display:inline-block;
margin-left:4px;
margin-right:4px;
}

#s5_linkedin:hover {
background:#00990b url(../images/linkedin.png) no-repeat center center;}

Step 3: Add Specific.XML Coding
-- File Location (templatename/xml/Specific.XML)


<field name="xml_s5_facebook" type="text" default="" label="TPL_FACEBOOK_LABEL" description="TPL_FACEBOOK_DESC" />
				
<field name="xml_s5_twitter" type="text" default="" label="TPL_TWITTER_LABEL" description="TPL_TWITTER_DESC" />
				
<field name="xml_s5_google" type="text" default="" label="TPL_GOOGLE_LABEL" description="TPL_GOOGLE_DESC" />
				
<field name="xml_s5_rss" type="text" default="" label="TPL_RSS_LABEL" description="TPL_RSS_DESC" />
				
<field name="xml_s5_linkedin" type="text" default="" label="TPL_LINKEDIN_LABEL" description="TPL_LINKEDIN_DESC" />

What Was Added:

<field name="xml_s5_linkedin" type="text" default="" label="TPL_LINKEDIN_LABEL" description="TPL_LINKEDIN_DESC" />

Step 4: Add Language Translation For Previous XML Entry
-- File Location (templatename/xml/language/en-GB/en-GB.tpl_templatename)


TPL_FACEBOOK_LABEL="Facebook URL"
TPL_FACEBOOK_DESC="Enter the text you desire for the facebook button. To disable simply leave this field blank."
TPL_TWITTER_LABEL="Twitter URL"
TPL_TWITTER_DESC="Enter the url you desire for the twitter button. To disable simply leave this field blank."
TPL_GOOGLE_LABEL="Google +1 URL"
TPL_GOOGLE_DESC="Enter the url you desire for the google plus one button. To disable simply leave this field blank."
TPL_RSS_LABEL="RSS URL"
TPL_RSS_DESC="Enter the url you desire for the rss button. To disable simply leave this field blank."
TPL_LINKEDIN_LABEL="LinkedIn URL"
TPL_LINKEDIN_DESC="Enter the url you desire for the linkedin button. To disable simply leave this field blank."

What Was Added:

TPL_LINKEDIN_LABEL="LinkedIn URL"
TPL_LINKEDIN_DESC="Enter the url you desire for the linkedin button. To disable simply leave this field blank."

Step 5: Upload your new image "linkedin.png" to your server in the following location
-- File Location (templatename/images folder)




Step 6: Add Input Text in the newly created LinkedIn URL Box (Blank = Non Published)
-- Located in Template Manager > Theme/Template Specific




Step 7: Clear your cache and reload the page. You should now see your new LinkedIn Icon!


Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.