ZB Theme Guide Part 2: The Forum View

To aid this part of the theme, navigate away from editing the CSS for your 'WIP' (Work In Progress) Theme, and go to Section Manager. If you already have forum rules, then just ignore this and continue on. If not, we're going to just add some dummy text so we can see what we're editing. \\Click Edit Settings for a forum on your board (please make sure it contains topics, and at least one announcement), and at the bottom of the page above Forum Permissions, you'll see the forum rules section. Set the rules to 'Show Full Rules', and just add in some dummy text.

On the board, view the forum. If you haven't got an announcement within this forum, you can make one by viewing the footer of the page and clicking 'Add New Announcement'. Set it to only view in that forum, and it'll appear above the main list of topics.
It should now look vaguely like this: It'd be helpful later if you have enough posts within a topic to warrant the appearance of 'Pages: [1][2]' etc. This will be required for this section, and Part 4.

Once again, we're going to start at the top, and work our way down. The header has been completed across the board already from Part 1, so we're going to start with the navigation.

The Navigation

You'll have noticed that on the navigation, some of the text is a light grey, while the rest is a bold, medium blue. The light grey are links, while the medium blue is the navigation separator, and your current location. To change this medium blue, find #nav near the top of the CSS and alter the font colour to #848a96.
If you've forgotten what the font colour attribute is, it's color:, followed by the hex code.

Don't edit the CSS just yet, let's change a bit more first.

The Forum Rules

Not every board uses this feature, but it's best to edit it anyway. Since it only appears once on the page, the forum rules box has an ID, not a class. \\Look in the first quarter of the CSS for:

.meta_box {
background:url(http://z1.ifrm.com/static/1/css/boxbg.png) repeat-x top #D8DCEB;
border:1px solid #BFC8E3;
font-size:85%;
line-height:150%;
padding:10px 25px;
}

New CSS Attribute Explanation:

  • line-height: 150%; : The line-height determines the height of the line. This attribute is used to space lines out more to make large amounts of text easier to read. Like with other attributes, the measurement can be a %, em, or px.

This is new… there is no background image for ZB Midnight. It's not essential to have a background image here at all.

background:url(http://z1.ifrm.com/static/1/css/boxbg.png) repeat-x top #D8DCEB;

Simply remove the background image and positioning to leave the hex code:

background:#D8DCEB;

The background image has now been removed. Now change the background colour to #28344c, and the border colour to #0a101b.

Now we're also going to change the border's width to a different amount. Change it from 1px, to 2px. This will make the border thicker, and make the rules box stand out more. Again, this will be completely optional when creating your own theme, but it's a good idea to get comfortable with changing something other than background images and hex-codes.

Edit the CSS, and refresh the forum view. The forum rules are now complete.

Another Blue Border? I thought we changed it?

We changed *a* blue border, but not this one. Back in part 1 we edited the Category Headers, which you may remember occur in the CSS as h2. The h2 doesn't appear everywhere, and this is one of those instances where it doesn't. What you're looking at is called thead th in the CSS. It contains the forum name, and it has also taken on most of the characteristics of the h2.

Right back at the start of the CSS, find thead th. It appears straight after where we set the background image for the h2.

thead th {
border:1px solid #5a70b3;
border-bottom-width:1px;
padding:5px;
text-align:center;
}

And, there is the blue border. Change the hex code to #0a101b, what you'll recognise as a common hex code we're using for borders.

But don't edit the CSS just yet.

Return to the Table Cells

In Part 1, we looked at how changing the td part at the top of the CSS will affect all the table cells across the board, unless they had a class and were changed specifically like a few were on the index. In this case, the alternating colours you're seeing are achieved because the row has a class of .row2. The other rows have a class of .row1, however this theme does not take advantage of this class in terms of styling the page.

Now, the table row contains cells, and the cells are containing the text that we read. Styling these cells is much like altering the cells from a normal table: .row2 td.

In the second half of the CSS, this background colour is set. It's a bit of a strange placement considering the rest of the colours are mostly changed at the top, but we can't do anything about that right now. Find:

.row2 td,blockquote div {
background:#f6f6f6;
}

Change the background colour to #1C273D. Now edit the CSS, and refresh the forum view.

You should immediately notice a big change with the topic listing. The blue border has now changed too.

x user(s) viewing this forum

The main part of the forum view left to edit, is the cell containing a list of members who are currently viewing the forum. Find td.c_view just under halfway through the CSS.
Change it's background colour to #1C273D, and it's font colour to #848a96.

Edit the CSS, and refresh the page.

Pages: [1][2]...

If you've not got a topic with a lot of replies, then you could easily hunt around your forum for one that exists, or post multiple replies to a dummy thread until the page numbers appear for the topic on the Forum View. You'll also need this later in Part 4. However, we'll be mostly editing it here.

Find this section of CSS within the first quarter:

ul.cat-pages {
float:left;
font-size:90%;
margin:15px 0;
padding: 5px 1px;
width:49%;
}
 
.cat-pages a,.cat-pagesjump i,.cat-topicpages a {
background:#fff;
border:1px solid #e7e7e7;
color:#5a70b3;
}
 
.cat-pages a:hover,.cat-topicpages a:hover {
background:#f6f6f6;
color:#5a70b3;
}
 
.cat-pages span {
background:#5a70b3;
border:1px solid #3a5197;
color:#FFF;
cursor:default;
font-weight:700;
padding:2px 5px;
}
 
.cat-pages input {
background:#fff;
color:#5a70b3;
padding:3px 5px;
vertical-align:baseline;
}
 
ul.cat-topicpages {
float:right;
font-size:80%;
padding:1px 0;
}

ul.cat-topicpages is the 'Pages: [1][2]' next to topics on the Forum View which have multiple pages.
.cat-topicpages a refers to the links, which are the page numbers. .cat-pages a refers to the forum pages links when the number of topics within a forum exceeds the number of topics that'll be shown per page.

It first occurs in the second snippet of the bunch:

.cat-pages a,.cat-pagesjump i,.cat-topicpages a {
background:#fff;
border:1px solid #e7e7e7;
color:#5a70b3;
}

Change the background colour to #1C273D, the border colour to #0a101b and the font colour to #acbbc2. Edit the CSS, and refresh the forum view. The page numbers are now a dark blue, and the forum view is looking a lot nicer. However, hover over a number and it'll turn a light grey. That doesn't really match the theme, so we're going to edit it's hover:

.cat-pages a:hover,.cat-topicpages a:hover {
background:#f6f6f6;
color:#5a70b3;
}

Is the next snippet where '.cat-topicpages' occurs.

Change the background colour to #28344c, and the font colour to #acbbc2. That'll make the hover background a slightly different colour, just to let the user know it's a link and they can click it.

.cat-pages span {
background:#5a70b3;
border:1px solid #3a5197;
color:#FFF;
cursor:default;
font-weight:700;
padding:2px 5px;
}

This snippet only occurs for forum pages, and it is the currently active page (for example, if you're on page 2, it looks different).

Change the background colour to #ef7400 (it's orange! :P) and the border and font text colour to #0a101b.

Completing the Forum View?

Right now there are some light areas left, including the theme selector which was still light after we finished the index, but we'll be editing those in Part 3, which deals with the posting page. Click the red link below to go to the next part of this guide.

Go to Part 3: The Posting Page->



themes/themeguide/part2.txt · Last modified: 2015/01/09 16:02 (external edit)