Looking For Something?

Forum Toolbar

Purpose

Adds a WYSIWYG or BBcode toolbar to the forum.

By default, the text area used by members to add forum posts and replies is a plain text box.

With this extension, you can add icons above this text area to give formatting options.

The most likely is the WYSIWYG (“What You See Is What You Get”) version, but if you prefer you can use a BB Codes toolbar.

This probably depends on the type of user of your website.

After activating, a new section is available via WPS Pro->Setup called “Forum Toolbar” which allows you to choose the style of your toolbar and, if you are using the WYSIWYG version, which icons will appear on your toolbar.

If made available, buttons will also appear on the text mode (recommended to administrators only or not at all).

The visual mode will automatically expand height of WYSIWYG editor as content fills the text area. You can set the default height of the WYSIWYG editor via WPS Pro->Setup->Forum Toolbar.

WYSIWYG editor

Screenshot_24

BBcode editor

Screenshot_25

Availability

Provided in the Extensions Plugin.

Customising

Options are only available via WPS Pro->Setup. There is no shortcode for this feature.

Via setup, you can select the style of the forum, and if using the WYSIWYG style, which buttons to show.

Whilst the Visual/Text tab is always shown to site administrators (“just in case”), it is not shown to users. However, you can choose to show it to everyone if you want to. However, this is not recommended at all as is likely to just cause you problems!

Styling the Forum Toolbar

You can enter custom CSS (via WPS Pro->Setup->Custom CSS) to change the colours of the toolbar. Here is a psychedelic set of styles that you will probably want to change! Note that the !important is required.

/* button background */
.mce-btn { background-color: red !important; }
.mce-btn:hover { border-color: black !important; } 

/* active button background */
.mce-active { background-color: blue !important; }

/* button text */
.mce-ico, .mce-txt t { color: yellow !important; }

/* toolbar background */
.mce-container-body { background: orange !important; }

Which will produce:

Screenshot_5

You may need to properly refresh your browser to see the changes (CTRL+F5 on Windows, for example).

Styling the Editor

You can also change the default styling of the editor area.

The best way (so your changes are kept when upgrading WP Symposium Pro) is to change the path in WPS Pro->Setup->Forum Toolbar, taking a copy of the default file for your new copy:

Screenshot_2

You can then add CSS to that file safely between plugin updates.

If creating your own file, depending on your site configuration, you may need to include !important in your CSS. Read more about !important here…

For information, the file included in WP Symposium Pro is:

...path-to.../plugins/wp-symposium-pro-extensions/wps-symposium-pro-forum-toolbar/editor_styles.css

As an example, you might want to replace

p { 
    font-family:arial,helvetica,sans-serif;
    font-size: 1.4em;
}

with

p { 
    font-family: courier,arial,helvetica,sans-serif;
    font-size: 2.0em;
    color: red;
}

to make the font courier, the font size larger, and red.

If editing the default file that is included within WP Symposium Pro, it is vital to take a copy of your changes, as this file is reset when you upgrade the WP Symposium Pro Extensions plugin. You will need to put your changes back in!

It is highly recommended that you take a copy of the default file, put it in a safe directory on your website, and change the path as shown above via WPS Pro->Setup->Forum Toolbar.

Sidebar