Camen Design Forum

Improvements to NoNonsense Forum theme customising and maintaining custom themes

append delete Kroc

So one of the things I realise that NoNonsense Forum (and Camen Design’s forums by proxy) suffer from is a lack of ability to properly customise the theme without resorting to forking, which then becomes hard to maintain as NNF is updated. Also, people wanting to use NNF usually need to modify the theme to integrate with their site, so end up forking anyway.

I have a number of ideas, but I’d also like your help on what improvments and changes and options can be made available in NNF for customising it and maintaining custom themes. I am obviously wanting to avoid spaghetti code that is so customisable, it’s no longer understandable so as always, ideas should be iterated and honed into simplicity and elegance; here are a few of mine:

* The admin should be able to provide an "about.html" file which is inserted into the top of the index pages so that it’s easier to provide an explanation text that describes the forum and what it’s about, as well as any general custom HTML (like social buttons) the admin wants

* Themes should have their own config files that admins can customise, much the same as config.php / config.example.php so that the user can make adjustments in the theme, without having to fork it. This also allows themes to be more custom and diverge from NNFs base theme, in what options it provides

So what else can be done to help you with deploying NNF?

Reply RSS

Replies

append delete #1. Jose Pedro Arvela

I see a few things as useful to customize a forum without needing to fork a theme:

• Favicon
   Being able to identify the website in the bookmarks or trough the tab open is useful and essential. So far all forum software I've seen requires either forking or hacking the theme to implement this. If it is possible to set a custom favicon.ico file somewhere and make the software use that instead of the theme's default, it'd a major advantage to the general forum software out there and a huge recognizability leap.

• Logo
   The same applies to the logo on the header, being able to hide it, replace it, or even make the logo be the title instead (by hiding the forum's title in the image's alt attribute), that would avoid many of the horrible hacks I've seen so far around the web. (on one site I used to work at, I remember someone replaced the forum's title string with blank, so that the logo could replace it, the result, empty <title> string, empty e-mails, site unrecognizable on browsers with no image support or such disabled, etc. All because their logo integrated the title in itself and they didn't want to display the title in that situation)

• Color Scheme
   I know this is already planned, but having a few custom color schemes would be good. Another idea would be to also allow override stylesheets, and provide a simple one with instructions on which values to change to make a new color scheme.

This, together with your about.html, I think are the absolute essential. Perhaps besides that also a posting-rules.html, to add or replace the text next to the new-thread/reply box with custom links to forum rules, tips,etc for specific forums.

Jose Pedro Arvela added on

Regarding implementation:

• Favicon
   If a favicon.ico is found on the settings folder (assuming there's a settings folder), the use it instead of the theme's favicon.

• Logo
   A custom logo is used if a logo.png or logo-replace.png exists, with logo.png being used in the same way it is used by default and logo-replace.png used to replace the header text with the logo. If both exist, logo.png should be used due to the better markup and lesser problems on text-only browsers.

• Color Scheme
   If a custom-style.css exists, append it after the default theme's style like so:

% HTML
<link rel="stylesheet" href="/themes/greyscale/theme.css" />
<link rel="stylesheet" href="custom-style.css" /> %

For people to relate it with color schemes, we should provide a custom blank CSS file with only the colors for people to change.

Kroc added on

(the code block bug was due to me forgetting to upload the latest NNF to camen design; I’ve retroactively fixed your post for clarity)

append delete #2. Kroc

• Favicon

(NNF should have some sort of "title" divider markup)

The problem with this has been:

* if you replace the favicon, you break git updates
* you would need to edit the htaccess to point it at another file, breaking git updates

However, I had never thought about your idea of having an alternative file that if-present would be used; I could that -- rather, if favicon.ico doesn’t exist, it would fall back to a favicon.default.ico. This can all be done in htaccess without requiring the user to edit or replace NNF files so I’m extremely happy you’ve answered this problem for me!

• Logo

The logo is currently a background image. I was thining of making it an img tag in the HTML so that with theme options, a custom image can easily be specified.

• Colour scheme (alts)

Moving to themes with a config file would make this possible. When I first thought of doing colour alts, I would just clone the default theme and make minor adjustments, but with all the theme changes happening that would be a huge pain and too much redunancy. I’ll rearchitect so that the user can specify the colour-alt in the theme options and it’ll insert an extra stylesheet accordingly for the chosen colour

• Custom CSS

Yep, happy to do this.

---

Thanks for your suggestions, very welcome and right in line with what I want of NNF.

append delete #3. Simon

What about not including a favicon at all? Have the user add one if they want it. Considering how basic forums are, I don't think any sort of theme system is needed. As long as the markup is good, then users should be able to do everything with the style sheet.

append delete #4. Kroc

The user can add one if they want to, but it is best to provide a default favicon because it makes it easier to recognise a website in many different places. It can aid with locating the website amongst a list, and also the particular tab in a browser.

With a custom stylesheet, users will be able to take the default theme and re-model it how they like; but I will keep open the option of different themes entirely (that is, being able to specify completely different HTML), because it is very useful for doing translations or integrating the forum with an existing site design (a common requirement).

append delete #5. Jose Pedro Arvela

Just saying quickly, because I don't have much time, but translation implementation should be done in one (or more) files of variables, which then are used by the templates and replaced by the actual text. To maintain compatibility between version updates, if a string isn't found, the original English one should be used.

That'd useful for a forum specific for something of a certain country or language.

append delete #6. Kroc

All of these suggestions (bar colour-alts) have been checked-in with version 10 of NNF; are there any further suggestions for desired customisation features?

append delete #7. Jose Pedro Arvela

None that I can remember of. Even if I do remember of something, this is already a feature filled release.

By the way, was translation somehow implemented?

append delete #8. Kroc

No, translation isn’t implemented, but we are moving toward that possibility. I’m not really hearing back from people implementing NNF to know how this should be done — I don’t speak any other languages, unless you want NNF in pig-latin.

I’m working on exploring the viability of themes3 at the moment (moving to a static template, no embdedded PHP), that will make translation much easier to add. Each theme could specify an array with the translations, and a simple search / replace done on the HTML.

Technical implementation aside though, how would NNF translation actually be handled? My biggest worry is that it ties my hands from changing things around, because if I add any new phrases (like when I add a new feature), then I have to arrange for volunteers to do the translation. (The README file would be horrendous!)

At its current size and exposure, I personally don't believe it's beneficial for NNF to supprt built-in translation. If someone is using it on a foreign site, they can create a custom theme for the translation. With themes3 this effort will be easier to do and much easier to maintain.

I’m welcome to hear from anybody who is running NNF in a multi-language environment or any users where language is a concern. I just haven’t heard any case-stories so far to decide upon.

append delete #9. Peter

Old thread, but I've been unable to modify the current version without changing core files, so...

Most people want to change the header and footer. Since a forum is usually part of a larger site, there needs to be an easy way to change these areas (e.g., for links pushing back to the main site, etc.)

My suggestions:

Structure the templates so there is a head.html, header.html and footer.html file shared by all template files.

Since a forum is often part of a larger site, it is convenient to be able to share those files, so the ability to "include" their contents (e.g., via PHP INCLUDE or similar) is nice. That way, there is only one file to maintain instead of having to manually edit contents in various apps part of the same site.

To prevent overwrites during upgrades, two approaches could be used, or both.

1. The above files could be part of the root directory of the install, and 'included' (if present) at the proper points in the templates.

2. They could be located in the templates directory, but a different directory can be specified in the config file. (To prevent upgrade overwrites, one would copy/rename the theme directory and point to the non-non distro location via config.)

These are such common techniques that I think most of us can figure out how to modify the header and footer areas in applications without even reading any documentation just by looking for such file names.

As for favicons and changing the layout of the forum, that sort of stuff doesn't interest me so much as being able to just easily make, and maintain, header-footer changes. I think the current design is superb and allowing changes to it would probably just result in confusion, to both maintainers and users. You could do similar to Phorum and allow color code changes to be made in a settings file.

----

head file gets included just prior to the closing HEAD tag.

header file gets included immediately after opening BODY tag.

footer fle gets included just prior to closing BODY tag.

append delete #10. Jose Pedro Arvela

Most people want to change the header and footer. Since a forum is usually part of a larger site, there needs to be an easy way to change these areas

I disagree, I think this intention is the result of the current forum suites, that have such convoluted ways of theming that people just try to make the smallest changes possible that allow them some distinct look (phpBB, for example, has over 50 html files to edit, none of which are clear over what they do besides overall_header.html and overall_footer.html, resulting in only the header and footer being easier to change).

From what I see in your suggestions, all of these changes are possible with a custom theme (which can be made simply by copying the existing theme and modifying the code). By making a theme that structurally resembles your other software's themes, you can simply use your site's stylesheet instead of the one built in.

To prevent overwrites during upgrades, two approaches could be used, or both. [...]

If instead of editing the default theme you make a copy to a new folder it will be kept between upgrades.

(e.g., for links pushing back to the main site, etc.)

I like this, as people sometimes like to include links, but I think this could be made in a more simple way, by having a simple navigation.txt formatted as

% navigation.txt
http://example.com/ Link Name
http://camendesign.com Another Link
%

And if this existed, an actual navigation would be appended to the page (with its structure defined in the theme, in the same way the about.html is included only if it exists).

Remember that the idea of this theming system is to be able to edit and preview the changes without having to run any apache server and to be able to edit it as easily as if it was an html page. Having to resort to includes would break this.

Furthermore, it still wouldn't integrate at all with other systems because these either have arbitrary php code that wouldn't work here (Wordpress, for example) or arbitrary styling code that would break the HTML (phpBB, for example), thus having to make you always have to change each software's theme individually.

You could do similar to Phorum and allow color code changes to be made in a settings file.

This is already made by the form of override stylesheets you can use. I don't know if an example one which changes the colors is included by default, but including one isn't something hard to make nonetheless, and would be as easy to use as a settings file.

append delete #11. Megan Williams

Hi
The heading text is coming out black and the comments made is a purple colour, which does not go with my green background. How do I change the colour of the headings on each page and post and also change the comments colour?

append delete #12. temmy

hmmmm

append delete #13. temmy

okk

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn