Making Forum Custom Themes

Members can help design custom themes for the neoforums that mods can install into individual forums. This guide is intended to help identify all the elements to style to make a complete custom forum theme (aka forum skin).

Note: This document is only intended to include new information for v1.0.3+ version of neoforums, which includes changes to make theming easier for theme designers.

Contents

[edit] Basic Intro

Custom styling a forum is easily done using CSS. The neoforums uses a small set of classes to style most of the elements, so the basic set of CSS to change colour themes is small.

All CSS changes go into the Theme HTML section of your forum settings, and must be placed into <style> tags like this:

<style>
  .alt { background: #efefef; }
  .norm { background: #f9f9f9; }
</style>

[edit] alt and norm classes

The key classes involved are alt and norm. By changing the colours of these classes you already restyle the default blue theme in the forum and within threads.

[edit] alt adjacent and norm adjacent

These are classes designed for situations where something needs to be adjacent to norm and alt without being within them (which is handled by .inner).

The proper usage of norm adjacent and alt adjacent is to use them together, and style them like below:

/* used when you want to sandwich something between alt or norm but not within them */
.norm.adjacent {background-color: #F9F9F9;}
.alt.adjacent {background-color: #F9F9F9;}

In HTML the classes would be used like this:

<div class="norm">Right here</div>
<div class="norm adjacent">This is the body</div>
<div class="norm">Below</div>

[edit] Within Threads

In threads there are a few additional considerations such as Quotes, Tags, Code, PHP tag, the authors and custom titles.

For username and custom title, change the .authorcol classes to add whatever styles you need, such as below:

.authorcol .username { color: #99ccff;}
.authorcol .custom_title { color: green;}

[edit] Tags

Within threads which have tags, the first post will have a tags section. This section will use the default prefix tag styles, but more importantly, it will be inside a box using the inner class.

The inner class is used whenever we want to have a box within alt or norm, and is designed to offset the alt and norm styles.

Here is how the default alt and norm styles look:

/* box inside alt */
.alt .inner {background-color: #D4DBEB; color:#4D697C;}
.alt .inner.borders {border:1px solid #B1BDC9;}
/* box inside norm */
.norm .inner {background-color: #E0E3EB; color:#4D697C;}
.norm .inner.borders {border: 1px solid #BFCAD4;}/* alt box inside norm with borders */

[edit] Quotes

Quotes can be styled using the "qt" class.

Example for a dark theme:

.qt {
	background: #999;
	border-color: #333 #ccc #ccc #333;
	border-width: 1px 1px 1px 1px;
}

Quote style example.png

If you change the background drastically on the quote you will also need to set a foreground colour using the color attribute. The above example inherits the default skin's quote foreground for its text.

[edit] Codes and PHP Tags

It is recommended for now that you do not style code and PHP tags. The PHP tag uses PHP's own colorize function which hardcodes colours right into the HTML, and is thus harder to style, so changing the php box's background colour may result in illegible PHP code.

The code tag does not have this limitation, but shares the same style (.code) as the PHP code tag.

[edit] Form Errors

In v1.0.3, form errors are very simple to style. The form errors still use a table output, but now use new styles and have an easy identifier.

Example for a dark theme where the default body font colour is set to white.

#error .error_field { font-weight:bold; color:black; }
.norm2 { background: darkred; }
.alt2 {background: red;}

Result:

Red form error.png

[edit] Alert and Notices

By default Neoforums has a .alert and .notice class that are used in various pages.

The default style is:

.alert { border: 1px solid #B2A583;background: #FFF3D4;padding:6px;margin:10px 0; }
.notice { border: 1px solid #ccc;background: #efefef;padding:6px;margin:10px 0; }

These should be overridden in dark themes.

Eg: an example of alert and notice in a dark theme:

.alert { border: 1px solid #7F765D;background: #4C4738;padding:6px;margin:10px 0; }
.notice { border: 1px solid #555;background: #777;padding:6px;margin:10px 0; }

[edit] .norm and .alt borders

There are a few rare cases where the alt and norm classes have borders. These borders will have to be overridden in your custom style if you are using totally different background colours, otherwise the default borders will appear to be out of place.

This is the default for each:

.alt.borders {border:1px solid #babbc6;} /*borders on alt colour where bg is body bg */
.norm.borders {border:1px solid #C6D0E7;}

You can see these borders in action anytime you see the confirmation just like the below box, which shows the default colours:

Default borders.png

[edit] See Also

Making Custom Themes For Thread Prefix Tag

Last edited by Redemption on 22 May 2012 at 15:38
This page has been accessed 1,141 times.