< Disappearing List Icon | Basic Codes for your ProBoards >
28 May 2006 > 94 Comments
If you have never used Proboards before you may require a bit of extra help installing your template. This Proboards template tutorial should help you if you get stuck. If you have any further problems leave a comment below. Please don’t ask me to install the skin though.
All of my Proboard templates come with instructions inside the text document file (notepad) explaining how to use them.
At the top of every notepad It tells you the name of the template, when it was made, and who created it (that would be me every time).
I also ask that the link back to my site remains intact.
It will help to familiarize yourself with the Admin Control Panel a little bit.
Click on the Admin button in the menu bar, and look under customize your forum, and select skins/forum colors.

This will take you to the Skins/forum colors page, where you are presented with five options.
Click on Create new skin.

This will take you to the Create skin Page.

You will find all the required colour codes in the template’s text document.
You need to be careful at this point and make sure you have filled in all the required fields. Also make sure all six digits for each of the colours are inputed correctly, otherwize when you press Create Skin, you’ll end up with this

If this happens, just click back, and carefully check all the colour codes. If you have entered all the hex codes correctly everything will work. All of my templates have been used and tested, so there are no mistakes in the notepad file.
Click Create Skin and you’ll be taken to this page

In order to view the skin go to profile (in the menu bar) > modify profile and look under Account Preferences, select your newly created skin from the drop down list, and press modify your profile.
Alternatively, you can go back to admin > customize your forum > skins/forum colors, click Set default skin and set your new skin to default, in the dropdown list.

Before you can put the images on your forum you need to host them first. If you do not have your own host, I recommend you create a free Photobucket account. I’ve used them since 2004-06-30 and they are very reliable, and allow tons of hosting space (1 GB), and quite large file sizes (1024 kb).
Photobucket recently upgraded their service, and for a while image files larger than 1mb (and larger than 800 x 600px) were resized, causing some of my background images to shrink. They have now semi-fixed this problem, and you can upload images (for free) up to 2mb (up to 1024 x 768) This means that some of my bg’s are still to large, so check before you try uploading them (Read more…). As an alternative you can host the bg’s at ImageShack or Ripway.
Go to admin > customize your forum > skins/forum colors, click Customize Images.

From the Customize Images page, select the skin from the dropdown list, and press Continue.

This will take you to the Board Images page. Here there are 11 image catagories each one corresponding with an image folder in the template download.

Once you have your images hosted, copy and paste the url’s (including the http://) in each replacement image input field. Once you have all your images replaced press Save Changes.
Ok, now we can start adding the code. In the Notepad you will find the code that goes in both the global header, and global footer.
Click on the Admin button in the menu bar, and look under customize your forum, and select Headers and Footers.

On the Headers and Footers page select Global Header/Footer from the dropdown list, and press continue.

This will take you to the Modify Headers and Footers page, where you will find two large text areas named Header and Footer. Copy and paste the code from the notepad, into the global headers and footers.

Before you Save changes, you need to put in some more images into the code. You will find these images in the ‘Other Images’ folder in the template. Usually there are just two images, a category and a title image (there is in some cases a menu image too). host these images, and then replace the text (TITLE IMAGE URL GOES HERE) with the complete url (including the http://), as demonstrated below.

Press Save Changes, and we are almost done.
select skins/forum colors, and click on Modify Skin.

Select the skin from the dropdown list, and press Continue, and you will return to the Forum Colors page. You will find the Logo, and background images in the Other Images folder. Host the images and insert the complete url’s into the appropriate input boxes.

Press Modify Skin, and that’s it. You are all done
.
The template probably includes another folder called extra images. Some of these images will require additional codes and hacks, such as Head and Base images, and extra buttons, etc. Check out ProBoards Support Code database for the required code mods.
Comment on November 3, 2006 at 7:47 am
Very nice TUT! It helped me for sure!
Comment on November 3, 2006 at 2:15 pm
Glad to be of service
Good luck with your forum
Pingback on November 14, 2006 at 3:03 am
[…] How to install a ProBoards template […]
Comment on November 24, 2006 at 2:50 am
I am using your wonderful layout - and it worked out perfectly in the beginning. I am still getting used to how to do all of this, and for some reason, I now have red x’s in the middle spots on the message board, as well as some of the icons. Do you have any idea why this is? It’s driving me absolutely NUTS.
Comment on November 24, 2006 at 4:29 am
Hi Tanya, I think I might have the answer here.
Comment on December 27, 2006 at 11:38 pm
Thank you sooo much. I thought this would be impossible to do but it is so easy a computer illiterate person like me could do it.
Comment on December 30, 2006 at 4:21 am
That’s great, Ausukah. Glad it helped you. and , really, it’s not that difficult once you know your way around
Comment on January 11, 2007 at 4:26 am
Hey! I really, really love your template here, and I want to use it for my own forum! But here’s my problem: When I save my folders and such, how do I make the empty space transparent? Please reply! ^^
Comment on January 11, 2007 at 12:51 pm
Hi, White. Which template are you using? All of the icons have transparent backgrounds, already. After downloading the zip just upload them to your image host
Comment on January 13, 2007 at 4:54 am
The Green one! Could you please teach me how to upload it like that then?? Here’s my forum: http://thundie.proboards89.com/
Comment on January 14, 2007 at 1:38 am
I’m not sure what part you are having difficulty with. Do you know how to upload load images to an image host? for example Photobucket or Image Shack?
After you’ve unzipped the template folder upload all the images.
Everything else you need to know is explained in the tutorial.
If you are having further difficulties let me know:)
Comment on January 14, 2007 at 4:57 am
Yeah, I’ve checked the folder and everything, but how do I unzip it? And also, I can’t figure out how to upload it directly unless I save it to MSPaint first! >
Comment on January 14, 2007 at 5:40 am
right click on the zipped folder, and select extract all, to activate the extraction wizard.
Click next, and select where you want to put the file, and press next again. And the file should be unzipped.
To upload the images to Photobucket, first create a free account.
Once you have the account set up, look for Upload Images & Videos, and click the browse button. This will open up the file upload window.
Go to where you extracted the folder.
Click on the folders inside to view the image files, and select a file and press open.
Photobucket allows multiple uploads, but each file is added this way.
After adding the images press upload.
Then all that’s left is to copy and paste the images to the forum. I’ve explained how to Customize Images in the tutorial.
I think I’ve covered everything
oh, and you don’t need to do anything in mspaint
Comment on January 14, 2007 at 7:22 am
Wow, thank you so much! And thanks for the template in the first place!
~White
P.S. I’m curious… are we allowed to request templates here? Cause if you can make one or you can show me one I could use, I could really do with a forest-type template for my Warriors fan-fiction!
Comment on January 14, 2007 at 8:59 am
Now, I’ve uploaded most of it, but there are some bugs… I looked at your preview and all, and I uploaded the header and footer, but it still looks like this:
http://thundie.proboards89.com/
Do you have any ideas?
Comment on January 14, 2007 at 9:55 am
Oh.. I think it’s that “TABLE” thing in the footer… what do I put for that?
Comment on January 14, 2007 at 11:11 am
White, I did a template for a friend of mine a little while ago, but he isn’t using it anymore. If you would like, you can use it. It has a forest theme to it.
Here is the download
Unfortunately, I don’t have any screen caps for it. And also, you would need to have a banner made or the one included changed. But yeah. Everything else should be ok. If you have any questions regarding it, I read the comments here all the time
Comment on January 20, 2007 at 3:01 am
Thank you sooo much! It was the photobucket resizing problem… well, thanks again! huggles
Comment on January 20, 2007 at 7:09 am
no problem
Comment on February 1, 2007 at 5:45 am
Hey, it says I have the wrong codes for the colors… Why? I entered exactly the color codes you say to!
Comment on February 1, 2007 at 1:56 pm
Double check the codes, to make sure you inputed them correctly. It’s really easy to mess them up as the input field only allows for 6 digits.
If you continue to have problems, let me know what temp you are using (moosehat?), and I’ll check them out, but I’m confident that all my colour schemes work properly
Comment on February 20, 2007 at 6:27 am
I was wondering how to add those blue borders on the Perfect Mistake skin.
Also, i dont know how to insert the images placed in the zip folder..
Help?
-Thanks
Comment on February 20, 2007 at 7:10 am
Hi, Banana Man.
I’ve just noticed that the background image (the blue and red borders) was missing from the Perfect Mistake download, so I have updated the zip.
First you need to host the images and then copy and paste the links into the forum.
For the bg image check out this part of the tutorial.
For the rest of the images you need to add the image links to the header and footer code included in the download.
This temp uses different title and category images for the main index and board/threads. So make sure you place the code in the correct headers and footers, as directed in the notepad included in the download. With that in mind, check out this part of the tutorial.
Comment on February 25, 2007 at 6:24 am
Thanks!
I’m getting the hang of it now. I appreciate your help.
Comment on February 25, 2007 at 9:00 pm
No problem, Banana Man. Glad to be of service
Comment on February 26, 2007 at 7:41 am
Would u happen to know if i could shrink the size of the advertisements on my board so that it doesnt pop out of the borders? Or maybe even move it to the bottom of the page?
-Thanks
Comment on February 26, 2007 at 9:20 am
It’s against ProBoards Terms of Service to change the ad banner in any way. The most you are allowed to do is move the logo header below the ads, putting them at the very top of the page.
Comment on April 4, 2007 at 1:51 am
Hello,
Iam just a beginner with proboards and now i have learn (from this site) how to change a proboard forum, thank U for that.
Have 1 quistion can you explane me wath the things like: highlited color/background text color and all that other color codes?
my english is very poor sorry for that,members ask me to change some colors but i dont know what colors to change dont understand what codes
I hope you understand me.
bye bye
megan
Comment on April 4, 2007 at 3:53 am
Hi, megan.
If you go into your admin panel > Skins / Forum Colors > Create/Modify Skin, at the top of the page where you put the colours and stuff there are two links to forum colour guides.
I’ll give you the links here too
Also, the highlight colour is the colour of Window background 2, that shows up when you hover with the mouse.
The colour codes are the six number codes you add when creating/modifying a template. For example ffffff (is white), and 000000, is black.
The important thing is watch out for when adding these codes (known as hex codes), is not to include the hash symbol (#), otherwize you will get an error.
Here are some links to some online hex code generators:
Colour Schemer Elvan Online Color schemes generator 2
..And some colour charts
CSS Color Chart HTML True Color Chart Webmonkey
Hope that helps out
Comment on April 12, 2007 at 7:51 pm
hey mahud remember me?? lol
I was new to proboards when i asked u for help. Your skin was PERFECT for what i had in mind for my forum. Things are going great and my forum is pretty successful i think. It wouldnt be the same without a great skin though! So i decided to come back and thank you once again. I was also interested in adding a few more of your skins so my members have the option of which skin they prefer…
OH and you are MORE THAN WELCOMED to join my forum =D Thanks and ttysoon!
Comment on April 14, 2007 at 2:12 pm
Sure, I remember
hows it going?
It’s great that the template meeds your needs, and it’s always good to see a forum doing well for itself, so keep up the good work
If you are going to add more skins a Different gradients for skins code might come in handy, if you don’t have one already
Comment on May 4, 2007 at 12:13 am
hello there! i just want to say that i LOVE the template but I am having a bit of trouble. When I put the script in the header and footer, the link to the PM inbox disappears. I’m not sure how to fix that.
Comment on May 4, 2007 at 8:57 am
Hi, Aubrey. Is the problem solved now? I notice you have a pm bar
Comment on May 26, 2007 at 1:08 am
What is customize images do you need to do that?
Comment on May 26, 2007 at 3:12 pm
You can add your own images to replace the default ones, such as the text buttons, Icons, etc.
Comment on June 11, 2007 at 10:55 am
wow this has helped me sooooo much not only did u make my forum look cooler but now i learned how to change it when ever i want =D thanks a bunch
Comment on June 15, 2007 at 6:10 am
DUDE.
AWESOME SKIN. Thanks man. I used it for my roleplay board, http://cutthr04t.proboards58.com :D:D
Comment on July 4, 2007 at 6:08 am
When I opened the text in the notepad, all it came up with was a bunch of mumbo-jumbo. It only looked like random symbols.
Can you tell me what I did wrong or what I need to fix?
Thanks
-Caitlin
Comment on July 4, 2007 at 6:14 am
Hi, Caitlin. I’ve not heard of that happening before.
If it helps, I can upload the txt.file here, so you can copy and paste it. Just let me know which temp
Comment on July 4, 2007 at 7:08 am
Oh, it is actually part my fault what happened. I didn’t upload it to an image hosting site. Silly me! I fixed the issue, but thanks for your help!
Comment on July 4, 2007 at 9:00 am
lol, no problem. Glad you fixed things
Comment on July 5, 2007 at 9:19 pm
I have a question, I’ve used pre-made proboard templates before, yet when you use a category/title image for the skin in the global header/footer area; is there any way you can make a completely new and different skin without the category/title images of the other showing up in the new one you just made?
Sorry if that doesn’t make sense!
Comment on July 6, 2007 at 8:06 am
Hi, Aurora
Are you talking about different gradients for different skins?
Comment on July 6, 2007 at 11:25 am
I guess it was that lol, thanks, hope this’ll work out.
Comment on October 2, 2007 at 6:19 am
Hello :d I downloaded a shoutbox i can place it on top or lowest left But is it possible to place the shoutbox in the middle of forum, beneed or above., or better in the middle of forum Thanks in advance :d meg.
Comment on October 2, 2007 at 6:24 am
You can put the code either at the top of the forum or the bottom. To centre the shoutbox, place the code in <center></center> tags, or inside div tags with some inline CSS like this:
<div style="text-align:center">
shoutbox code
</div>
Both of those methods should work
Comment on October 4, 2007 at 2:22 am
Thank you for the (quick) respons mahud. Sorry for bieeng big noob, but i try and try the code you give but cant get it to work. Dont know where to put , and cant find .
Yesterday i saw forum with shoutbox on the mainpage, it was put on a board called blahblah. When i make a new board and put the shoutbox code in the mainheader from that new board, and go to “home” the new board is showing but must first click the board open before i see the shoutbox, so its not on the mainpage visible must first open the new board. What do i wrong mahud? sorry meg.
Comment on October 4, 2007 at 4:48 am
I’m not sure what the problem is. Have you tried it in the Global Header?
Could you add the shoutbox code to your forum, so I can take a look.
Comment on October 4, 2007 at 7:13 am
Thank you mahud, I made a new board named Blah Blah on the mainpage, you must first click the board to see the shoutbox, but is it possible to see the shoutbox in the middle WITHOUT click the Blah Blah first.
Here a example of what i mean: http://sof2.forumup.com/ I like that :d bb mahud thanks again :d
Comment on October 4, 2007 at 10:17 am
I tried adding the chat code to my test forum. I didn’t think it would work, because it only allows UBBC code, and no html or scripts. I think the only way you can do it is place it either in the forum Global header or Global footer.
Sorry I couldn’t be of more help.
you could always host your forum at Forum Up, as it seem you can add scripts to the boards there.
Comment on October 4, 2007 at 11:53 am
Thank U mahud, now i know :d Than 1 last thing, quistion above how to put the shoutbox in the middle of forum and and centre, if not possible .. how do i center it if put it in the footer. You give answer already in my question above, but i dont understand :s bb
Comment on October 4, 2007 at 2:13 pm
Just copy and paste this code…
<center>
</center>
And place the shoutbox code in the middle.
<center>
<script src="http://www.coolwebtoys.com/Toy.ashx?ut=1ed67617&g=cwc_v|55" type="text/javascript"></script>
<noscript><a href="http://www.coolwebtoys.com/" target="_blank">CoolWebToys</a></noscript>
<div class="cwt_1ed67617_footer"><a href="http://www.coolwebchat.com" target="_blank"><img src="http://www.coolwebchat.com/_Images/cwc_brand.gif" alt="Cool Web Chat" /></a><a href="http://www.coolwebchat.com/" target="_blank">CoolWebChat Teen Chat</a></div>
</center>
that should work
Comment on October 5, 2007 at 2:06 am
stupid me mahud i ruin my forum i asked help on proboard.com already , made big mistakes in global header i think, cant login/register, and forum is in maintenance mode, but….the shoutbox is in centre :s and was attempt to get it on the lower of forum :s
Comment on October 5, 2007 at 5:30 am
problem dissolve, a member of the proboard help, send me a direct link to my forum/header now its ok again. thanks for everything :d :d
Comment on October 6, 2007 at 3:54 pm
No Worries. Glad you’ve got everything fixed
Comment on October 30, 2007 at 3:59 am
What about if you want to install several different types of premade layouts?
Comment on October 31, 2007 at 10:06 am
Hi, Amy.
You can use this code to Different gradients for different skins
Comment on January 30, 2008 at 12:51 am
thankyou. you just saved me lots of time fiddling around ^^
Comment on February 13, 2008 at 12:05 am
:D
Thanks so much not only for the theme but for the concise instructions for installing it. It looks fabulous.
Comment on February 18, 2008 at 3:49 pm
Hey. If you post the coding into the Global header/footer, will it affect all styles for your proboard?
I just spent a looooooong time uploading and pasting in all those images only to find when I go to the Global Header/Footer, I cannot select this new style. I do not want to override the existing default style.
Thanks for your response!
Comment on February 19, 2008 at 12:44 am
Hi, Crystal.
Perhaps what you need is a Different gradients for different skins code.
Comment on February 19, 2008 at 7:07 am
Thank you. I will play around with that (after making a copy of my existing global headers/footers!
)
Thank you again for the wonderful templates. Very nice!
Comment on March 6, 2008 at 11:35 am
Hi. I have uploaded Aquilla to my forum. It’s almost perfect. The only thing is the menu icons are not visible. They were before I changed the global header & footer. Any suggestions on why this is? It’s important to have those. (my name links to the forum for you to take a peek). Thank you for your help! Crystal
Comment on March 6, 2008 at 11:37 am
Sorry - I forgot to ask one other thing….how can I widen this template? I would like to take it from 695px to 800px so that people can user larger avatars and signatures. I tried changing this in the footer: boardwidth[i].width=’695 px’;}} but the background didn’t move with it so it looked bad. Thanks again!!
Comment on March 6, 2008 at 12:35 pm
OMG I’m so sorry to hit your comments this many times, but just to let you know…the menu icons are appearing on some pages, but not all. They are not visible on the home pages or a member’s profile but they are visible on forum pages.
Comment on March 6, 2008 at 12:53 pm
Last time, I swear!!! Members didn’t want me to leave the style up indefinately while waiting to hear back so I took it down for now. But here’s a screenshot of the home page with the missing menu icons under the logo: http://img.photobucket.com/albums/v13/CrystalPistol/Templates/PROBOARDS/AQUILLA/aquillahome.jpg
Comment on March 6, 2008 at 1:17 pm
I had no difficulties whatsoever with the template and thanks ^^ But I was wondering if you could help me with this. For some readson, Guests are required to login meanwhile the settings are correctly set to that Guests are NOT required to log in. I check the settings dozens of times. I dunno what the problem is. Any idea?
Thanks ~Nicole <3
Comment on April 12, 2008 at 7:38 pm
Well…I’m kinda having problems. I’m trying to download the Perfect Mistake proboards skin, but it’s not looking like the example of it. Can you help?
Comment on April 26, 2008 at 11:58 pm
Okay, my question is, how in the world do i make another box? Like, i want to have like, a box all on its own on the side of the categories. This is probably really confusing, but i saw my ex-friend having it on her board, and i dont know how to do it.
Comment on April 28, 2008 at 2:40 am
Hi, Sarah. I think I know what you are after. Check out the Index Of HTML Tables, at ProBoards Support. Perhaps you want something like this?
Comment on June 28, 2008 at 1:06 am
Is there some way I can align my menus to the centre?
http://dejavuhprpg.proboards85.com/index.cgi
Thanks for the wonderful layout!! Kriscia
Comment on June 28, 2008 at 1:25 am
I’ve just editted/updated it… do you know how I can thin my entire board more so the menu background is right at the border?
Kriscia
Comment on June 28, 2008 at 1:28 am
Never mind…I’ve fixed it
So sorry…new to this
Comment on July 2, 2008 at 8:35 pm
Question: Is there some way to make it so that the header and footer images change when the members select the skin? I have the heartilly and aquilla skin both, but the cat and other images in the header and footers clash with the other skin?
Comment on July 11, 2008 at 3:43 pm
Umm, I was wondering where the template’s text document was? I love your templates btw!!
Comment on July 12, 2008 at 2:04 pm
i have a problem, ive downloaded it, i put all of the pictures on photo bucket, i spent hours copying and pasting the codes off photo bucket, but its not working!!! am i using the rong code because ive been useing direct code, help please!!!
Comment on November 5, 2008 at 10:53 am
Hi mahud~ Thanks for the great skin!! But i`m a little confused at something… its about the header and footer…. i dont know wich images and how exactly i ve to put them in code…. sorry for the trouble but would you please be to kind to tell me wich photos belongs to menu & .cat
Thanx~
Comment on February 27, 2009 at 1:17 pm
thanks a lot..your tutorial very effective for newbie like me..
Comment on April 4, 2009 at 7:04 am
thank you so much for your help. this tut was awesome. I have one question though when you add more skins do you just add onto the global headers and footers or do you delete them every time you add a new skin?
Comment on April 4, 2009 at 12:34 pm
Hi, mrzragz.
You can keep everything in your headers and footers. If you want to use different gradients you’ll need a code for that
. Try ProBoard’s support database. I’m sure they will have quite a few codes availableComment on April 5, 2009 at 7:36 am
thanks. I did recieve a code that is helpful but Im still getting the title and catagory urls to run into different skins. Any idea how I could get that to stop? I have the socal codes but seems to make it worse.
Comment on July 6, 2009 at 4:02 am
Sorry but i am completely lost.
I have found a skin i like on ’slightly insane’ and you have to download it. What do i do next please once i have downloaded the file and extracted it. Or am i doing it all wrong. please help?
Comment on July 17, 2009 at 9:52 am
Thanx so much, I would have NEVER figured that out lmao, I feel really dumb. God bless you, love and continue to blog!
Comment on August 30, 2009 at 3:36 pm
How long did it take you to write this blog.
Comment on September 1, 2009 at 1:09 pm
:) This really helped me to understand the basics of profile editing. Thanks very much!
Comment on October 28, 2009 at 9:09 am
I’m having a problem with setting a background image. It says to copy and paste the url twice into the background image and Logo url. When I press accept ( you don’t have any colors next to background color. It won’t let me host an image without a background color, thus not having a picture for the background.
Comment on December 12, 2009 at 5:18 pm
ok, well anyway i installed a theme for my forum, but now i cant login , or do anything, is there a way i can reset the forum back to default externally or is there no hope, and i have to make a new forum??
Comment on December 13, 2009 at 1:55 am
Here’s how to log in again to fix your problem.
Type this in to the address bar:
http://name of forum.proboards.com/index.cgi?action=headersfooters&NOHEADERS=1
*replace name of forum with your OWN url. This should let you undo the last coding you did before it messed your forum up.
Alternatively, you can enter a slightly different URL just to let you log in:
http://name of forum.proboards.com/index.cgi?action=login&NOHEADERS=1
Hope this helps!
Comment on December 13, 2009 at 1:58 am
Forgot to mention, when you login, go to your admin panel and then to Headers and Footers and select the footers page you entered the code in to from the list and remove the code you entered.
It’s always a good idea to get a backup of the code for all your headers and footers before you make any changes
Comment on December 14, 2009 at 8:00 am
thanks for that, but theres one problem, itry to log in but i cant see the login fields so that prevents me from removeing the code for the header and footer
Comment on December 14, 2009 at 8:24 am
Does it work if you enter your url and at the end enter action=login&NOHEADERS
Comment on December 14, 2009 at 8:25 am
Also, try and clear the cache in your browser if possible and check the time and date are correct on your computer. Sometimes this can be the cause of login problems.
Comment on July 14, 2010 at 10:01 pm
Mahud, thank you so much for all your wisdom and talent that you have shared with us all. I have learnt how to make my page look a lot better than it did now, still have to learn about the codes with headers and footers but at least I have begun which is what counts.
Again many thanks for all your wonderful information and shares it is greatfully appreciated…
BB Indilwen
Comment on July 14, 2010 at 10:02 pm
Mahud, thank you so much for all your wisdom and talent that you have shared with us all. I have learnt how to make my page look a lot better than it did now, still have to learn about the codes with headers and footers but at least I have begun which is what counts.
Again many thanks for all your wonderful information and shares it is greatfully appreciated…
BB Indilwen
Mahud Version 5 © 2006-2008 > powered by Mr Whippy Wordpress