© Smangii.ProBoards.com -- Please, do NOT post this on other forums

Well, needless to say this is a very long and very, very overdue tutorial on how to make a simple, but effective ProBoards Skin for nearly any forum. This is a large compilation of what I found appropriate to mention when customizing your skin, and tips and tricks that I have gathered over the years. I hope many newcomers find this tutorial useful for making their newly created ProBoard their own!

All images are hosted on PhotoBucket, so if there is any downtime I apologize but unfortunately it is out of my control.

Warning for slow internet users: Lots of images ahead! (I got a little overboard...but that's a good thing, right?)

What is a SKIN?

---

First of all, in my definition a skin consists of the very basic changes to the default ProBoard layout. Not every image and aspect of the default design needs to be customized or changed, just the major components that give the overall design a much cleaner, nicer, and unique feel.

So, I took the time to register myself a test forum that I will show step-by-step how to customize. This is my registered forum and this is the default ProBoards layout currently for version 4.5 :



Preeeeetttty boring with all that white, black, and blue!
Let's get customizing!

First things first is just HOW to change the colors on a ProBoards Forum.

Once you are logged in (as the admin) head over to your section and find this:



You'll be spending quite a lot of your time here, so get used to clicking!

Now, I advise you to select the Modify Skin option because every color is already entered into the boxes. The tricky thing with color editing is that all boxes must be filled with a color -- even if you haven't decided what color you want to use just yet. Modifying the default skin puts a slight advantage over time and saving yourself from rushing into color options, and errors

Now, just follow these steps to get there:




And we get to a page with a lot of boxes, numbers, and text. Complicated? Not really!

Tip For Newbies!
If you are very new to ProBoards you probably aren't familiar with what a Category Background or a Window Background 1 is. Which is why I advise you to study the ProBoards guides that are given to you, right at the top of the Modify Skin Page:

The colors work like this; a 6 digit letter and number code (called a HEX number) is translated into a specific color by the computer.

For example take a look at this image below.
The HEX number 000000 is the color black.
The HEX number 006cb7 is this color blue.



To get more colors, you can click the icon beneath the HEX number box, or visit a couple of my favorite color schemer sites:

• ColorSchemeDesigner.com
  
• ColorSchemer.com
  
• The 2nd Color Scheme Generator
  

It's smart to go with a LIGHTER themed skin if you want to aim for readability and cleanliness.

It's smart to go with a DARKER themed skin if you want to stick with the subject matter of your forum or if you are generally bad at choosing light color schemes.

Alright, so I got some colors picked out that I want to use! The sample scheme I'm gonna choose is this:



Now, it's up to deciding which colors should be used where. This can be both a guess and check or plug-it-in-and-see-what-it-looks-like for those experimentists out there, or you can create a general idea, like I did here:



I want a LIGHT GRAY background.
I am going to form a GRADIENT between the BLUES
I am going to form a GRADIENT between the GRAY and WHITE.
The ORANGE will be used for titles of categories and such.
The BLUES will be used for links and board names.

If you wish to use these color scheme yourself, the HEX numbers are as follows:

The Gray: #c0c0c0
The Dark Blue : #26598a
The Orange: #fd8865
The Light Blue: #257087
White: #FFFFFF (white is always this HEX number)

For Windowbg 1 and Windowbg 2 I decided to choose #e6e6e6 and #f9f9f9, just to vary the grays a bit.

Simply plug the numbers into the boxes next to the area you wish you change, and then scroll down and hit that "Modify Skin" button to see your changes! (May require you to refresh your browser)

The background is a very important element in designing a forum skin. It's simple to change, and every forum should have some element of a background instead of that nasty default white.

On the Modify Skins page, ProBoards sets you up with 3 different options for modifying your background.



Background Image Color is just as it is, put in a HEX number and the background will change to that color.

Background Image URL is a place where you can put the link to a background image you really like. This can be something as big as a wallpaper, or a small image that gets repeated and creates a patterned background.
BY DEFAULT, THE BACKGROUND IMAGE YOU PLACE IN HERE WILL BE REPEATED IN ALL DIRECTIONS.

Background Image Fixed is the option to make your background picture static, stationary, or stand-still. When you scroll down the forum, the background image will not move if this option is set to YES.

These three options are perfect for any beginner, and for a simple background. Personally, I believe a simple, well-designed skin should have a simple, patterned background that is fixed.

Here is a simple gray pattern based off the color I chose earlier:



The result of this image in the background looks like this:



Or, a smaller image can create a very textured effect.
This image --> Creates the following metal texture effect:



I'm going to stick with this pattern -->
Looks something like this:

Gradients are mostly a matter of preference. They typically look very nice in adding some depth to your design, as well as some innovation. There are many types of gradients out there, but typically a gradient is ONE color, gradually fading into ANOTHER color.

This is my dark blue to light blue gradient:
This is my light blue to dark blue gradient:

Some gradients can look a little fancier:



They look very appealing when placed as the title background, menu background, or category background. In order to do this, you need a very simple code that goes into your GLOBAL HEADERS.

Simply replace bG_URL.jpg with your own URL of your image.


<style>
.titlebg { background-image: url(BG_URL.jpg); }
.catbg{ background-image: url(BG_URL.jpg); }
.menubg { background-image: url(BG_URL.jpg); }
</style>


Tip For Newbies!
If you are very new to ProBoards I suggest that you use the Auto Gradients feature that comes with your ProBoards Forum. Go to your Admin Panel and click "Skin/Forum Colors" then go to the "Modify Skin" page where you modify your skin colors. It creates a gradient for you, so you do not need an image program to create one. Very handy, all you have to do is set the option to "Enable".

Head over to your section and find the link that says Headers and Footers. It should be above the "Skin/Forum Colors" link. Use the drop down to select Global Headers/Footers



And then click Continue.

You will see two boxes, one for Global Headers: and one for Global Footers: This is where you will input most of your codes, and all of the codes in this tutorial.



Now, with colors and gradients and a background in place, my plain forum is beginning to look a lot better!

Even with the colors, gradients, and a background... something still seems a bit too default about it. So, I'm going to do the following "Touch Up" steps to set the final skin in place.


Adding some more depth


I'll add this gradient --> to both windowbg 1 and windowbg 2 using the following code. This will give the forum a bit more of a "bevel" or round look. Place this into your GLOBAL HEADERS.


<style>
.windowbg, .windowbg2 {
background-image: url(http://i27.photobucket.com/albums/c163/Smangii/proboards%20skin%20tutorial/windowgrad.png);
background-repeat: repeat-x;
background-position: bottom;
}
</style>


The outcome looks like this:




Changing the Border Color


Some forums can very much benefit from having the border color changed. Most of the time, I find the black a bit too overpowering and dominating. It gives things an "edgy" and "boxy" feel. So, I'm going to change the border color to a more medium gray to match my color scheme.

The color choice I picked was HEX number 9A9A9A.
You can see the difference it makes:



Furthermore, some forums can benefit from having no border at all. A simple Javascript code can handle this, place this in your GLOBAL FOOTERS.


<script type="text/javascript">
var table = document.getElementsByTagName("table");
for( i=0; i<table.length; i++ ) { table[i].cellSpacing="0px"; }
</script>


A preview of this:



I will continue to have a border, and will instead add some CSS tweaks that will really bring out the color in my forum. (It's looking a little gray).


Adding Accent Lines


First, I'm going to edit the Title Background with a little bit of coding. I will add a border on the bottom, using the same Orange color from my original scheme. Then, I will add a lighter blue border on the TOP of the title background to make it sort of "shine".

Here is the code I used, just place this in your GLOBAL HEADERS. Be sure to edit the colors for your liking, too!


<style>
.titlebg { border-bottom: 2px solid #fd8865; border-top: 1px solid #dbe9f5; }
</style>


See what my titlebg looks like:



Now, I will apply a similar affect to my category background. I will add a border to the bottom, white in color.


<style>
.catbg{ border-bottom: 1px solid #FFFFFF; }
</style>


Lasty, for a final touch I will add a border to the right of the windowbg 1 and windowbg 2.


<style>
.windowbg, .windowbg2 { border-right: 1px solid #FFFFFF; }
</style>


Just see the difference adding simple lines can do:

Now, our forum content may look a bit nicer...but another major component of a skin is the banner. The banner is this portion of your forum:



ProBoards has the option in which you can add a Logo to your banner, which will replace the Forum Name.

Once again, let's go to the Modify Skin page. Where all of those boxes are to change the colors, there is an option near the top called Logo URL:



For an example, I have created this logo which I will use:



So, I'll enter it into the text box and click Modify Skin. Refresh, and this is what my forum now looks like:



Personally, I believe having that « Home » below the logo image is a bit useless. So, with a bit of code, this can be easily removed. Place this code into your GLOBAL HEADERS.


<script>
document.getElementsByTagName('font')[1].style.display="none";
</script>


Now, if you haven't already noticed, the box behind the banner hasn't changed color. It's still white and boring. To fix this, we add a simple code to the GLOBAL HEADERS. I want to customize the banner so that my logo stands out.

In this code, I changed the background color to #e6e6e6. I added the same background image as the windowbg1 and windowbg2. I also added the same borders as I did to the titlebg. Finally, I moved the logo to the left so there is no space.


<style>
.welcomebg {
text-align: left;
border-top: 1px solid #dbe9f5;
border-bottom: 2px solid #fd8865;
background-color: #e6e6e6;
background-image: url(http://i27.photobucket.com/albums/c163/Smangii/proboards%20skin%20tutorial/windowgrad.png);
background-repeat: repeat-x;
background-position: bottom;
}
</style>


The result looks like this:




USING A WIDE LOGO/BANNER


Maybe you want a larger logo to take up the whole banner? This is a common idea and a smart design decision. But, it will require you to remove the Hey, You have Messages... to the right of the banner and the « Home » below the logo.

Just place this code into your GLOBAL HEADERS:
It removes both parts as mentioned above.


<script>
document.getElementsByTagName('font')[1].style.display="none";
document.getElementsByTagName('td')[2].style.display="none";
</script>


Now, our banner looks like this: (with no logo added)
With these codes added, the logo is centered.



The wide/larger banner I made is 600 pixels wide. You can make it as large or as small as you want, 800 pixels is a common width as well.



Plug it into the same Logo URL: spot under the Modify Skins page, and here is my result:



Now, there are two options to get ride of the white spaces to the left and right of the image.


Option 1


Resize the welcome table. Doing this will also resize the menu bar. Use this code in your GLOBAL HEADERS.

You'll want to resize it to the size of your banner/logo image. Just change the amount.


<script>
document.getElementsByTagName('table')[0].style.width='600px';
</script>


Here is what this code looks like when used:




Option 2


The second option is to use a code to set a background behind the logo, so that it blends almost as one very large image.

I'm going to use this image for the background:
That way, it will go behind the logo/banner and match it as well.

Use the following code in your GLOBAL HEADERS.
In this code I also added the same lines as I did to the titlebg, the light line on the top and the orange line at the bottom.


<style>
.welcomebg {
border-top: 1px solid #dbe9f5;
border-bottom: 2px solid #fd8865;
background-color: #e6e6e6;
background-image: url(http://i27.photobucket.com/albums/c163/Smangii/proboards%20skin%20tutorial/rpeatbg.jpg);
background-repeat: repeat-x;
background-position: bottom;
}
</style>


Here is what this looks like. Again, you are free to remove the borders or change the colors as you wish.

Don't have the program, patience, or time for some fancy menu buttons? No problem! There is a simple way to create menu buttons without actually having images.

Firstly, Go to the Panel and click General Settings. Next, find the Text Menus option and select it to YES.




Remember to Save Settings at the very bottom, and refresh your browser to see the changes.

This is what my forum menu looks like:



Second, we will need a code that removes the brackets [ ] around each menu item. Unless of course, you like them.

Place this code in your GLOBAL HEADERS


<script type="text/javascript">
var menu = document.getElementsByTagName('td');
for(e=0; e<menu.length; e++){
if(menu[e].className.match(/menubg/i)){
menu[e].innerHTML = menu[e].innerHTML.replace(/(\[)/gi,'');
menu[e].innerHTML = menu[e].innerHTML.replace(/(\])/gi,'');
}}
</script>


Here is what the menus look like without the brackets:



Third, we need some more coding to fix up the menus to actually look like "buttons". I will add a gradient background, a white border, and change the text color to white using this code in GLOBAL HEADERS. I will also make the height of the menu up to 30 pixels so the buttons fit.


<style>
.menubg {
height: 30px;
}
.menubg a, .menubg a:visited  {
background-image: url(http://i27.photobucket.com/albums/c163/Smangii/proboards%20skin%20tutorial/grad2.jpg);
padding: 5px;
border: 1px solid #FFFFFF;
color: #FFFFFF;
}
</style>


Here is what our menu buttons look like now:



We can add a bit more coding to add a rollover effect or a hover effect, to the buttons. I want the text to turn to the Orange I chose earlier, and there to be an orange border at the bottom of the button. I will also remove the underline-overline default ProBoards rollover for a link.


<style>
.menubg a:hover {
text-decoration: none;
border-bottom: 2px solid #fd8865;
color: #fd8865;
}
</style>


Here is an example, the "Members" button is being rolled-over.

For those of you that are already familiar with my Border Around Forum code, that is more than welcomed to be used and tweaked to suit your forum's needs. I would recommend checking it out and seeing examples of what that code exactly does.

But for right now, I will introduce a simpler and still effective way to add a "Second Background" or a border around your forum. This code comes in two parts of very, very simple code.

The first part goes into your GLOBAL HEADERS.


<style>
body {
text-align: center;
}
.secondBackground {
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 92%;
}
</style>
<div class="secondBackground">


And be sure to add this closing tag into your GLOBAL FOOTERS


</div>


You can edit this code by changing the colors, width, or removing the border-radius codes.

"-moz-border-radius", "-webkit-border-radius" and "border-radius" add a ROUNDED effect to the corners of the background.
ROUNDED BORDERS IN THIS CODE WILL ONLY WORK IN MOZILLA FIREFOX AND GOOGLE CHROME, NOT INTERNET EXPLORER! They will just appear as corners.

Here is a preview of this code on my test forum in Mozilla Firefox, with rounded borders:



And here is the preview of this code in Internet Explorer, without rounded borders:



To edit the background color, find this part:

background-color: rgba(255,255,255,0.5);

Now instead of HEX numbers, you are entering the RGB values of the color you wish to chose. It is three numbers, ranging from 0 to 255. The first number is the "R" value, the second is the "G" value and the third is the "B" value. The fourth number, in this case it is 0.5, is the opacity. How transparent do you want the color to be? 0 Is completely invisible, and 1 is 100% visible. So, this color will be half-transparent.

I especially like ColorSchemer.com because they give you the RGB values for any HEX number you enter.

I entered the HEX number #26738a for my lighter blue that I chose, and got the RGB of 38, 115, 138. I am also going to lower the opacity to "0.3" instead of "0.5". Here is my result:



Finished! My simple skin is now complete. A much better improvement from the default blue and white. Here are the two skins side by side: