ZB Theme Guide: The Index

Blue Background

First thing you see when you login/visit the board: The index. Thus, we shall start there.

We're going to start off by editing the two background colours, which is also one of the commonly asked questions we get over the support tickets. View your Theme Appearance, and you'll immediately see where we start editing:

html,body {
background:#5a70b3;
color:#000;
font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif;
font-size:93.3%;
margin:0;
padding:0;
}

CSS Explanation

  • background:#5a70b3; : The background attribute. Backgrounds can be a solid colour, an image, and the image can be tiled a certain way, positioned within the element (top right for example), or fixed in it's position regardless of page length and scrolling. I won't go into great detail with the latter right now. For now, the current background attribute is a solid colour. #5a70b3 is what we call a hex-code, and that is the hex code for the Zetaboards blue.
  • color:#000; : 'color' is the font colour attribute. Font colours can only be done with a hex code.
  • font-family:“Helvetica”, …etc : The fonts used within the theme. For this specific snippet, it controls all the fonts across the board. Fonts are listed in order of importance. Many are listed in case a computer does not have the font installed. For instance, if your computer doesn't have Helvetica installed, it'll display Arial. If it doesn't have Arial, it'll display 'Bitstream Vera Sans' and so forth. It is a good idea to include a few basic fonts rather than filling it up with fonts one would only have if they'd downloaded it manually… such as the Harry Potter font.
  • font-size:: Unless you're planning to do a mass increase/decrease of the font size of your theme, you don't need to touch this. Font-size can be done in 'px', 'em', or %. On Zetaboards, we use percent. To increase/decrease font size it's best to do so by 5% amounts. If you want to know more about font-sizes, contact us via a theme ticket.
  • margin:0;: This is structural CSS, and in this guide margins and padding won't be altered., therefore I don't go into detail. However, a margin controls the space around the outside of the element.
  • padding:0;: Padding is the opposite of margin. It controls the amount of space between the edges inside the element, and the content of the element. Also not something we'll be editing in this guide.

Now you've been introduced to some of the basic CSS attribute, we'll change the background colour of the theme. Find the background colour line, and alter the hex code to #0d1423 and the font colour to #848a96.

You should have this:

html,body {
background:#0d1423;
color:#848a96;
font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif;
font-size:93.3%;
margin:0;
padding:0;
}

Click the 'Edit CSS' button, and then refresh your board index (make sure you have the theme selected!). It should look like this right now:

It's not looking like much right now, but it's a start. So, we're going to get rid of the white too.

White Background

The white background is an area with the ID of #wrap. An ID differs from a class. It is fronted with a # rather than a . , and the difference is that an element with an ID is supposed to only appear once per page. This improves load time for the general page, and any scripts you may have installed.

So, find the next snippet. Either find it within the first quarter of the CSS, or CTRL + F for #wrap to get your browser to find it:

#wrap {
background:#fff;
border:1px solid #3A5197;
margin:0 2% 30px;
}

New CSS Attributes Explained:

  • border: 1px solid #3a5197; : The border attribute. 1px is the width, followed by the style, and then by the colour. View this for more information.

So, we need to change the hex codes to get rid of the white background, and the blue border. Change the background to #111A2D and the border hex code to #03050b to get this:

#wrap {
background:#111A2D;
 
border:1px solid #03050b;
margin:0 2% 30px;
}

Hit the 'Edit CSS' button, and refresh your index.

Starting at the #top

Now the backgrounds are sorted and out of the way, we can start to concentrate on the content. We'll take a logical approach, and start at the top, making our way down.

#top_bar

The strip of orange along the very top of the board is for design purposes only. When you make your own theme, you can remove the CSS for this and remove the area altogether, if you don't want to use it. For Mono however, we're just going to change the style properties to change it's background colour.

The next snippet of CSS is around the same area as the #wrap, within the first quarter of the CSS:fc

#top_bar {
background:url(http://z1.ifrm.com/static/1/css/topbar.png) repeat-x top #FB9D3A;
height:19px;
}

New CSS Attributes Explained:

  • height: 19px;: Self explanatory. Sets the height for the area. Adjusting this will simply adjust the height of the strip. For this guide, you do not have to touch this. However you might want to change it when you create your own theme.

You'll notice the background format has altered. It now appears like this:

background: [url(URL to the image used as the background image)] [repeat settings] [background position] [background color]

  • repeat-x : Sets the background to repeat along the x axis only. This means left to right. Repeat-y would set the background to repeat along the y axis, top to bottom.
  • top : Positions the background image to the top. This can also be bottom/bottom right/center left/center etc.
  • #FB9D3A : It is common practive to set a background colour as well as a background image. One purpose of a background colour in this manner is shown below in a rough example. It is also done in case the image is unavailable at any point, or someone is browsing with images disabled. It helps maintain the general look and colour scheme of the theme.

  • Box on Left: imagine that the background image is the area of blue, and it has been set to repeat-x and positioned at the top. It has no background colour set, so it's showing the white underneath. It wouldn't look that attractive as part of a theme, because it looks incomplete.
  • Box on Right: the background image and settings are the same once again, however a background colour has been set. The colour matches that of the very bottom of the gradient, providing a smooth colour transition when the image ends. This is helpful if the background image is not big enough to fill the element it is in.

Change the background by replacing the default image URL with this:

http://z3.ifrm.com/0/3/0/p48595/top_bar.png 

Now, the hex code of the colour at the very end of the gradient is #334059. If your graphics program lacks the ability to 'pick' colour from an image, just try to match it as best you can manually. It is not crucial that you set a background colour, but it is definitely a good idea :)

Altering the background image and colour gives us this:

#top_bar {
background:url(http://z3.ifrm.com/0/3/0/p48595/top_bar.png) repeat-x top #334059;
height:19px;
}

Complete the edit, and refresh the index once more. You'll notice that the strip along the top has now turned a dark blue.

#top

The strip at the top where it says 'Welcome nicola [logout]' and also contains the menu options on the right has the ID of #top. It comes directly after #top_bar, so see if you can find it again ;)

#top {
background:url(http://z1.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
border-bottom:1px solid #3a5197;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}

Now that you've found it, you'll be familiar with what the attributes to the #top are doing. There is a background image and a background colour and a height attribute. What is new now is that the border has been specifically set to be along the bottom of the element.

Change the background image to the following:

http://z3.ifrm.com/11/88/0/p6417/top.png

and the background colour to #0c1323.

Change the border colour to #03050b.

The CSS should now look like this:

#top {
background:url(http://z3.ifrm.com/11/88/0/p6417/top.png) repeat-x top #0c1323;
border-bottom:1px solid #03050b;
height:20px;
padding:0 2% 4px;
margin-bottom:12px;
}

Complete the edit, and refresh your index once again. The top of the theme is starting to take shape. Congratulations for making it this far already!

The Drop-down Menus

However it is now best to get probably one of the trickiest parts of the CSS over and done with. To aid this, I have created a nifty diagram for you to look at: This is how menus usually look. They are usually stacked, whereas the menus on Zetaboards are what we call 'inline', next to eachother. The menus have been created using HTML lists. Lists can have sub-lists, which is the drop-down menu effect you'll see for the Report CP/Preferences and Inbox links.

Image the blue menu is the list of medium blue tabs you're now seeing on your #top. The hovered (darker) item is the Preferences tab, and the pink menu contains the options that drop-down when you hover over the Preferences tab.

Now we're going to identify their class names, so we can style them in the CSS. The menus are currently contained in a div with an ID of #top_menu. The background colour of #topmenu is what gives the border effect around the menu tabs.

Go to your CSS and find the #top_menu portion of the CSS:

#top_menu {
background:#3a5197;
border-left:1px solid #3a5197;
float:right;
margin-top:0px;
}

It's currently got the same hex code for it's background, and also a left border. Change both of these hex codes to #fff, edit the CSS, and refresh the index. You should now see that there is a white border between each menu tab. Now you can see what the function of the styling on the #top_menu does. Find the #top_menu snippet again, and now change the hex codes to #03050b. The borders should now turn a dark blue.

Now, lists are coded like this in the HTML (this is just an example of a basic list with sub-list):

<ul>
    <li> List Item 1 </li>
    <li> List Item 2 </li>
    <li> List Item 3
        <ul>
            <li>Sub-list Item 1</li>
            <li>Sub-list Item 2</li>
        </ul>
    </li>
    <li> List Item 4 </li>
</ul>

<ul> = Unordered List <li> = List item

As you can see on List Item 3, it has a new list starting before the list item ends. This would appear on Zetaboards, as one of the drop-down menus. For this, we'll call the first list the parent, and the sub-list the child.

The parent list has a class of .drop_menu. Admin CP, Report CP, Preferences and Inbox are all list items. They are referred to in the CSS as .drop_menu li . The child list is referred to as .drop_menu ul. What is happening with the CSS right now is it's saying “A list contained within a list classed as .drop_menu”. It works backwards. If we had a box called .boxA and wanted to get to a box inside it called .boxB, we would say “.boxA .boxB”.

Hopefully you should now be able to guess what the child menu items are referred to. If you guessed .drop_menu ul li, you would be correct. To earn your gold star, we shall now edit .drop_menu li … which is one of the parent list items. If you're currently confused with this explanation, hopefully being guided to edit the menus will clear things up a bit :)

Find this snippet:

.drop_menu li {
background:url(http://z1.ifrm.com/static/1/css/dropli.png) repeat-x top #586eb1;
float:left;
margin-right:1px;
text-align:center;
}

New CSS Attributes Explained:

  • float:left : Floating elements can be tricky, and you shouldn't have to use floats at all unless you're creating an image border, but for now we don't have to worry about this. Floating does what it says, it floats something left or right within the element it's in.

It is worthwhile to mention at this point, that margin-right: 1px is responsible for the appearance of borders to the sides of the tabs. When we coloured the background of #top_menu, we could see the white because of the 1px gap between the tabs created by this margin attribute.

Change the background image to:

http://z3.ifrm.com/11/88/0/p6417/top.png

Change the background colour to #0c1323. (Yes it is the same as the #top)

You should be comfortable with editing the backgrounds by now, so you can check whether you've done it correctly by looking at what my edits currently show:

Now we can move onto the drop-down menus. If you hover over Preferences with your mouse, you'll see that the options coming down are still the default ZB blue. We just explored how these items might be 'selected', and we found out that it's .drop_menu ul li. However, this may get confusing depending on whether you're currently using the 'bug-fixed' CSS, or the CSS without bug fixes.

You may see this:

.drop_menu ul li {
background:#5a70b3;
font-size:85%;
margin:0;
padding:0;
width:100%;
}
 
.drop_menu ul li a {
border:0 solid #3A5197;
border-width:0 1px 1px;
display:block;
padding:4px 5%;
width:90%;
}

If you do, move the background:#5a70b3; line to above the border:0 solid #3A5197; line. To explain what we're doing here, we're moving the background colour to the link. All the list items (parent and child), contain links, which enable you to navigate to areas of the Preferences and Inbox. Links in CSS are referred to as a, quite simply. Therefore .drop_menu ul li a is referring to a link like Change Avatar .

It should now look like this:

.drop_menu ul li {
font-size:85%;
margin:0;
padding:0;
width:100%;
}
 
.drop_menu ul li a {
background:#5a70b3;
border:0 solid #3A5197;
border-width:0 1px 1px;
display:block;
padding:4px 5%;
width:90%;
}

Swapping the background colours is purely for consistancy and aesthetic purposes, so don't worry too much about it. If want to go into details, simply send me a question via a theme ticket and I'll do my best to explain this minor alteration.

You have probably guessed that since the background is now on the link, we need to change it :)

New CSS Attributes Explained:

  • border:0 solid #3A5197; border-width:0 1px 1px; : This may seem a little odd. First we're stating there is a border with no width, solid, in the colour of #3A5197… then we're changing border widths. It's basically a shorthand for saying a left, right and bottom border. This saves an extra line of CSS, which might not sound like much, but the least number of lines the better.

Right now we have two hex codes to change, so change the background colour to #1C273D, and the border colour to #03050b. Edit the CSS once again. Now, take a look at your changes.

Hovering over Preferences should now look a little better, except for a lighter blue line at the top, and the item list hover.

For the lighter blue line, we need to go backwards in the CSS. If we just used .drop_menu ul li to get the child list's items, then we snip the li off to get .drop_menu ul. Sure enough, finding .drop_menu ul in the CSS gives us this snippet, which has a top border:

.drop_menu ul {
-moz-opacity:0.85;
border-top: 1px solid #03050b;
color:#fff;
left:-999em;
margin:0;
opacity:0.85;
position:absolute;
width:9.4em;
}

New CSS Attributes Explained:

  • -moz-opacity:0.85; and opacity:0.85; : Changes the opacity for the menus. These CSS attributes do not work in Internet Explorer, however they do for other browsers. The value of 1 would mean that the menus look completely solid. Changing it to 0.2 would make the menus nearly see-through. If you want to stretch your legs a little from this guide, feel free to play with the opacities a little ;)
  • left:-999em : Simply put: This moves the menu off the page when it's not being activated by a hovering mouse. If you want menus to function, never touch this.
  • position: absolute; : Something you don't need to change. This is advanced CSS, but if you want to read about CSS positioning, read this for a decent explanation.
  • width:9.4em; : Works the same as height, it sets the width of an element. However in some browsers, a width of 100px plus left/right padding of 10px each would lead to an overall width of 120px. The menus here work in that way. If you want to find out how to adjust the widths of the menus, please open a theme support ticket :)

At this point, if you're wondering what em means, read this. Using em for the width allows the drop-menus to expand along with the text it contains. Using a fixed width such as px means that if the text was too big for the menu, it'd break and not be a very user-friendly menu.

Back to the CSS. Change the border colour to #03050b. But, we're not going to edit the CSS and check just yet. As you get more confident with creating themes, you'll want to change more than one thing at a time, so let's finish the menu completely before we edit and check.

Find .drop_menu li ul li a:hover and change it's background colour to #232f46.

Now you can edit the CSS, and refresh the index. You should notice that the light border has been changed to dark blue, and the item hover colour has been changed too.

That is the end of one of the trickiest parts of editing a theme. Well done :)

In this section, we're going to change a lot of links around the board to another colour. By default, they are white. Time to venture into the last quarter of the CSS:

.category h2 a,#portal h2 a,#portal_foot h2 a,thead a,.category h2 a:hover,#portal h2 a:hover,#portal_foot h2 a:hover,thead a:hover,#top_info a,#top_info a:hover,.drop_menu a,.drop_menu a:hover,#submenu a,#submenu a:hover {
color:#fff;
}

That looks a tad 'top-heavy' right now. Attributes are listed as always, between the curly brackets { here }. So, you can see that the color attribute is turning the font colour to white.

It can save a lot of space in the CSS to list a bunch of selectors, and give them a common attribute. Here, we can see many different links being changed, as you can tell by the appearances of a. Each selector is separated by a comma. It's basically saying this, this, this and this { change to white }. You might be thinking right now “What if I don't want all those links to be a different colour?” It's not required for Mono, but I'll explain this now anyway, because it is asked for a lot in the theme support area.

We'll take something we've already been introduced to, the .drop_menu. Near the end of the list of selectors, you'll see .drop_menu a,.drop_menu a:hover,. Remove it. It's now not sharing the same attribute as the rest of selectors still listed. To give it it's own new colour, we then add it back into the CSS:

.drop_menu a, .drop_menu a:hover {
color: #HEX;
}

#HEX would be your chosen hex code. If you want more explanation on this, send in a ticket :)

For now, we're going to change #fff to #acbbc2. Edit the CSS, and refresh the index. The links in several areas of the index should now be a light silvery blue colour.

However not all white in the top of the index has been changed. 'Welcome' is still in white. 'Welcome User [Logout]' is in a div with the ID of #top_info. Locate it, and change it's font colour to #acbbc2. Look back up to the large chunk of CSS links that used to be white, and you'll notice #top_info a within the list of selectors. Your username when logged in, the [logout] link, [login] and [register] were altered by this change.

Finally, we'll have ended up with a dramatically different top area of the index.

Take a cookie, you've just completed one of the trickier parts of the theme.

The #logo, the area which dictates where the banner goes when it's added via the Theme Settings. Just a simple background image/colour and border colour edit here, nice and easy.

#logo {
background:url(http://z1.ifrm.com/static/1/css/logobg.png) repeat-x top #566cb0;
 
border:1px solid #3a5197;
border-bottom:0;
clear:both;
margin:0 2%;
}

New CSS Attributes Explained:

  • clear: both; : Once again, something you don't need to touch. This basically clears the left and right side of the #logo, and ties into the use of floats. Both can be changed to left/right. This is advanced CSS which you shouldn't have to use when creating a theme unless you're doing something really wacky, and are beginning to dream of CSS in your sleep. If you're not quite there, then you can just ignore it, and be happy that you understand what the other lines mean :)
  • border-bottom: 0; : As you can see, the line above it is adding a border around the element. This line basically removes the bottom border, leaving a border on the top, right and left.

Change the background image URL to:

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

Change the background colour to #232f46. Change the border colour to #03050b.

Don't edit the CSS yet. Of course I can't actually stop you, but let's aim to change the orange strip below it, and the blue area under it. Then we'll have completed the header.

Like the #top_bar, it's purely for visual purposes. Removing the CSS for this will remove it completely from the board.

There is no new CSS here to deal with, so we'll quickly change these and move on to something else.

#submenu_bar is just after #logo, so change it's background image to:

http://z3.ifrm.com/0/3/0/p48674/submenu_bar.png

Change it's background colour to #232f46, and it's border colours to #03050b.

The strip below the #submenu_bar is called the #submenu. This is also listed under the #submenu_bar in the CSS.

New CSS Attributes Explained:

  • text-align: right;: Does what it says. It aligns the content to the left, center or right. This is also the best way to align a banner/logo to the center of the #logo area. Adding text-align:center; will center it.

Change the #submenu background URL to:

http://z3.ifrm.com/11/88/0/p6420/submenu.png

Change the background colour to #152034. Change the border colours to #0a101b. Change the font colour to #848a96.

Now edit the CSS, and refresh the index to see the results.

Changing the link colours. We've already changed a few, but it's time to change the links which aren't specifically edited. These are easy to see: by default, they're bright orange.

Return to the top of the CSS and concentrate on this portion:

a {
color:#e77700;
text-decoration:none;
}
 
a:hover {
color:#FB9E3B;
text-decoration:none;
}

New CSS Attributes Explained:

  • text-decoration: none; : Text-decoration is how you can achieve an underline when you hover over a link, or if you want to annoy people, set it to blink. A full list of text-decoration opportunities can be found here. If you want to stretch your legs again and want links to underline when you hover over them with your mouse, change none to underline for a:hover.

Now, you'll remember a from before, and know that it's a link. What wasn't explained earlier is that not everything has a # or . in front of it. There are several items in the CSS which refer to things in the HTML that don't have a class or ID added to them.

a:hover is self explanatory, it's the link hover.

For the general link, change the font colour to #acbbc2. For the link hover, change the font colour to #848a96.

Edit the CSS, and refresh the index. You'll notice that the orange links within the navigation have now changed colour. Hover over your board name and you'll see the link change to a darker colour as you hover over. Several other links on the index will have now changed colour.

Category Headers

A lot of veteran theme/skin makers will probably say that this is one of the most important parts of designing a theme. It actually isn't. It has a function just like everything else, and when designing a theme you shouldn't solely concentrate on that area.

The blue gradients that contain the category titles are called the h2. This, like the links, doesn't have an ID or class. In the HTML it appears as <h2> and is a type of header which browsers interpret.

Find this snippet of CSS:

.category h2,.topic h2,#portal h2,#portal_foot h2,thead th {
background:url(http://z1.ifrm.com/static/1/css/h2.png) repeat-x top #6a7db6;
color:#fff;
font-size:110%;
font-weight:700;
}

New CSS Attributes Explained:

  • font-weight: 700; : In a lot of CSS files, the word 'bold' is used. On Zetaboards, 700 is used. 400 makes it appear normal, no boldness at all. Therefore the font appears bold.

If you were looking closely when we changed the white links to another colour, you'll have noticed that .category h2 a was listed, and changed to white… yet within this snippet the font colour is white. Difference of course being that previously we were discussing links, and now we're discussing the area itself. .category h2 a only refers to the links on the category names. Changing the font colour for this area will affect the header for the Board Statistics, since it is not a link. It also affects other text, but we'll get round to that soon.

Change the background image to

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

Change the background colour to #1f2b42. Change the font colour to #acbbc2.

Edit the CSS, and refresh the index.

You'll notice two things:

  • The category headers have changed to dark blue, but there is now a visible light border around the outer edge.
  • The background of the Board Statistics header didn't change

Before we change the borders, we'll change the orange gradient. It is called h2.special, a <h2 class=“special”> :) It's available should you ever want to define the Board Statistics from the rest of the categories, or just to give some variety to the index.

Find h2.special:

h2.special {
background:url(http://z1.ifrm.com/static/1/css/h2s.png) repeat-x top #FB9D3A;
border-color:#e77700;
}

Change the background image once again to

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

Change the background colour to #1f2b42.

border-color:#e77700; is a dormant line of the CSS for this theme. Therefore it doesn't require changing. If you were to add a border to the general H2, this would be used to alter the border colour for the statistics table.

After editing and refreshing the index, you'll notice there is now a bright orange border around the statistics header, as well as the bright blue border. However we're not going to edit those just yet. Instead, it's time to make one of the largest changes for the theme.

Intro to Table Cells

Tables are used to display the 'data' of the board. Table rows contain table cells, and the table cells contain the data. The largest change to the theme is made by altering the generic background colour for the table cells across the board. At the top of the CSS, find:

td {
background:#fafafa;
color:#333;
padding:5px 10px;
}

Nothing new there, a background colour, a font colour, and some padding to stop the text from hugging the sides of the cells.

Change the background colour to #232f46, and the font colour to #848a96. Edit the CSS and refresh the index. You will immediately see that a number of table cells visible from the index have been changed. If you have topics on your board, you'll see that a large proportion of it has changed to dark blue, including the calendar, preferences and inbox etc. Go back to the index.

You'll notice that there are lighter borders around the cells. So, we're going to change a large quantity of the border around the board via this next snippet.

th,td {
border:1px solid #e7e7e7;
}

th refers to table headers. A solid 1px width border in a light grey has been added to every <th> and <td> in every table across the board. Change the border colour to #0a101b. Viewing the index, it should be looking a little better.

It should be looking like this at this point:

Well done, you've nearly completed the index, and a large proportion of other areas of the board.

The remaining grey areas on the categories have been altered specifically using a class. td refers to table cells in general, however some table cells have been given a class. The table cells containing the default orange folder forum markers have a class of .c_mark.

So, look for the instance of .c_mark within the CSS, change it's background colour to #1C273D. Before editing the CSS, we'll look for the other grey cell within the categories, and change that too.

It has a class of .c_last, however it appears in the CSS as td.c_last. The td listed before the class tells the CSS that it's a table cell with the class of .c_last. If it were a

for example, it'd be div.c_last. If it were a <span>, it'd be span.c_last. We've just seen this used on the H2 to be more specific with the CSS alterations.

So, find td.c_last within the CSS, and also change it's background colour to #1C273D. Edit the CSS, and refresh the index.

Only a few more areas to change now.

On the Board Statistics table, you'll see long strips of grey, separating the different types of information displayed on the table. These are the table headers, the th.

Back at the top of the CSS, find:

th {
background:url(http://z1.ifrm.com/static/1/sub.png) repeat-x top #fafafa;
color:#777;
font-weight:400;
padding:3px 5px;
text-align:left;
}

Change the background image to

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

Change the background colour to #1f2b42. Change the font colour to #848a96.

Edit the CSS and refresh the index. The Board Statistics table is starting to take shape. If you go to your Inbox now, this change has also edited the area containing the different inbox folders such as drafts etc. Using the background colour for th as well as the background image has payed off for this part, as there is a seamless transition when the background image ends.

One last edit to the th, is the links contained on the th around the board. An example of this is the (1 member · 0 Guests · 0 Anonymous) link on the Board Statistics. Find:

th a,th a:hover {
color:#777;
font-weight:700;
}

Edit the font colour to #acbbc2.

Refreshing the index after another CSS edit, will show that there is a final strip of grey at the end of each category and the board statistics. This is a table cell classed as td.c_foot. It is listed with two other selectors:

td.c_head,td.c_foot,td.c_sort {
background:url(http://z1.ifrm.com/static/1/sub.png) repeat-x top #f6f6f6;
color:#666;
font-size:80%;
}

On the default theme, it has the same properties as the th, therefore we're going to apply the same properties for this theme also.

Change the background image to

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

Change the background colour to #1f2b42. Change the font colour to #848a96.

The categories are nearly complete. Edit the CSS and take a look.

Light Blue and Orange Borders

Now, we go back to the light blue and orange borders around the category headers. Now you've been introduced to the table cells and know that there is a border set around each of them, you may have guessed what needs to be done now. The colour needs to be altered. Just after the first quarter of the CSS:

.cat_head td {
border-color:#5a70b3;
padding:0;
}
 
#stats .cat_head td {
border-color:#e77700;
}

The first part is the blue border, the second part is the orange. .cat_head is the class of the table the category headers are contained in. Each category table is actually contained within a

classed as .category. The #stats you see is also an ID for the category containing the Board Statistics.

Since both normal and statistics table headers have the same background, change both colour colours to #0a101b.

Subforums

The board containing the theme you're editing may not have any subforums, therefore you may, like current theme creators, be completely oblivious to this alteration.

Whether you have one or not, you can still change this. You'll have noticed by now that the table cells aren't all the same colour. This from a design perspective, gives more depth to the theme. From a usability perspective, it helps separate different types of information. The subforum cell takes on the same style characteristics as the darker cells: .c_mark and .c_last:

td.c_subforum {
background:#f6f6f6;
color:#425384;
font-size:80%;
font-style:italic;
}

Change the background colour to #1C273D, and the font colour to #848a96.

The Board Foot

Now, the remaining grey areas on the index is the board's foot. It contains the theme selector, the current time of your time zone, and other links such as 'New Announcement' and 'Subscribe to Forum/Topic' etc.

Find #foot td just after the middle of the CSS. #foot is the ID name for the table, so naturally we're styling the table cells with #foot td.

#foot td {
background:#fafafa;
border-bottom:1px solid #e7e7e7;
border-top:1px solid #e7e7e7;
border-left:0;
border-right:0;
color:#777;
font-size:80%;
}

For this, the left and right borders have been removed, since all table cells have been given a full border. Change the border colours here to #0a101b. Change the background colour to #1C273D, and the font colour to #848a96.

To complete the foot, now find:

#foot #foot_datetime {
border-left:1px solid #0a101b;
width:1%;
white-space:nowrap;
}

Change the border colour for the left border there too. #foot_datetime is an ID for the table cell containing the date and time. Since the left border was removed from all table cells within the #foot table, it has been added back for that particular cell.

Edit the CSS and Refresh the index. One more thing to change is the links on the right of the #foot. Find #foot a,#foot a:hover and change it's font colour to #848a96.

Completing the Index

Completing the index now only requires a few text alterations. The most obvious will be the forum names.

Find this just past the first quarter of the CSS:

.c_forum strong a,.c_last strong a {
color:#425384;
}

strong refers to text which has been made bold by the HTML tag <strong>. .c_forum strong a refers to the forum names. .c_last strong a refers to the username of the last person to post within a topic for each forum. Both have been given the same attribute. Change the font colour to #acbbc2.

Edit the CSS and refresh the index to see the change to the forum names. If you hover over one of them right now, you'll see that it changes to the default medium blue. To change this, you need to find another list of selectors with the same colour attribute:

.meta_box h3,.meta_box a,.meta_box a:hover,tr.pm_new td a,tr.pm_new td a:hover,tr.hidden td a,tr.hidden td a:hover,.c_forum strong a:hover,.c_last strong a:hover,#faq dt a:hover,.search_results h3 a,.search_results h3 a:hover {
color:#5a70b3;
}

.c_forum strong a:hover,.c_last strong a:hover is the part we're currently looking at, the rest comes later. Change the hex code here to #848a96.

You will notice that next to the recently replied to threads on the index, there is a small icon next to them: \\To change this, find .c_last-title and change it's background image to:

 http://z3.ifrm.com/0/3/0/p51184/last.png

Finally, we have the forum descriptions. The cells containing the forum names and descriptions have the class of .c_forum.

.c_forum {
color:#666;
font-size:80%;
width:60%;
}

The text colour for the forum descriptions are altered here. Change the font colour to #848a96.

Edit the CSS and refresh the index. Congratulations, you've completed the index and the first part of this guide!

End result:




themes/themeguide/part1.txt · Last modified: 2016/11/02 12:06 by Helena