Making a Zetaboards Theme: Introduction


This guide is a step-by-step guide to creating a simple theme on Zetaboards. The first section (on this page) is a lot longer than the others because it includes more explanation, and an introduction to the basics of CSS. You will find as the guide progresses that you'll be 'helped' along less and less. Think of it as taking the stabilisers off your first bike as a kid :P

For this guide, you'll be walked through building a specific theme. The theme of choice is one of Zetaboard's official themes: ZB Midnight (Previously known as ZB Mono). It is a very simple theme, and requires you to make a complete alternation of all areas of the CSS. This theme is currently not available yet so it's an extra incentive to complete this guide ;)

On the right of each page, you'll see a table of contents. If you stop at any point and want to go back there later, you can click on where you were last, and the page will jump straight to it.

Theme Guide Contents

Please look out for new sections as they are completed and added.

Please make sure that you have created a new theme set before starting this guide. Click on 'Create a new theme based on Zeta Original' to create a new theme. We are going to be editing the default original theme. If you do not have it, you can get it from here.
Then make sure the theme is selected on your theme selector

Please remember that if you have trouble with any part of this guide, simply drop us a theme ticket from your Admin CP and we'll help you out.

The CSS is accessed by clicking Edit Theme Appearance. 'CSS' is the name of the coding language which you'll see in the box on that page.

Theme Images

Themes usually have images as backgrounds for elements on the page. Sometimes people make themes comprised only of hex-codes. If you want to create your own themes you'll need to have some sort of graphics program. If your computer is lacking in a graphics program, you can try a free program such as GIMP. Unfortunately we cannot provide guides on how to create images. Teaching you how to edit the CSS for this software is one thing, creating graphics is another. Some boards on the network (in the graphics/forum services directories) may have graphic related tutorials, so keep your eyes peeled :)

The following images were created for the ZB Midnight theme. These are just some of the images we'll be using in the guide:

If you've not tried to make theme graphics before, you're probably thinking that they are very small. How do they fill the spaces they go in? Background images automatically 'tile', filling the space they're in, unless you use CSS to tell them not to. These particular images are straight gradients, and can tile left to right seamlessly: ← The image's actual size.

← The image repeated several times in a row.

If you've made your own graphics already and have some hex codes at the ready, you should still be able to follow this guide, just ignore the URL and hex code prompts, and use from your own selection instead.

General Tips

The Zetaboards CSS can be quite daunting the first time you see it. It appears to be rather long, but there is an easy way to search for what you need in the CSS.

But first, I should explain the CSS. It may look long, and really scary, but Seth (who wrote the CSS) thought it'd be easier for new users to theme making, if the stylistic CSS was at the top, and the structural was at the bottom. This means that if you simply want to change the colours, you only need to edit the first half of the CSS. The idea worked initially, but you can also find the blog and shoutbox CSS at the bottom. The shoutbox (as I type this) has not yet been released, but we'll get around to that at the end of this guide.

A nifty new feature of the Admin CP is being able to search within textareas (the boxes where information is typed) with your browser's search facility. In browsers such as Internet Explorer, Firefox and Opera, this requires simply holding down the CTRL key, and pressing the F key after. This will bring up the browser's search box somewhere on the browser window. Unfortunately this method does not work in Safari 3.

The screenshot above shows an example of Firefox 3's search facility. Typing in what I wanted to search for and then pressing 'Next' found an instance of it within the CSS, and highlighted it for me.

One last tip before we really begin: Try to have fun. Making themes can sometimes make you want to throw your computer out the window. However the end result will be worth it, and you'll feel as though you've accomplished something :)

Start the Guide

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