TutorialWebmaster

Making your Theme Shine Part 2: Customizing your Forum

In the previous installment of this series, you learned how to customize your forum’s header. Using the MyBB default theme, we made a significant change which made the website look less like a default MyBB site, and more like a unique website which has had some serious effort put into it. This tutorial expands on the work from the previous tutorial, describing how to edit the main body of your forum, and how to really make it shine.

For your reference, here is a link to the previous tutorial:

http://forumpromotion.net/making-theme-shine-part-1-getting-started/


Step #1: Change the Forum Header Color.

One thing which really looks “default” about the theme from the previous tutorial are the forum headers. They still need to be customized, so that they look good beside the header image which we added in.

The first step is to select the CSS element we will be modifying. For MyBB, that element is called “td.thead” which means the table column element (td) with the class “thead”. The screenshot below demonstrates how to select this element using Google Chrome.

HeaderSelect

Once the element has been selected, we need to figure out how we are going to style it. To do this, I typically use the CSS gradient generator. That tool can be found here: http://www.colorzilla.com/gradient-editor/.

As shown in the below screenshot, create a gradient which will look good for the table headers. When creating the gradient used in this tutorial, I started with a color selected from the image which I used. You can find our what colors are in the images you use through an eyedropper tool, which is available in any photo editor. Once you figure out what color will start your gradient (you can determine this by trial and error), pick a slightly darker color to end the gradient.

CSSGradientGenerator

Here is the code to add to the theme we created:

td.thead {
background: #595d4f;
background: -moz-linear-gradient(top,  #595d4f 0%, #393d2e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595d4f), color-stop(100%,#393d2e));
background: -webkit-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -o-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -ms-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: linear-gradient(to bottom,  #595d4f 0%,#393d2e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#595d4f’, endColorstr=’#393d2e’,GradientType=0 );
}

The code above is simply the code generated by CSS Gradient generator, but applied to td.thead. If you are using your code gradient, this template may be more useful:

td.thead {
/* Code from the gradient generator goes here */
}

In case you didn’t already know, in CSS, /* and */ denote a comment. Anything in between those two tags is not interpreted by the browser.

Below is a screenshot of the theme with the new headers.

HeaderWithGradientColor


Step #2: Change the Button Color

As you can see in the above screenshot, there are still a few changes which need making to our custom theme. One is the button color.

First, select the button. In MyBB, it is CSS “elementfieldset#search input.button”.

SelectButton

Then, we apply  a gradient to it using CSS gradient generator.

fieldset#search input.button {
background: #595d4f;
background: -moz-linear-gradient(top,  #595d4f 0%, #393d2e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595d4f), color-stop(100%,#393d2e));
background: -webkit-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -o-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -ms-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: linear-gradient(to bottom,  #595d4f 0%,#393d2e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#595d4f’, endColorstr=’#393d2e’,GradientType=0 );
}

And add that code to the stylesheet created in the previous tutorial.

WithButtonColor


Step #3: Change the Post Header Background

Since the headers are now darker, it looks better to have a darker background for the post information area.

Select it using Google Chrome’s “Inspect Element.”

TopicSelect

In Chrome, the element is “div.post div.post_author”.

Here is the code:

div.post div.post_author {
background:#EEEEEE;
}

And here is a screenshot.

WithDarkerColor


Step #4: Change the Link Color

You may also want to change the color of links to go better with the new theme.

Since we are interested in changing the default color for all links, we can use the CSS selector “a:link, a:visited, a”, which is to say “all clicked CSS links, all clicked HTML links, and all links which are in neither of these states.” The screenshot below shows how to select this using Chrome.

LinkColorSelect

Now, here is the code:

a:link, a:visited, a {
color:#333333;
}

You can select a good color code for your links, or anything else, using this tool: http://www.colorpicker.com/

And here is a screenshot:

WithDifferentLinkColor

And that’s all!


Conclusion

In this tutorial series, I showed you how to create your own custom MyBB theme using CSS. Here is the code which I used.

#logo {
background-image:url(/attachment.php?aid=2);
background-position:center center;
background-size:100%;
}

ul.menu li a:link, ul.menu li a:visited, ul.menu li a {
color:white;
}

td.thead {
background: #595d4f;
background: -moz-linear-gradient(top,  #595d4f 0%, #393d2e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595d4f), color-stop(100%,#393d2e));
background: -webkit-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -o-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -ms-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: linear-gradient(to bottom,  #595d4f 0%,#393d2e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#595d4f’, endColorstr=’#393d2e’,GradientType=0 );
}

fieldset#search input.button {
background: #595d4f;
background: -moz-linear-gradient(top,  #595d4f 0%, #393d2e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#595d4f), color-stop(100%,#393d2e));
background: -webkit-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -o-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: -ms-linear-gradient(top,  #595d4f 0%,#393d2e 100%);
background: linear-gradient(to bottom,  #595d4f 0%,#393d2e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#595d4f’, endColorstr=’#393d2e’,GradientType=0 );
}

div.post div.post_author {
background:#EEEEEE;
}

a:link, a:visited, a {
color:#333333;
}

You can apply these steps using any basic theme as a base, although please make sure that the license terms of that theme allow you to create derivatives.

You are free to use the code in this tutorial however you wish, although do not link to the images used in this tutorial on my web server, as that would needlessly use up my bandwidth.

Good luck with your website, and I hope that this tutorial was beneficial to you.

C
I guess I'm done with this tutorial series. Anyone interested in me pursuing different angles on this customization? Maybe different themes or colors? Maybe a different forum system? Leave a comment or drop me a PM and I'd be glad to write something up. :)
C

This site uses Akismet to reduce spam. Learn how your comment data is processed.