This is a simple theme writing tutorial for Simple Machines Forum (SMF)
software. The things that you will need to use this tutorial include:
1.) An installed version of Simple Machines Forum on a sever that supports PHP Scripts and SQL.
2.) A hexadecimal color chart.
To begin authoring your theme, first either install SMF on your sever, or go to the address that your forum is installed in on your server. To create an editable theme, using an SMF administrator account, enter into the admin center and under the menu on the left hand side of the screen, select "Theme and Layout Settings."
When in this part of the CP, go to the section that is labeled "Install a New Theme". Choose to "Create a copy of Default named:" and name your theme as you would have it named. In my example, I will name my theme GOA. Then click install.
After you have installed your fresh theme, you may now choose to edit its CSS (Cascading Style Sheet), which is simply a series of code that determines all colors, fonts, styles, ect. for websites. To edit your new template's CSS, on the same page that your were to install your new theme, find the "Theme Settings" box, and click on the name of the theme that you just installed.
On this page, you will see all the layout settings of the theme which you have just installed. You can choose from a variety of things to further customize it, but for now, simply click on "Modify the style.css file. (colors, fonts, etc.)", which is located in the frame named "Edit Theme"
As mentioned in Chapter 1, CSS is the code that specifies all colors, fonts, styles ect. your for forum. The code that you should now be viewing is the forum's CSS. If it looks perplexing to you, then continue reading this tutorial!
I will now give a general overview of all the different things that you can customize within your CSS.
| /* Normal, standard links. */ a:link { color: #000000; text-decoration: underline; } a:visited, a:hover { color: #323232; text-decoration: underline; } |
 |
This controls all the colors that links on your forums are (minus the navigation tree links). What this code is saying is that for all normal links, the link should be underlined by default, and its color should be black. For all visited links and links that the mouse is hovering on top of, the link should be underlined by default, and their color should be a darker grey (for demonstration purposes in the image, I #6101FF for my visited and hover link color).
| /* Navigation links - for
the link tree. */ .nav, .nav:link, .nav:visited { color: #000000; text-decoration: none; } a.nav:hover { font-weight: bold; color: #cc3333; text-decoration: underline; } |
 |
This little bit of code specifies the actions of the navigational links which are pictured above. If you notice in the code, the navigation listing, link, and visited link are all in black without underline. The "Welcome to SMF!" link is an example of a hovering navigation link. The code specifies that it should be bold, in the color dark red, and it should be underlined.
I'm going to skip over the "Tables should show empty cells too." Since nobody ever uses tables anyhow ;-)
| /* By default (td, body..) use Tahoma in
black. */ body, td { color: #000000; font-size: small; font-family: Tahoma, arial, helvetica, serif; } |
 |
This part of the code is in fact a very important bit of CSS. This part specifies all the colors of all text such as on the board index, header and footers, and in the main body of text. As you can see, the default is black, the font size is small, and the font family includes Tahoma, Arial, Helvetica, and Serif fonts. [Note: for display purposes, I changed the default color (#000000) to lime green (#01D901)].
| body { background-color: white; margin: 0px; padding: 0px; } |
 |
This bit of code may, or may not be of use to you. Basically what it does is sets the color to the section of the body that is behind everything else on your forum. For demonstration purposes, I changed the color from white to #FD8739. In addition, I set the margin and padding to 10. When they are set to 0, the background is not visible.
| /* Input boxes - just a bit smaller than
normal so they align well. */ input, textarea, button { font-size: 9pt; color: #000000; font-family: Tahoma, arial, helvetica, serif; } |
 |
This place in code determines the text color and text sizes of your input
boxes, text areas, and buttons. They are all pictured above. It probably would be a
good idea to just keep the font family and size the same for this function, as they are
set for optimal appearance and performance. For demonstration purposes, I changed the text
colors to #02D202.
The next part about "Checkboxes shouldn't have a background color." might as well be
skipped. This is a basic function and does not need to be changed.
| /* Selects are a bit smaller, because it
makes them look even better 8). */ select { font-size: 8pt; font-weight: normal; color: #000000; font-family: Tahoma, arial, helvetica, serif; } |
 |
This bit of CSS code specifies the text size, font and color for select boxes. In case you are new to web programming, select boxes are simply drop down menus that have different options to select from. For demonstration purposes, I changed the text colors to #02D202.
| /* Standard horizontal rule.. */ hr, .hrcolor { height: 1px; border: 0; color: #666666; background-color: #666666; } |
 |
This next bit may seem tricky to some, but it is really simple. Horizontal rules are bars that cross a webpage horizontally ( <----> ). Horizontal rules appear on top of every posts, as well in messages that contain [hr] BBC tags. Specifying the height and border should be self explanatory; however, the preset is just fine. For demonstration purposes, I changed the color and background color to #FE2CCA.
| /* A quote, perhaps from another post.
*/ .quote { color: #000000; background-color: #C3B8D0; border: 1px solid #000000; margin: 1px; padding: 1px; font-size: x-small; } |
 |
This is a pretty useful block of code too. This specifies the quote boxes' parameters. As correlated between picture and the code, the text color is set to black, the background color is #C3B8D0 (which is lavender), the border is small and black, the margin and padding is only 1px, and the font size is extra small. The preset border, margin, and text size on this should be ok for most forums. However depending on your personal theme, you might or might not want to change the purple background :-).
| /* A code block - maybe even PHP ;). */ .code { color: #000000; background-color: #cccccc; border: 1px solid #000000; padding: 1px; font-family: "courier new", helvetica, "times new roman", serif; font-size: x-small; width: 99%; margin: 1px auto 1px auto; white-space: nowrap; overflow: auto; } |
 |
This is a basic code box. You will notice that the syntax in the simple PHP script are color coded. This feature could be extremely useful for those who are posting code for scripts and the sort. In case you do not recognize the language above, it is PHP. As far as breaking down the CSS, the color for normal text that is not recognized by the syntax color coder is black, the background to this box is grey, there is a small solid black border around the code box, the padding is 1px away from the border, the font family is Courier New, Helvetica, Times New Roman, and Serif, the font is extra small, the box takes up 99% of the posting area from left to right, there is an automatic 1px margin around the code, the word wrapping for the box is turned off for extra long lines of code, and if the box overflows, then it will automatically be dealt with. As another side note, no changes were made between the code an the picture.
| /* The "Quote:" and
"Code:" header parts... */ .quoteheader, .codeheader { color: #000000; text-decoration: none; font-style: normal; font-weight: bold; font-size: x-small; } |
 |
This code specifies the headers to the code and quote boxes. As the default code is written, the text color is black, there is no fancy decorations such as underlining on the text, the font is normal with a bold weight, and the font size is extra small. I changed the color to #FE2CCA for demonstration purposes.
The next part in the code concerning /* Generally, those [?] icons. */ can just be overlooked. You don't need to mess with it.
| /* /me uses this a lot. */ .meaction { color: red; } |
 |
This code is for a pretty standard command in things such as IRC and other chat rooms, the "/me" command. This code simply specifies the color of the "/me" commands in SMF. To use these, simply type "/me (message)" and it will print *(your name) (message) as shown above.
| /* The main post box - this makes it as
wide as possible. */ .editor { width: 96%; } |
 |
This section specifies the width of the posting box. Normally it is set to take up 96% of the screen, but for demonstration purposes, I set the width to 50%.
| /* Highlighted text - such as search
results. */ .highlight { background-color: yellow; font-weight: bold; color: black; } |
 |
When searching for words or strings in posts, if the word or string is found, it is highlighted. By default, the highlighted results have a yellow background with bold weight, and are black text. This code can change the color if you so desire.
| /* Alternating backgrounds... */ .windowbg { color: #000000; background-color: #E1E1E1; } .windowbg2 { color: #000000; background-color: #F0F0F0; } |
 |
If you are customizing your forum...this is definitely something that you will want to change. This section of code determines the two colors of backgrounds and text colors for just about every table on the board. This occurs on the forum index, the topic view, post views, profiles, and just about everywhere else that you can think of. For demonstrative purposes, I changed the windowbg's background color to #057EAB and windowbg2's color to #FE992C. Choose these colors wisely, they will effect your forum hugely!
| /* Titles - such as table headers. */ .titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited { color: white; font-style: normal; background-color: #6B8EAE; } .titlebg a:hover { color: #dfdfdf; } |
 |
This next section specifies the color for the titles on table headers, such as those above every post, and the links that can sometimes be contained in them. Basically, this is talking about everything that is on the top row of a section of tables. As the code reads, the default text and link color is white, with normal font, and the background color is supposed to be a dark blue color. In addition, the hovering link color is preset to a light grey. For demonstration purposes, I changed the titles' text color from white to black, and the background color from #6B8EAE(dark blue) to #1FA3FF(bright blue).
| /* The category headers, page indexes,
and such things - catbg2 is used for "new" posts. */ .catbg, .catbg2 { font-weight: bold; background-color: silver; color: #000000; } .catbg { background-image: url(images/titleback.gif); } .catbg2 { background-image: url(images/titleback.jpg); } |
  titleback.gif  titleback.jpg |
This code specifies the color of the category headers. By default, there is black, bold text, with a silver background color. Alternatively, each of the categories has a background image supporting it. On the places such as on the board index, titleback.gif is the category background. For new posts, category background 2, titleback.jpg, is used. For demonstration purposes, I changed the background color to #8EF6C1(pale green), and the text color to #4A04BE (dark purple).
| /* The borders around things. */ .bordercolor { background-color: #828181; } .tborder { border: 1px solid #828181; background-color: #FFFFFF; padding: 2px; } |
|
This code specifies the parameters for the borders around things. The first section labeled ".bordercolor" specifies the borders around things such as posts in threads, and items on the menu in the admin center (see top picture). The second section named ".tborder" is for the borders around things such as categories on the forum index, and just about every other place that has a border on the entire forum. The code for ".tborder" reads that a 1px, solid, dark grey, border is to be visible. If extra padding around the border is specified (right now, only 2px of padding are specified), then the background of the padding will be white. For demonstration purposes, I changed the background color of .bordercolor from #828181 (dark grey) to #FF19B6 (hot pink). In addition, for t.border, I changed the #828181 (dark grey) to black, the background color from white to yellow, and the padding from 2px to 15px.
The next section, /* Default font sizes. */, does not need to be changed. Thinking logically, you would want small text to be small, normal text to be normal-sized, and large text to be large. If you do feel like changing it, the parameters should be simple enough to maneuver with.
| /* This is for the special header boxes
on the top - it's not used elsewhere. */ .headertitles { background-color: #6B8EAE; border: 1px solid #6B8EAE; } .headerbodies { border: 1px solid #7A7777; background-color: #EFEFEF; background-repeat: repeat-x; background-position: bottom; } |
 |
This next code deals only with the header boxes on the top of the forum in every page. If you are looking for it, look all the way on top of your screen, it is collapsible. This code is broken down into 2 sections. The first one ".headertitles" is for the title bar next to the images that specify what box is being viewed. In the image, Key Stats is the current box. The other section, ".headerbodies" deals with the boxes under the title bar and header picture. The code reads that there should be a dark grey, 1px border with a light grey background. It also specifies that if things such as news overflows the box, to keep moving the bottom of the box down until there is no more text left. For demonstration purposes, in .headertitles, I changed #6B8EAE (denim blue) for the background and border colors to #AB0505 (bloody red). For .headerbodies, I changed the border from #7A7777 (dark grey) to #FCC540 (orange) and the background color from #EFEFEF (light grey) to #05AB67 (forest green).
Section 3
Advice on Theme Authoring
Usually it is a good idea to know what color scheme you are shooting for
before you create your theme. Also, it can also be helpful to correlate your website
theme to your forum theme. Naturally if you have a dark black theme on your site,
you wont to use hot pink and baby blue as your colors. It is also a good idea to
always have a hexadecimal chart on hand. This way, if you are looking for different
gradients of colors, you wont stress out plugging and chugging random hex values into your
template. Personally, I use the 16 million color palate in Paint Shop Pro for my hex
values. It is a simple, yet resourceful way to get colors just by a click of the
mouse button.
If you are one who prefers to use rounded hex values all the time
(e.g. #333333 = grey) there are good hex
charts around the internet that would most likely help you out. Another good way
to determine your color scheme is to look around at the different styles around the
internet. You will most likely be able to tell the difference between colorful and
clean cut professional looks just by viewing websites that you may visit every day.
In my personal opinion, don't go too flashy. Sometimes flashy will turn tacky real
quick.
I hope that this tutorial can be of some constructive use to you. My goal in completing this tutorial was to help inform those who may be new to the web development community, and those who are starting their own communities to create a custom, more individual appeal for their website/forum. Always remember even though this code may seem foreign/strange/stressful to you, just keep with it and maybe one day you can start to develop your own professional style or skill of web authoring.
In closing, seeing as how this tutorial is written for SMF, you can probably infer that I am a SMF user. I would definitely recommend this software over any other current project/team. Special thanks to all those who have dedicated their time and effort to make this software as wonderful as it is.
SMF software, logo, default template, styles and everything else dealing
with the general distribution of the forum is © 2001-2004, Lewis Media.
All Rights Reserved. Always assign proper credit where applicable.
The contents of this tutorial are © 2004 by Patrick Schiess.
The views, tips, advice, and image clips expressed in this tutorial are all produced through labor by Patrick
Schiess. Please do not abuse this tutorial. For any questions, comments,
insight, complaints, and anything else that you feel necessary to say to me, you can
contact me at p.schiess[]@[]gmail .com (minus the []'s for spam protection purposes).
Special thanks goes out to A.M.A for the excellent creation of styles for this tutorial. Thanks a million A.M.A! It makes the tutorial much more fun/easier to look at!
All prosecutors will be violated, and as always remember, All your base are
belong to us.© 2004 by Patrick Schiess.
