Pretty topic type in viewforum

This short snippet adds a pretty topic type prefix to special topics (Announcements, Stickies, Polls, Locked and Moved topics.) Inspired by IPB 3.x

What we’re trying to achieve

In phpBB each topic is a certain type. In addition to your standard topics, some may have a special purpose or require some emphasis. The topic types are: Standard, Sticky, Announcement, Locked, Moved and Poll. phpBB uses a different icon from the imageset to differentiate between these topic types, however I like to use as few different icons as possible. This short snippet adds a pretty text-based topic type prefix before the topic title, to quickly emphasise the different topic type.

Step 1) HTML Edits

Open: /styles/prosilver/template/viewforum_body.html


<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF -->

Before, Add:

<!-- IF topicrow.TOPIC_TYPE --><span class="topictype">{topicrow.TOPIC_TYPE}</span><!-- ENDIF -->

Step 2) CSS Edits

Open: /styles/prosilver/theme/colours.css

Add this to the bottom of the file:

span.topictype {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 2px 5px;
    background: #027cb8;
    color: #ffffff;
    /* Some CSS3 goodness */
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    text-shadow: 0 1px 0 #005884;
    /* Optional: Gradient background. Uncomment below to enable */
    border: 1px solid #0077b2;
    background: -moz-linear-gradient(top,  #11a0e7 3%, #0077b2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#11a0e7), color-stop(100%,#0077b2));
    background: -webkit-linear-gradient(top,  #11a0e7 3%,#0077b2 100%);
    background: -o-linear-gradient(top,  #11a0e7 3%,#0077b2 100%);
    background: -ms-linear-gradient(top,  #11a0e7 3%,#0077b2 100%);
    background: linear-gradient(to bottom,  #11a0e7 3%,#0077b2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11a0e7', endColorstr='#0077b2',GradientType=0 );


Finishing Touches

If you’re really pedantic like me, you’ll probably want to remove the colon following the topic type. Follow the instructions below to achieve this.

Open: /language/en/common.php


    'VIEW_TOPIC_ANNOUNCEMENT'   => 'Announcement: ',
    'VIEW_TOPIC_GLOBAL'         => 'Global Announcement: ',
    'VIEW_TOPIC_LOCKED'         => 'Locked: ',
    'VIEW_TOPIC_LOGS'           => 'View logs',
    'VIEW_TOPIC_MOVED'          => 'Moved: ',
    'VIEW_TOPIC_POLL'           => 'Poll: ',
    'VIEW_TOPIC_STICKY'         => 'Sticky: ',

Replace with:

    'VIEW_TOPIC_ANNOUNCEMENT'   => 'Announcement ',
    'VIEW_TOPIC_GLOBAL'         => 'Global Announcement ',
    'VIEW_TOPIC_LOCKED'         => 'Locked ',
    'VIEW_TOPIC_LOGS'           => 'View logs',
    'VIEW_TOPIC_MOVED'          => 'Moved ',
    'VIEW_TOPIC_POLL'           => 'Poll ',
    'VIEW_TOPIC_STICKY'         => 'Sticky ',
    'VISIT_WEBSITE'             => 'Visit website',

Finishing off

Since this doesn’t use any hard coded text or images, it will work regardless of the language set on your forum. If you’d prefer the topic types to have a gradient background, uncomment the marked block of CSS in step 2 above. There is an awesome CSS3 gradient generator if your style is dark or a colour other than the default prosilver blue.

If you found this tutorial useful, please consider donating. If you have anyproblems, let me know in the comments below. Enjoy.