-
Notifications
You must be signed in to change notification settings - Fork 35
How to Make A NoNonsense Forum Theme
- Begin by downloading and installing NoNonsense Forum as per INSTALL.txt
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
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"
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
-
[img/] (https://github.com/Kroc/NoNonsenseForum/tree/master/themes/greyscale/img) [folder]
A place for the images in your theme. This is arbitrary and decided by your HTML / CSS, so you can choose to use a different name or location for your images if you so desire -
[index.html] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/index.html)
Template for the 'index', the list of threads in the forum or sub-forums; essentially the 'home page' -
[thread.html] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/thread.html)
Template for threads: the post and replies -
[append.html] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/append.html)
Template for the append page (when a user is adding text to an existing post) -
[delete.html] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/delete.html)
Template for the delete page (when a user is deleting a thread or reply) -
[markup.html] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/markup.html)
Template for the documentation of the markup formatting used by NoNonsense Forum -
[privacy.html] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/privacy.html)
Template for the privacy policy page -
[theme.css] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/theme.css)
Obviously, the CSS for the theme. This file name is not mandatory, it's determined by what you use in your HTML, so you can have a different name / location if you so desire -
[theme.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/theme.php)
A set of templating functions unique to your theme. Whilst you will not need to modify this to make a theme, doing so will give you advanced control over some features and allow you to create a different style of page links and moderator names list which, unfortunately, are not part of the HTML templates -
[theme.config.default.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/theme.config.default.php)
Default configuration for your theme. The user of your theme can override this with a copy named "theme.config.php" -
[lang.example.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/lang.example.php) [optional]
A sample file for doing translations of the theme. Details of this are not covered in these instructions, read the contents of "[lang.example.php] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/lang.example.php)" for further instructions -
[apple-touch-icon.png] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/apple-touch-icon.png) [optional]
A 144x144 image to serve as a launcher icon on mobile devices when users add the site to their devices' home screen. Note that this file in the theme is not actually used as such, but is provided for site admins to copy to the root of NoNonsense Forum where it will work -
[favicon.ico] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/favicon.ico) [optional]
An icon file to represent the site in a tab / title bar / bookmark. As with "apple-touch-icon.png", this file is not used directly and provided only for site-admins to copy & paste to the forum root should they want to use it -
[metro-tile.png] (https://github.com/Kroc/NoNonsenseForum/blob/master/themes/greyscale/metro-tile.png) [optional]
An image to be used as an icon in Windows 8 when the user pins the site to their Start Screen. As with the other icons, this file is not used as such but provided for the site admin to copy if they want to use it. This image must have a transparent background.Warning: Due to a bug in Windows 8, this image must be a 32-bit PNG file. An 8-bit + Alpha PNG will not render. Some PNG optimisation software will automatically convert 32-bit PNG files to 8-bit where possible so be aware. If you are not sure about any of this, or you won't be providing your own "metro-tile.png" then it is best to just delete this file.