Styling your forum

Advanced Forum has a style plugin system to allow you to completely customize the look of your forums. You can use one of the provided styles as is, modify it, or make a brand new style. The module currently comes with these styles, though more are planned:

  • Naked: This is the default style. It has minimal CSS, mostly used for positioning, and is designed to make use of your theme's CSS as much as possible. It is designed as a base to build on and in D6 is the only style with a complete set of files. All other styles include only files that are changed from Naked.
  • Naked Stacked: Looks the same as Naked except with the author information pane on top. Good for narrow themes.
  • Blue Lagoon: Named after the default Garland colorset from which it gets its colors, this will look good in Garland or themes with similar blue colors. The colors used are explained at the top of the CSS file so you can just copy and paste in a text editor to get a new color scheme.
  • Blue Lagoon Stacked: Same as Blue Lagoon except with the author information pane on top. Good for narrow themes.
  • Boxy: A slight variation of Naked that includes grey borders and some background greys.
  • Boxy Stacked: Looks the same as Boxy except with the author information pane on top. Good for narrow themes.

Using an included style

D5 Locate the style you wish to use in the "styles" directory of the advanced forum package. Copy the entire directory into your theme's directory. If you are using a subtheme, copy it there. Then navigate to ?q=admin/settings/advanced-forum and enter the name of the style you are using.

D6 Navigate to ?q=admin/settings/advanced-forum and choose a style from the list.

Making slight alterations

D5 The style is already in your theme directory so you can simply make your changes there. If you are only making minor CSS changes, you may find it easier to make the changes in your style.css instead. style.css comes after Advanced Forum's css and so you can just override the forum styles.

D6 Copy any .tpl or .css files you want to change to your theme directory. Drupal will automatically find and use these instead of Advanced Forum's. If you are only making minor CSS changes, you may find it easier to make the changes in your style.css instead. style.css comes after Advanced Forum's css and so you can just override the forum styles.

Creating a new style

D5 Create a new directory in your theme, place all the style files in there, then navigate to ?q=admin/settings/advanced-forum and enter the name of the style directory you are using.

D6 Because of the way the new plugin system works, you need a module to create an entirely new style. This is only needed if you need the same style to work with multiple themes. Otherwise you can get the same effect by simply copying all the style files into your theme and editing them there.

D7 Skip the instructions below and see instructions on the other Advanced Forum Styles doc instead.

If you already have a site specific module, you can use that or you can create a new one. The style directory must be placed as a subdirectory of the module directory. To let Advanced Forum know about your new style, add this hook function to your module:

function MODULENAME_advforum_styles() {
  $items = array();
  $items['newstyle'] = array(
    'directory' => 'path_from_module_root/newstyle',
  );

  return $items;
}

Be sure to clear the site's cache. You can then navigate to ?q=admin/settings/advanced-forum and choose your new style from the list. Your style only needs to include changes from the "naked" style as advanced forum will look there if it doesn't find the file it needs in your style.

Preprocessing

You can change the variables that are sent to the .tpl files the same way Advanced Forum does it: use the preprocess functions. In your template.php, add THEMENAME_preprocess_HOOKNAME(&$variables) and modify the variables after Advanced Forum processes them and before they go to the theme. See the handbook page on preprocess functions for more information.

Preprocess functions can also be called from modules. If you have a custom module for your styles, you can add preproces code there. Note: Advanced Forum sets the module weight to 10 to come after core forum so your module needs a higher weight if you want your preprocess to run last.

Images

Styles come with a set of images, listed below, and also a set of blanks to assist you in making your own. The "naked" style has a desaturated set for easier recoloring. The "blue_lagoon" style has a blue tinted set that looks good in many themes.

Advanced Forum will automatically pick up on .png images for the links section of posts if you give them the same name as the key for that item in the link array. To find the link key, go to function _advanced_forum_buttonify_links and add print $link_key . "<br />"; right after the line that says default:. Then go to any forum thread and it will print the options at the top. It should be pretty easy to find from there.

Alternately you can use the link text, all lower case, with hyphens instead of spaces. This is less reliable than using the key due to possible problems with accents, etc, but can be used in cases where one link key changes text such as a toggle.

The font used on the included buttons is fruitiger 55 roman.

Files included in default styles

The default Advanced Forum style files are identical in 5.x and 6.x so this applies to both. If you create a style from scratch, you need these files. Warning: the files included in the module package are currently encoded as ANSI and will need to be converted to UTF-8 if you add non ANSI characters. See #384180: Files encoded as ANSI for details.

  • advanced_forum.css - Holds the CSS for colors, images, and fonts .
  • advanced_forum-structure.css - Layout, padding, and other structure.
  • advf-author-pane.tpl.php - Author information pane on forum posts.
  • advf-comment-wrapper.tpl.php - Wrapper around the comments section. Does not work in Garland due to a Garland bug.
  • advf-forum-icon.tpl.php - Forum topic icons (hot, locked, new, etc).
  • advf-forum-list.tpl.php - Table listing the forums.
  • advf-forum-preview-post.tpl.php - Used for styling the preview of a post.
  • advf-forum-post.tpl.php - Individual forum posts, both nodes and comments.
  • advf-forum-repeat-post.tpl.php - Used as the template for the node when repeated on pages after the first.
  • advf-forums.tpl.php - Forum list and topic list pages
  • advf-forum-statistics.tpl.php - Statistics section.
  • advf-forum-submitted.tpl.php - Last topic information on forum list page as well as last update on topic list page
  • advf-forum-topic-list.tpl.php - List of topics in a forum
  • Images (might vary between styles):
    • buddy-add.png
    • buddy-remove.png
    • contact.png
    • container-close.gif
    • container-open.gif
    • delete.png
    • edit.png
    • forum-folder.png
    • forum-folder-locked.png - Not yet used.
    • forum-folder-new-posts.png
    • locked-topic.png
    • mark-read.png
    • new-poll.png
    • new-topic.png
    • pager-bg.png
    • post-reply.png
    • private-message.png
    • quote.png
    • reply.png
    • SOURCES.txt - List of icons and who created them.
    • topic-closed.png
    • topic-default.png
    • topic-hot.png
    • topic-hot-new.png
    • topic-new.png
    • topic-sticky.png
    • user-offline.png
    • user-online.png

Additional styles

Below are styles that have been made by others that aren't included in the project tarball. They may be supported by their authors but they

Guide maintainers

michelle's picture