Making your Theme Shine Part 1: Customizing the Header
Most people do not have the time or funds to have a custom theme designed for their forum. Working with a designer is a long and expensive process, filled with revisions, errors, and a lot of waiting. A theme has to be designed from scratch, coded, and finally debugged to make sure that everything works. This process is important for large websites which can afford it, but for small ones which are just starting out, there is an easier way which can be just as effective.
This series of articles will discuss how you can take an existing theme which is available for free and make it shine. Making these simple edits do not require any particular expertise. You do not have to be a programmer, or a designer. Just someone who doesn't mind getting their hands a little bit dirty, and wants to see their website look a whole lot better.
So, without further ado, here is part one of How to Make Your Theme Shine.
Step #1: Pick a Good Theme to Work With First, you will need a good theme to start out with. Scroll through the list of themes which are offered by your forum software and pick a fairly basic one. For the purpose of this tutorial, we will be using the MyBB forum software. However, this tutorial will also work with phpBB, SMF, IPB, XenForo, and any software which you can name. Since the MyBB theme databases doesn't have very much in it at the moment, this tutorial will be using the MyBB default theme. We'll be making quite a few changes, so that shouldn't be much of a problem. Here is the website which will be used for this tutorial. http://tutorial1.frtive.com/.
Step #2: Add a Logo This is a pretty standard improvement to make to any website or theme. For this tutorial I will be using the logo from my latest project. In MyBB, go to: Admin CP -> Templates & Styles -> (Theme Name) -> Options -> Edit Theme -> Board Logo
Step #3: Set a Background Behind the Logo The background behind the logo is one of the most visible aspects of a website. When changing a default theme, you can use either a solid color or an image. An image can, in particular, make your website look unique. I will use, for this, a picture I took myself of the hills near San Diego. You can also use pictures off of websites like flickr commons. In MyBB, go to: Admin CP -> Templates & Styles -> (Theme Name) -> Options -> Edit Theme -> Add Stylesheet -> Enter custom.css -> Submit. Here is the code:
What about custom styles or boards other than MyBB?
In Google Chrome or Firefox, right click your forum's header and choose "Inspect Element."
Hover your mouse over each element until the area highlighted on the screen corresponds to where you want to put the image. If that area is named
Step #1: Pick a Good Theme to Work With First, you will need a good theme to start out with. Scroll through the list of themes which are offered by your forum software and pick a fairly basic one. For the purpose of this tutorial, we will be using the MyBB forum software. However, this tutorial will also work with phpBB, SMF, IPB, XenForo, and any software which you can name. Since the MyBB theme databases doesn't have very much in it at the moment, this tutorial will be using the MyBB default theme. We'll be making quite a few changes, so that shouldn't be much of a problem. Here is the website which will be used for this tutorial. http://tutorial1.frtive.com/.
Step #2: Add a Logo This is a pretty standard improvement to make to any website or theme. For this tutorial I will be using the logo from my latest project. In MyBB, go to: Admin CP -> Templates & Styles -> (Theme Name) -> Options -> Edit Theme -> Board Logo
Step #3: Set a Background Behind the Logo The background behind the logo is one of the most visible aspects of a website. When changing a default theme, you can use either a solid color or an image. An image can, in particular, make your website look unique. I will use, for this, a picture I took myself of the hills near San Diego. You can also use pictures off of websites like flickr commons. In MyBB, go to: Admin CP -> Templates & Styles -> (Theme Name) -> Options -> Edit Theme -> Add Stylesheet -> Enter custom.css -> Submit. Here is the code:
#logo { background-image:url(http://tutorial1.frtive.com/attachment.php?aid=2); background-position:center center; background-size:100%; }The URL you see in the "Background-image" tag is the URL to use for your image. "background-position" tells the browser to center the image. background-size:100% tells the browser to scale the image to fit the space. All of these CSS properties are applied to #logo. Also, you may need to modify your logo to look good on the background you're using. For this tutorial, I simply edited the logo to make it solid white. White shows up very well against complicated backgrounds.
What about custom styles or boards other than MyBB?
In Google Chrome or Firefox, right click your forum's header and choose "Inspect Element."
Hover your mouse over each element until the area highlighted on the screen corresponds to where you want to put the image. If that area is named then replace #logo with #something in my code. If it is
, then replace #logo with .something in my code.
Step #4: Make the Menu Text More Visible Notice that in the screenshot from Step 3, the menu text is hard to read. This problem will occur with a lot of themes, but not all. Here is code to fix that. Right click the menu items and choose the "Inspect Element" option. Open up the stylesheet you just screated in set 3 and add this code to the bottom of the file.
The element we are interested in is the "li" element which can be found under the "ul" with the class "menu." In CSS, we can refer to that element as "ul.menu li", which literally means "all li elements under the ul element which has the class 'menu.'" Here is the code we will be using:
Conclusion That concludes the first installment in this series on customizing a forum's default theme. You can see the progress made in this tutorial live at the below web address. http://tutorial1.frtive.com/index.php Next week, this tutorial series will focus on making other aspects of the theme more unique.
Step #4: Make the Menu Text More Visible Notice that in the screenshot from Step 3, the menu text is hard to read. This problem will occur with a lot of themes, but not all. Here is code to fix that. Right click the menu items and choose the "Inspect Element" option. Open up the stylesheet you just screated in set 3 and add this code to the bottom of the file.
The element we are interested in is the "li" element which can be found under the "ul" with the class "menu." In CSS, we can refer to that element as "ul.menu li", which literally means "all li elements under the ul element which has the class 'menu.'" Here is the code we will be using:
ul.menu li a:link, ul.menu li a:visited, ul.menu li a { color:white; }This tells CSS to use the white color for all links which are visited and unvisited under the elements "ul.menu li"
Conclusion That concludes the first installment in this series on customizing a forum's default theme. You can see the progress made in this tutorial live at the below web address. http://tutorial1.frtive.com/index.php Next week, this tutorial series will focus on making other aspects of the theme more unique.
