Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Stylize the topic Tags for SMF

Mick in Tutorials
Sep 13, 2018

We're going to add some styling to the topic tag mod to make it look purdy from the boring and plain link state. I've been using this mod for a long time but never liked the original html without any styles. With a bit of CSS we're going to make it even cooler.


Go from this

To this


Demo: Right here at the end of this post.

Download the Tagging System for topics at  SMF mod site and once installed,

Open:
./Themes/default/Display.template.php

Find:
Code: [Select]
		

// Tagging System
echo '
<div class="clearfix windowbg largepadding">


<b>', $txt['smftags_topic'], '</b>';



foreach ($context['topic_tags'] as $i => $tag)
{
echo '<a href="' . $scripturl . '?action=tags;tagid=' . $tag['ID_TAG']  . '">' . $tag['tag'] . '</a>&nbsp;';
if(!$context['user']['is_guest'] && allowedTo('smftags_del'))
echo '<a href="' . $scripturl . '?action=tags;sa=deletetag;tagid=' . $tag['ID']  . '"><font color="#FF0000">[X]</font></a>&nbsp;';

}

global $topic;
if(!$context['user']['is_guest'] && allowedTo('smftags_add'))
echo '
&nbsp;<a href="' . $scripturl . '?action=tags;sa=addtag;topic=',$topic, '">' . $txt['smftags_addtag'] . '</a>';

echo '
</div>';




// End Tagging System




Replace with:
Code: [Select]
		// Tagging System
echo '
<div class="clearfix windowbg largepadding">


', $txt['smftags_topic'], '';



foreach ($context['topic_tags'] as $i => $tag)
{
echo '<span class="smf_tags"><a href="' . $scripturl . '?action=tags;tagid=' . $tag['ID_TAG']  . '">' . $tag['tag'] . '</a></span>&nbsp;';
if(!$context['user']['is_guest'] && allowedTo('smftags_del'))
echo '<a href="' . $scripturl . '?action=tags;sa=deletetag;tagid=' . $tag['ID']  . '"><font color="#FF0000">[X]</font></a>&nbsp;';

}

global $topic;
if(!$context['user']['is_guest'] && allowedTo('smftags_add'))
echo '
&nbsp;<a href="' . $scripturl . '?action=tags;sa=addtag;topic=',$topic, '">' . $txt['smftags_addtag'] . '</a>';

echo '
</div><br />';




// End Tagging System

Open your theme's CSS file and at the very end, add,
Code: [Select]
.smf_tags a {
       background-color: #f9f9f9;
       color: #333333;
       padding: 10px 20px;
       font-size: 14px;
       margin: 2px;
       text-align: center;
       display: inline-block;
       text-transform: uppercase;
}
.smf_tags a:hover {
       background-color: #0984e3;
       color: #ffffff;
}

Replace colors with your own to suit your theme.

Reference and Credits:
Tagging System for topics
SMFHacks.com Team

Tagged with: css tags smf modification themes 

Share This Post

Mick

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.

    


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up