Making Custom Themes For Thread Prefix Tag

neoforums 1.5 introduced the concept of "Prefix Tags". These are tags added to a thread which show up when users browse threads.

Contents

[edit] Styling the Prefix Tag

Moderators can can style a tag to have different colours and even include icons by manipulating the style of the individual tags. You do this by editing the "Theme HTML" part of the forum settings.

There is sample below, which you place directly into the "Theme HTML" forum setting. the below was used to style the results of this image:

Prefix tag custom styles.png

<style>
#threadlist .thread_row a.label { min-width:0; }
a.tag-half-life{
   padding-left:23px;
   background-color: #FFFA90;
   background-image: url(http://icons.iconseeker.com/png/16/the-orange-box/half-life-2-2.png);
   background-position: 3px center;
   background-repeat: no-repeat;
   color: #8E424E;
}
a.tag-half-life:hover{color:black}

a.tag-gen4{
   padding-left:52px;
   background-color: #ddd;
   background-image: url(http://i.simpleimg.com/9542.gif);
   background-position: 3px center;
   background-repeat: no-repeat;
   color: #000;
}
a.tag-gen4:hover{color:#777}
a.tag-gen4 > span {display:none;}




a.tag-gen5{
   padding-left:56px;
   background-color: #ddd;
   background-image: url(http://i.simpleimg.com/56d0.gif);
   background-position: 3px center;
   background-repeat: no-repeat;
   color: #000;
}
a.tag-gen5:hover{color:#777}

</style>

[edit] How styling works

Styling is done via standard CSS. Each prefix tag has 2 classes:

  • label
  • tag-"tagname"

The second tag is the one you target to give each tag an individual style. the actual tag name is made lower case, and spaces are replaced with underscores (_). Some examples:

TagCSS ClassHow the HTML looks
Feedbacktag-feedback<a class="tag tag-feedback">feedback</a>
Half-Lifetag-half-life<a class="tag tag-half-life">half-life</a>
sticky fingerstag-sticky_fingers<a class="tag tag-sticky_fingers">sticky fingers</a>

[edit] Using icons instead of text labels

You can use icons instead of text labels. As of neoforums 1.5.2 you need to add this style in order to do this:

#threadlist .thread_row a.label { min-width:0; }

The above will reset the min width of tags within a thread list so that your icons won't have a bunch of empty space.

[edit] Selection List at the top of a forum

You can also add a "selection list" in your forum, by editing the forum subheader with something like:

Prefix tag forum header selection list.png

And the code:

Filter by: 
<a href="./?tag=half-life" class="label tag-half-life">Half-Life</a>
<a href="./?tag=gen5" class="label tag-gen4">Gen 4</a>
<a href="./?tag=gen5" class="label tag-gen5">Gen 5</a>
<a href=".">clear</a>

[edit] Examples of forums with custom prefix tags

Last edited by Ascii on 17 April 2013 at 07:34
This page has been accessed 440 times.