Custom Skins & Colors

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:

Verdana

Times New Roman

Comic Sans MS

Arial

Courier New

Tahoma

Century

Autumn

Lucida Console

Rockwell

Scribble

Trebuchet

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.

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.

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.