Changing specific sub-forum style

Go down

Changing specific sub-forum style Empty Changing specific sub-forum style

Post by TheCrow on May 26th 2020, 8:00 am

Changing specific sub-forum style

Hello everyone,

In this tutorial we will show you how to style a specific sub-forum instead of having all subforums styled the same way.


Preview Result

This will be the result after finishing this tutorial:
Changing specific sub-forum style Screen29


Installation

To install this and have the specific subforums of your choice styled, you have to follow the below information.

Template Editing

Go to Administration Panel > Display > Templates : General > index_box and edit the template. Once you are there, follow the edit information below based on your forum version:

#PhpBB2, #PunBB, #Invision
Find:
Code:
  <!-- BEGIN forumrow -->
  <tr>
and replace it with this:
Code:
  <!-- BEGIN forumrow -->
  <tr class="forum_each" data-forum="{catrow.forumrow.U_VIEWFORUM}">

#PhpBB3, #ModernBB
Find:
Code:
  <!-- BEGIN forumrow -->
            <li class="row">
and replace it with this:
Code:
  <!-- BEGIN forumrow -->
            <li class="row forum_each" data-forum="{catrow.forumrow.U_VIEWFORUM}">

#AwesomeBB
Find:
Code:
  <!-- BEGIN forumrow -->
  <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION}">
and replace it with this:
Code:
  <!-- BEGIN forumrow -->
  <div class="forum-section {catrow.forumrow.FOLDER_CLASSNAME} {catrow.forumrow.TYPE_SECTION} forum_each" data-forum="{catrow.forumrow.U_VIEWFORUM}">

After you do the change in the template, save it and press the green cross to publish the template.


CSS code addition

Go to Administration Panel > Display > Pictures and Colors : Colors > CSS Stylesheet and add the code based on your forum version:
#PhpBB2, #PunBB, #Invision
Code:
.forum_each[data-forum*="fXX-"] .row1.over {
background-color: darkred;
font-size: 16px;
}

#PhpBB3, #ModernBB, #AwesomeBB
Code:
.forum_each[data-forum*="fXX-"] {
background-color: darkred;
font-size: 16px;
}

and once you finish adding the code in your CSS click the Save button to save your CSS.


Explanations

In the CSS codes above you see this part:
Code:
[data-forum*="fXX-"]
. What you need to change in that part is the XX based on the category you want to change. In order to find the one category you want to change you simple click on the category and check the link above.

If the category you want to change has a link
Code:
https://{FORUMNAME}.com/f1-your-first-category
then the only thing you need to get is the number after the first slash.
Code:
/f1-
is the one to get from this example. Here it's /f1 so the number you have to add is 1.

In other words, you simply change XX from the above code with 1 and so on. You can do this to as many categories as you wish.


Hope you like this tutorial and you find it useful!
Best of luck to all.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6421
Reputation : 746
Language : Greek, English

View user profile https://forumote.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum