ZB Theme Guide Part 4: Topics

If you've not continued on from Part 3, go and start to create a new topic within one of your forums. Paste the following as post contents, fill in the title details and then hit Post Topic:

[quote=Theme Guide,(time=1219232761)]A quote test.[/quote][quote][quote]I am a quote within a quote.[/quote]I am a quote containing a quote.[/quote][code]<script type="text/javascript" src="http://z1.ifrm.com/static/zb5.js"></script>
<script type="text/javascript" src="http://z1.ifrm.com/static/post.js"></script>
<script type="text/javascript" src="http://z1.ifrm.com/static/corner.js"></script>
[/code]
[spoiler]Here be spoilers![/spoiler]

That should hopefully provide everything you need to alter for the topic view :) After posting, go back and edit the post, making sure the edit line is intact.

You should end up with: (I've made a alteration to the post contents since taking the screenshot, so ignore the link and the lists) It would also be a good idea to stick a quote into your signature.

You might also have an edit notification above the topic as seen in the screenshot, if you do, ignore that for now.

Topic Structure

Starting at the top (minus the notice), we have two grey cells. One containing our username, and the other containing the post date/time, IP address etc. The cell containing the username has a class of td.c_username. The cell containing the post information has a class of td.c_postinfo. Both classes can be found around a third of the way into the CSS, along with other classes also found on the topic view.

Change the background colour for both classes to #1C273D.

The next part are the profile boxes in the cell containing the user information. The cell itself has a class of [b]td.c_user[/b], however where this appears in the CSS, it doesn't have a background colour. Instead it's been styled by td, along with the cell containing the post.

The profile information boxes are done using a definition list <dl>. The profile field names (such as Posts, Joined, Member) are <dt> (definition terms) and the information associated with them (post count value, date etc) are <dd> (definition description).

The boxes are referred to in the CSS as td.c_user dl. This affects both the normal box containing joined date and post count, and also the box containing custom profile fields that the Admin adds to the board.

Search for td.c_user dl and change the background colour to #1C273D and the border colour to #0a101b.

Edit the CSS and then refresh the topic. It's now looking a lot better.

Scroll down to the end of the topic so we can complete the rest of the main topic structure. On the first screenshot in this topic you'll see that the cells containing the PM, Edit and Delete etc buttons are grey. This is where it gets a little bit confusing, so I'll try and explain it as best I can.

The table row containing those cells has a class of .c_postfoot. During the BETA of Zetaboards, the cells theirselves had the class. However, since then, the HTML has changed. The cells no longer have the class, but the row does, and there is a minor glitch in the CSS (it depends which version you're looking at). If you have:

tr.c_postfoot {
background:#f6f6f6;
clear:both;
}

You need to change it to tr.c_postfoot td in order to affect the table cells, rather than the row. Otherwise this just affects the row and not the cells. This HTML issue will be fixed, so try not to concentrate too much on it right now.

After adding a background colour of #1C273D to the cells, the snippet of CSS should look like this:

tr.c_postfoot td{
background:#1C273D;
clear:both;
}

Now that's altered, we'll look into the post contents.

Post Contents

Quote and Code

The structure for both the Quote and Code boxes are the same, with only the box containing the quoted text/code being different for each.

They're coded using a blockquote, which is the HTML standard for displaying quoted text. Look for:

blockquote {
background:#f6f6f6;
border:1px solid #3a5197;
margin:10px auto;
padding-bottom:1px;
width:98%;
}
 
blockquote dl {
background:url(http://z1.ifrm.com/static/1/quote.png) repeat-x top #6677AF;
border-bottom:1px solid #3a5197;
color:#fff;
}
 
blockquote dl dt {
color:#fff;
float:left;
font-weight:700;
}
 
code {
background:#f6f6f6;
display:block;
font-family:Monaco, Consolas, "Courier New", Courier, monospace;
white-space: normal;
} 
  • blockquote - The main 'container'
  • blockquote dl - Another <dl>, this is the blue header which is above both quotes and codes.
  • blockquote dl dt - Refers to the text on the blockquote dl.
  • code - the box containing the code. Currently it should look grey.

Those of you who are beady eyed may remember this section of part 2 , where we changed .row2, blockquote div. This is the reason why the box containing the quoted text has already been altered.

Starting outside and working inwards, change the background colour for blockquote to #1C273D, and the border colour to #0a101b. This will alter the blue border around the Quote and Code boxes, and also remove the light line at the base of them.

Change the background image for blockquote dl to:

http://z1.ifrm.com/static/2/css/h4.png

Change the background colour to #232f46. Change the border colour to #0a101b. Change the font colour to #acbbc2.

Edit the CSS and refresh to see the changes so far. The font colour change for the blockquote dl will have altered the text on the right side of the single quote at the top, but not the text on the left. That'll still be white at this point.

To edit the text on the left, change the font colour of blockquote dl dt to the same hex code we just used for the text on the right.

To finish up the Quote/Code, we just need to change the background of the code to #1C273D.

Spoilers

If you weren't aware of this feature until you saw it in this guide (it's not part of the default BBcode button set so it's possible), spoilers allow you post your reactions to the annoyingly gripping and brain confuzzling ending to the latest episode of Lost, without spoiling it for others who might not want to read about it. Click on the spoiler bar and you'll see the spoiler content pop up underneath the bar. Click it again, and it disappears.

The CSS for the spoiler is directly after the code, so you shouldn't have much problem finding it.

  • div.spoiler - The box which drops down, containing the spoiler content
  • div.spoiler_toggle - The blue bar(by default) that you click to view the content.

Change the background image for the div.spoiler_toggle to:

http://z1.ifrm.com/static/2/css/h4.png

Change the background colour to #232f46. Change the border colour to #0a101b. Change the font colour to #acbbc2 Basically for Midnight, it has the same style as the Quote/Code headers.

Change the border colour for div.spoiler to #0a101b. Edit the CSS and refresh the page to see the result.

The Edit Line

If you've not edited the initial post to make the Edit notice appear, then do so right now!

You'll notice that the border is dotted, which is a change in border style from the 'solid' we've been seeing in the CSS so far:

.editby,.queued {
border:1px dotted #03050b;
color:#999;
font-size:85%;
font-style:italic;
margin-top:1em;
padding:3px 5px;
}

This snippet controls the edit notice, and also a notice much like the edit notice, for queued posts requiring moderator approval (we'll get to that in the next section).

Change the border colour to #0a101b (our generic border colour for this theme), to change the colour of the dotted border. Note how it says 'dotted' now rather than 'solid'. Change the font colour to #848a96.

Queued Posts

The moderation of posts and topics on Zetaboards is 'in-line', which means that posts requiring moderator approval are found within the topic, however they are styled differently to easily identify posts as requiring moderator approval.

To test this out, make a new post to your thread. After you've posted, click it's check box at the top right of the post to select it, and then select 'Hide Post(s)' from the Moderation menu at the bottom right of the topic.

After you've done that, it should look like this:

What happens with a queued post is that the row the post is in has a class of .hidden added to it.

tr.hidden td.c_post {
background:#D8DCEB;
}

That is way back up in the first quarter of the CSS. tr.hidden td.c_post refers to any table cells classed as .c_post on rows classed as tr.hidden, hence why the post area is blue while other cells on the row aren't.

So, change this colour to #111A2D. Edit the CSS and refresh the topic.

The post should now be a dark blue, and it's now the colour we also gave to the #wrap in part 1.

But of course, we need to change the last strip of blue there, and you'll notice that it's the same style as the edit notice. Scroll back down to where we edited the edit notice, and you'll see this directly underneath it:

.queued {
background-color:#D8DCEB;
border-color:#5a70b3;
}

#D8DCEB is the blue hex code, and the border colour change is simply changing the colour of the border that was added to it in the snippet before it.

Change the background colour to #1C273D, and the border colour to #0a101b. Edit the CSS and refresh the topic to see the change.

The Signature (plus signature Quotes)

For this section, you'll need to locate this part of the CSS:

td.c_sig {
color:#666;
font-size:80%;
}
 
td.c_sig blockquote {
background:none transparent;
border:0;
border-left:3px solid #999;
padding-left:5px;
}
 
td.c_sig blockquote dl {
background:none transparent;
border:0;
color:#666;
}
 
td.c_sig blockquote dl dt,td.c_sig blockquote dl dd {
color:#666;
padding:0;
}
 
td.c_sig blockquote div {
background:transparent;
margin-left:5px;
padding:0;
}
  • td.c_sig - The table cell containing the signature.
  • td.c_sig blockquote - Signature specific blockquote style
  • td.c_sig blockquote dl - Purely to remove the styling off the generic blockquote dl for the signature.
  • td.c_sig blockquote dl dt,td.c_sig blockquote dl dd - Changes the 'Quote:' part, or whatever you have for [quote=the part here] (the quote, who?)
  • td.c_sig blockquote div - The background: transparent part removes the normal background colour for the box containing the quoted text, to get the minimalistic look for the signature quotes. The margin indents it a little giving it a more structured look.

Change the font colour for td.c_sig to #848a96. Then change the font colour for both the td.c_sig blockquote dl and td.c_sig blockquote dl dt,td.c_sig blockquote dl dd to #acbbc2.

Edit the CSS and refresh. The text colour of the signature has now brightened a little and the 'Quote:' is visibly lighter than the text.

For a final touch, change the border colour for td.c_sig blockquote to #848a96.

Fast Reply

Last section of this part of the guide is the fast reply. Look for:

dl#fast-reply dt {
background:url(http://z1.ifrm.com/static/1/css/h2s.png) repeat-x top #FB9D3A;
border:1px solid #e77700;
color:#FFF;
font-size:110%;
font-weight:700;
margin:0;
padding:5px;
}
 
dl#fast-reply dd {
background:#fafafa;
border:1px solid #e7e7e7;
padding:15px 0;
text-align:center;
}

May seem like an odd use of the definition lists, but it works :P

  • dl#fast-reply dt - The orange (by default) header saying 'Fast Reply'
  • dl#fast-reply dd - The 'definition term's associated description, the box containing the textarea we type in.

Change the background image for dl#fast-reply dt to:

http://z1.ifrm.com/static/2/css/h2.png

Change the background colour to #1f2b42. Change the border colour to… the border colour we've been using (now you'll have to hunt for it :P, get used to your themes having a consistency with hex codes ) Lastly, change the font colour to #acbbc2.

To change the rest, change the background colour of dl#fast-reply dd to #232f46, and change the border colour again.

Edit the CSS and refresh.

Polls

I'll admit before we begin that I completely forgot about the Poll, and rather than redo all the screenshots, I'll direct you adding a poll to the topic instead. Scroll to the top of the topic, and click Append a Poll. On the next page, click the link (Poll Setup (Add Poll)) to make the Poll options pop out. Add a dummy poll with voting options and click Add Poll.

It looks fine as it is in the topic, however if you vote on one of the poll choices, it's time to change the poll bars.

The poll bars can obviously change their width, so it's not a fixed image. It's actually two images. One is the left which is very small (and will appear regardless if a poll option has 0 votes), and the other is a very long image: http://z1.ifrm.com/static/1/poll_b.png

To get an idea of how they're 'done', we'll change the left piece first.

Find the poll bars snippet:

td.c_poll-bar div {
background:url(http://z1.ifrm.com/static/1/poll_b.png) no-repeat right;
float:left;
height:12px;
padding-right:3px;
}
 
td.c_poll-bar span {
background:url(http://z1.ifrm.com/static/1/poll_l.png) no-repeat;
display:block;
float:left;
height:12px;
width:3px;
}

Looking at the CSS attributes, you can probably tell which one is the left, smaller image. td.c_poll-bar span has a width height and width, whereas td.c_poll-bar div has no set width.

Change the background image for the left image to:

http://z1.ifrm.com/static/2/css/poll_l.png

Edit the CSS and refresh the topic. If you look closely, you'll see the appearance of the left image against the orange for the poll option you voted for.

To change the rest of the poll bar, change the background image for the right piece to:

http://z1.ifrm.com/static/2/css/poll_r.png

Edit the CSS and refresh, the poll bars have changed.

Leading to a completed topic view….

Congratulations, you've finished Part 4 :)


Go to Part 5: Inbox/PM Popup->



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