This guide covers our old ProBoards v4 software. Click here for the ProBoards v5 Help Guide.
As the forum administrator, you have the option to modify the colors and images of your free forum as well as create new color schemes, called Skins. If you create more than one skin, members can select which they'd like to use while viewing the forum. In the Skins / Forum Colors section of the admin panel, you'll be presented with the following 5 links:
1. Create Skin
Here you can add color schemes to your free forum by creating new, unique skins. On the Create Skin page, you'll see two links at the top of the page followed by a list of options. The links titled Forum Colors Example and Popup Window Colors Example provide samples of what a discussion forum might look like when modifying the features described below.
Forum Colors: From this section you'll select the colors for text and various visual elements of the forums new skin.
Skin Name: This will be the name of the skin members see when selecting a new color scheme. It will also display in the drop-down menu on the Modify Skin and Delete Skin pages.
Logo URL: When used, logo images appear in the top-left corner of the discussion forum. To insert a logo, the image will first have to be stored with an image host. Once the image is hosted, find the Direct Link or Direct URL assigned by the image host and copy/paste that URL into this box. Leave the box empty if you don't wish to use a logo.
Font: You can also define a different font for each new skin. When members switch skins, fonts will change with the skin selections and will be applied to all text on the discussion forum, including posts. Specify the font you'd like, but keep in mind, others will need the font installed on their computers to view it. Below is a list of web-safe fonts that should display to all members of the forum:
- Times New Roman
- Comic Sans MS
- Courier New
- Lucida Console
Background Color: The color entered here will appear in the background of the entire forum when this skin is applied. Enter a 6-digit hex color code or click the Color Chart link to select a color. In the Color Chart, click the color you'd like and the 6-digit hex color code will be applied automatically. Optionally, if you can't find a color you like on the Color Chart, search the web for the term web color chart. Some sites will even provide a color generator allowing you to create the color you want. Just copy the 6-digit numeric code (without # symbol) and paste it in the box.
Background Image URL: To use a background image on your free forum, the image will have to be stored with an image host. From the image host site, find the Direct Link or Direct URL assigned to your image and copy/paste that URL into this box. When the skin is created, the image you've provided will display across the forum as the new background image for this skin. Leave this field blank to keep the default background.
Auto Gradients: Gradient refers to the blending of two or more colors, fading from one color to the next. With Auto Gradients enabled, forum skins will use these color selections to produce gradients in the title bars of the discussion forum. Feel free to experiment with this option as it can always be enabled/disabled on the Modify Skin page after the skin is created.
Gradient Height: With the Auto Gradients feature enabled, the value for the Gradient Height allows you to adjust the height of the gradient in pixels. By default, the value is set to 27px but can be changed to match your preferences. You can always re-adjust the value in the Modify Skin area.
Hex Color Codes and the Color Chart: The remaining options on the Create Skin page also need to be filled out to complete the creation of the new forum skin. Each color option requires a 6-digit hex color code indicating the color you want to use. If you don't know the code for a specific color, click the Color Chart button, choose a color, and the code will be entered for you. Optionally, if you can't find a color, search the web for the term web color chart. Some websites will even provide a color generator allowing you to create the exact color you're looking for. Just copy the 6-digit numeric code (without # symbol if provided) and paste it in the box.
Text Color: This option changes the default color of almost all text displayed on the discussion forum. The only text color not changed would be for text links.
Link Color: Text links will display in the color chosen here, enabling users to differentiate links from regular text in forum posts.
Active Link Color: When users click on links, they'll display in this color. The moment the mouse button is released, the link color will change to the Visited Link Color.
Visited Link Color: Previously clicked links will display in this color to notify users they've already visited the page represented by that link.
Title Background Color: The color selected here will display as the background color of title bars throughout the discussion forum. Click the Forum Colors Example link at the top of the page for a sample of a Title Background Color.
Title Text Color: This is the color displayed for text in the title bar. You'll want to select a color different from the Title Background Color to make sure the text is readable.
Category Background Color: Categories on the main page of the forum will display with this background color.
Category Text Color: This will be the text color displayed in category titles on the main page. Set this color different than the Category Background Color to make sure the text is readable.
News Title Background Color: With the forum news fader enabled, this background color will display in the News bar, just above the scrolling news.
News Title Text Color: With the news fader enabled, the text in the news fader title bar will be displayed in this color. To ensure readability, choose a color different than the News Title Background Color
News Background Color: With the forum news fader enabled, the color chosen here displays as the background color for the scrolling news items.
News Text Color: With the news fader enabled, news item headline text will display in this color. To ensure news items remain readable, set this to a color different than the News Background Color.
Window Background Color 1: The color set here affects how various forum items display such as the background of boards listed on the main page, as well as the background of threads on the thread listing page. Click the Forum Colors Example link at the top of the Create Skin page for an example.
Window Background Color 2: Color selections here also affect the display of forum items, such as the Topics and Posts count on the main page, as well as the Started By, Replies, and Views columns on thread listing pages. Click the Forum Colors Example link at the top of the page for an example.
Board Highlight Color: This option changes board Highlight colors as users mouse-over boards on the main page of the discussion forum. This feature temporarily changes background colors to indicate which board the user would be taken to if clicked.
Thread Highlight Color: This option changes thread Highlight colors when you mouse-over a thread inside of a board on the forum. This temporarily changes the background color of a thread to indicate which thread the user would be taken to if clicked.
Table Border Color: This color option allows you to change the color of the border around the forum. The border frames the discussion forum and can also be seen framing boards on the main page, as well as framing threads inside of the message board.
Popup Window Colors: The options provided here modify the colors of various pop-up windows such as the window that's generated when the Search button is clicked. Click the Popup Window Colors Example link at the top of the page for an example of the changes.
Background Color: This option changes the background color in the pop-up window.
Text Color: All pop-up window text will be displayed in the color set here. To ensure pop-up window text remains readable, make sure to set this to a color different than the Background Color.
Title Background Color: This will be the background color of titles displayed at the top of pop-up windows.
Title Text Color: Pop-up window title text will display in the color selected here. To ensure title text remains readable, set this color different than the Title Background Color.
Once you've filled in all required boxes, click the Create Skin button at the bottom of the page. The new skin can then be applied from your profile. To do this, click the Profile button at the top of the discussion forum, then click the Modify Profile link. There you'll find the Select Skin option about half-way down the page; click the drop-down menu and select the new skin. Click the Modify Profile button at the bottom of the page and you should be viewing the forum in the new skin.
2. Modify Skin
The Modify Skin link in the Skins / Forum Colors section of the admin panel is where you can modify skins that have been made previously for the forum. Click the Modify Skin link and you'll be presented with a drop-down menu listing the forum skins that are available to modify. Select the skin you'd like to modify and click Continue. You'll then be taken to the Modify Skin page. Make your changes and click the Modify Skin button at the bottom of the page to save.
3. Delete Skin
This is to be used if you ever want to delete a sking that has been created for the forum. Click the Delete Skin link in the Skins / Forum Colors section. Then, on the next page, select a skin from the drop-down menu and click the Delete Skin button at the bottom of the page. Skins cannot be recovered once removed so be sure to double check before clicking. To delete the discussion forums default skin, you'll first need to assign a new default skin by clicking Set Default Skin on the previous page.
4. Set Default Skin
If the forum has more than one skin, you can set a default skin that will be viewed by new members and visiting members that are not logged into a member account. Simply select a skin from the drop-down list and click Continue to finish. Existing forum members will not be forced into this new default skin, rather, they would have to manually select it on their modify profile pages for it to be displayed to them.
5. Customize Images
This area allows you to change most of the forums default graphics. To change graphics, you'll first need to host the new images with an image host (Photobucket, Flickr, etc.) who will provide Direct Links or Direct URL's for images stored on their site. These image Links/URL's will be needed to replace the default graphics on the discussion forum.
Once your image(s) are properly hosted, click the Customize Images link and select a skin from the drop-down list. Next, click Continue and you'll be taken to the Board Images page where you will be able to change images. The Board Images page is separated into 12 categories:
Board Images: This section has two useful options for restoring forum graphics back to their original state. The Update my icons to the new set! button restores images using the new set of default icons. You'll also see a sentence that reads If you wish to reset all of your images back to their defaults, click here, where click here is the link. Note: while forums created 2010 and later use the new set of icons, clicking the link mentioned above will restore defaults with images that were used prior to 2010.
To change default forum images, paste the URL supplied by your image host in the box to the right of the image that you are looking to replace and then click Save Changes. Once the images have been updated, the forum software will use the URL's you've entered to display your images. Below is a list of default forum image categories:
Menu Icons: Images displayed here are the menu buttons found at the top of each page of the discussion forum.
Folders: Images displayed here indicate various meanings including locked folders, sticky threads, hot threads, and more.
Smiley Faces: Displayed here are the default forum smiley images. Changing these will also update smileys used in previous posts. The smiley listed at the bottom of this category isn't a default smiley image, rather, it's the Laugh icon you can select when creating a new post or thread.
Instant Messages: The images here display when users view the Personal Message Inbox/Outbox for their account.
Stars: Listed here are the default stars found in a users main and mini forum profiles. Star icons can be seen to the left of posts, just below member display names.
Message Icons: This is the main category of images used throughout ProBoards free forums. Also displayed are images for various admin functions as well as images used in the Reported Posts area.
Post Page Icons: Displayed here are the BBCode images used when creating a new post or thread and can be found in the Add Tags area on the posting page.
Topic Icons: Topic icons can be used when creating a new post or thread and can be found in the Message Icon area of the posting page. Topic icons display immediately to the left of posted thread names.
Profile Icons: Profile icons display on member main profile pages as well as their mini profiles to the left of each post they submit. Profile icons also display while forum members engage in instant messaging.
Misc. Icons: Images here are used primarily in the Info Center at the bottom of the main page.
Percentage Bars: These red images are sections of the Warning bar used to warn forum members for dubious behavior. The blue are pieces of the percentage bar used in poll topics. Both bars are sectioned into 3 pieces which can be replaced individually to give the bar a new look.
Once you've modified your images, click any of the Save Changes buttons found on the page. Visit various areas of the forum to confirm the changes.