Skip to content

How to Make A NoNonsense Forum Theme

Jump to bottom Edit New page
Kroc edited this page Oct 9, 2012 · 6 revisions

1. Download and Install

2. Duplicate the Default Theme

Each theme is a folder within the "/themes" directory. You should never modify the default theme except for through "theme.config.php" because you would prevent yourself from updating NoNonsense Forum in the future. It is best for you to work from a copy of the default theme.

  • Make a copy of the "greyscale" folder within "/themes"

  • Rename the folder to whatever you want your theme to be called.
    It's best to stick to URL-safe letters such as a-z, 0-9, underscore and no spaces

3. Set the Forum to Your Theme

Now we must tell NoNonsense Forum to use your new theme. The name of the default theme is stored in "[/config.default.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/config.default.php)" but you must not edit that file (otherwise you will not be able to update NNF).

  • Make a copy of "[/config.default.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/config.default.php)" and rename it "config.php",
    NoNonsense Forum will now override the defaults with the options set in "config.php" and your configuration will persist between updates

  • Open "config.php" and change the value of the FORUM_THEME option from "greyscale" to the name of your new theme. It should look something like this:

    //folder name of the theme to use, in "/themes/*"
@define ('FORUM_THEME',	'my_theme');

  • Save "config.php" and refresh your browser where NoNonsense Forum is running; if all is correct nothing will happen! No errors mean that NoNonsense Forum is now running from the new theme, which is -- for the moment -- an exact copy of the default theme.

    If you get an error message that the theme cannot be found, verify that the name of your theme folder is the same as is in "/config.php"

4. Get to Know the Layout of a Theme

Within a theme folder are a number of files for different purposes. Here is a list and brief description of each to give you an overview of what you'll be working with

5. What to Change

Now that you have your theme set up you can begin to make changes to turn it into something of your own.

"index.html", "thread.html", "append.html", "delete.html", "markup.html" & "privacy.html" are the templates for the theme.
They are just regular HTML with no {{special syntax}} embedded or the like that you have to understand.

The [templating engine] (http://camendesign.com/dom_templating) in NoNonsense Forum works by removing parts of the template that are not needed. Therefore the templates contain all the possible chunks of HTML for various situations. This means that everything you as a developer need is all on the one page and you can swap around the HTML and CSS all you want.

You can view the template, with all elements visible by visiting the HTML file directly through your web server, i.e. http://localhost/themes/greyscale/index.html (but note to change "greyscale" for the name of your theme)

6. What You Need to Know

  • IDs and classes prefixed with "nnf_" are required as they are the hooks by which the template engine knows what elements to keep and what to remove. However, apart from the exceptions noted below, the type of element (e.g. div, strong, ol) those IDs and classes are on can be changed; e.g. you can change <strong id="nnf_example"> to <em id="nnf_example">

    • Hyperlinks (<a>) because of the href attribute
    • <time> because of the datetime attribute
    • <input>, <textarea> for input forms
    • <option class="nnf_lang"> because the language selector must be a select box at this time (if there is call from developers to allow custom language selectors then I will add support)
    • The submit buttons must be of type="image" otherwise you will not be able to post, sorry about this

    You may add wrapping elements, change the order of anything and generally mess about with the HTML to a surprising degree. Exercise some creativity, but if you are not familiar with NoNonsense Forum yet it is best to refresh the page after each change to ensure that the layout hasn’t broken. If you need any assistance with creating NoNonsense Forum themes, you can ask questions in the [Camen Design forums] (http://forum.camendesign.com)

  • Each HTML page is complete, so there is a lot of duplication. This is done so that it is immediately clearer to anybody examining the HTML what the complete picture looks like, rather than having to chase lots of separate files around. Try focusing on one file first and copy across changes once you are happy. You should note the following subtle differences between files:

    • Only "index.html" has an about section (#nnf_about) that appears as a banner at the top of the forum if "about.html" exists; see the section on "Adding a forum introduction" in [INSTALL.txt] (https://github.com/Kroc/NoNonsenseForum/blob/master/INSTALL.txt)

    • "append.html", "delete.html", "markup.html" and "privacy.html" do not have an RSS feed in the <head>

    • "append.html" and "delete.html" have a robots no-follow in the <head> to tell search engines not to index these pages

    <meta name="robots" content="noindex, nofollow" />

  • It is important to note that whole sections will appear or disappear depending on the situation, for example the language selector is removed from the HTML entirely if no translations are available. In the default theme this has a distinct effect on the navigation breadcrumb and the RSS / Add link. Be sure to test the theme using the various permutations

  • The list of pages on "index.html" / "thread.html" is not generated from the template (they're there for the purposes of testing CSS), instead the page list is generated by a function in "[theme.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/theme.php)". This is done so that, should you want to, you can change the type of page list (a drop-down box instead perhaps) which requires programatic changes

  • The lists of mods / members (#nnf_mods-local-list, #nnf_mods-list, #nnf_members-list) are not generated from the HTML templates, they are generated by a function in "[theme.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/theme.php)", this is because you may want to build the list in a more complex fashion than the templating engine alone may allow

Add a custom footer
Add a custom sidebar
Clone this wiki locally