Social Media icons in header like SMF Forum

[njtweb]

Is that a mod? If not can I do this manually in my default theme as well? Which template file and code? Thank you

[njtweb]

Thank you for the response. I don't have a problem with the icons, it's where to put them, (what file) and what code would be needed to put them there.

[njtweb]

Ok, that's interesting. Not sure why Illori deleted his/her comment.....

I'll rephrase then. I have the icons, Facebook and Twitter. I have uploaded them to the default theme images folder. I want to add code to the header of my forum so that I can place those icons in the header. Can anybody tell me which template or file I need to edit, I would greatly appreciate it.

Thanks in advance.

[br360]

Should be your index.template.php

Make sure to back up that file first of course.

[Bigguy]

There was no code given in those links illori posted. I would assume that is why she got rid of them. The poster here is looking for code to add those icons to the header and can not find it.

[njtweb]

Thank you, that is correct. I know where I want to put it in the index template, right above the search box but any HTML I add blows up the code and I get a syntax error.

[br360]

You may have some luck looking at the theme site here. A few of the newer themes already have code that has similar social icons in their index

Try testing out a few of them and see how they did it

[njtweb]

I tried that with this theme. My problem is php. I know where I want to put the code in the template for the icons but I can't use html. In other scripts similar to SMF I always customized with HTML inside templates. SMF won't allow that. I tried looking up php image code to grab a chunk and modify with my own images and URLs but same deal, as soon as I save the config the site breaks.

[Pipke]

find in /default/index.template.php
around line 250

Code Select Expand


echo '
</div>


replace by:

Code Select Expand


echo '
</div>
<style>
.social_networks img {
height: 35px;
width: 35px;
display: inline-block;
float: right;
margin: 0px 0px 5px 5px;
}
</style>
<div class="social_networks">
<a href="https://www.facebook.com/smforum/" target="_blank"><img src="https://static.simplemachinesweb.com/site/images/facebook.png" alt="Facebook"></a>
<a href="https://twitter.com/SimpleMachines" target="_blank"><img src="https://static.simplemachinesweb.com/site/images/twitter.png" alt="Twitter"></a>
<a href="https://github.com/SimpleMachines" target="_blank"><img src="https://static.simplemachinesweb.com/site/images/github2.png" alt="GitHub"></a>
<a href="https://plus.google.com/+SMFforum" target="_blank"><img src="https://static.simplemachinesweb.com/site/images/gplus.png" alt="Google+"></a>
</div>


replace the links to (social media) and the img links to your own links.

[njtweb]

I thank you very much!