Skin System

From MyUPBWiki

UPB is a fully skinable application. Using CSS and variable images, you can customize the script however you please.

Skin Tutorial

OK so you want to become an elite skinner huh?

Well I'll tell you how to make your skins in the correct size and whatnot but the rest is up to your creativity

First off you will need adobe photoshop (or something similar e.g. gimp).

We are going to start from the bottom up. One of the first skins you will make is from the table headings. There are 4 files that make this up. First thing is make your top bar (with a width of 600 or so) and complete it with all the effects etc, that you are planning. Once you are done, select a section from the top left corner that is 132 pixels wide, height doesn't matter but I suggest inbetween 15 and 20. Copy and paste it on a new project then save it as cat_top_left.gif

Here is an example of my top left table header

Now from the very middle of your table header image use your selection tool to copy a section that is 1 pixel wide and the height of your image and save it as cat_top_bg.gif IT MUST BE TILEABLE!

Mine looks like this

Now select a section from the top right corner that is 134 pixels wide, height would be the actual height of your table header image. Copy and paste it on a new project then save it as cat_top_right.gif

Mine looks like this

• NOTE* The 3 images above MUST be the SAME height!

Now you have to make a background for the author heading. Once again make a 300 wide bar image (try to make it fit in with your title bar because this image resides directly below it), select a 1 pixel wide section of it and save as cat_top_bg.gif

Mine looks like this

Now you need to make a footer bar. Make this a wide as you wish and a height of inbetween 10 and 15 pixels. Select a portion in the middle side that is 1 pixel wide and the appropriate height. Save it as cat_bottom_bg.jpg.

Mine looks like this

Now on the very right hand side of your image select a portion that is 112 pixels wide and the appropriate height. Save it as cat_bottom_right.gif

Ok now you're nearly done. Tired yet?

Now you have to make a header image. SIZE DOES MATTER, the sizes for this images is 72 pixels in height and for the right and left panels it must be 201 pixels. For the left hand image save it as head_logo.JPG For the right hand side save it as head_logo_right.JPG and for the background in the middle (which once again must be only 1 pixel wide and 72 pixels high) save it as head_top_left_bg.JPG (note the capital letters on the extention, this is IMPORTANT!).

For an example of what this looks like, look at the very top of this page.

Now you need to make a title bar background. Make an image that is 300 pixels wide and 19 pixels high. once you have completed your artwork on it select a 1 pixel wide section of it and save it as head_bottom_left_bg.JPG, the make a copy of it and rename the copy to title_bg.gif.

For an example of what this looks like, look at the very top of this page where the buttons are.

The last thing you have to do is make buttons. These can look however you want them to look but they must all be these sizes. 84 pixels wide, and 17 pixels high. The filenames you need to save the respective buttons are...

head_but_faq.JPG -------------- Faq button
head_but_loginout.JPG --------- login/logout button
head_but_members.JPG ---------- members list button
head_but_pms.JPG -------------- Private messaging system button
head_but_register.JPG --------- Register button
head_but_search.JPG ----------- Search button
head_but_usercp.JPG ----------- User:CP button

And the very last thing is completely optional. You have the option of adding sound to your skin. Basically all this is is a short bit of music or etc, that will loop continuously. Make sure the file size of this loop is not over 200k (and that's pushing it) and save it as sound.wav. DO NOT USE COMMERCIAL MUSIC FOR THIS (unless you like getting sued). Like I said, it is completely optional, the script that plays the music knows whether or not the sound file is there.

Now, with all the files you have just made, make a directory with the name of your skin like c:\badmomma

inside c:\badmomma create a folder called images and put all the files that you made in the images dir.

Uploading to Server

The files go into skins/badmomma/images/the files I just created

Now go into config panel via admin panel, and set the working skins directory to skins/badmomma/images

CSS Support

Ok, also, the skins now have css support. You need to include your css with your skins. The dir structure is like this:

->skins->myskin
->skins->myskin->css
->skins->myskin->icons
->skins->myskin->images

NBS guys, to save you some trouble have pilot download via ftp the current lightblue skin that is on this forum now.