Making a Skin

[Zac Attack]

Okay, I just made a Proboards Account and figured out how to change the colors of things. On this site, there is a lot of 3-D stuff going on, how is that done?

[Alca-diddly-doo]

3D? You mean the graphics?

You need a program such as Photoshop or Paint Shop Pro. Once you get either program, search google for tutorial sites. Tutorials teach you different effects, types of design, etc.

This (Click Here) resource guide should help you find most of what you need to get started.

[Zac Attack]

So your saying that all of the "Forum" "Board Titles" and stuff are pictures?

[Zac Attack]

Okay, I found something here.

So, where it Says URL, I have to make a gradient picture and download it?
If so, what is the size (in p izels) I need to make it?

[Blink]

zac said:

Okay, I found something here.

So, where it Says URL, I have to make a gradient picture and download it?
If so, what is the size (in p izels) I need to make it?

You don't need that code at all, that code is if you have more then one skin.

Gradients, if you didn't know are just a bar that goes from dark to light. On proboards you use these on menus, titles, and categories.

Here is an example of a graident:


It doesn't have to be the width of the site because it is automatically repeated to fit the size. In fact, I could make it 1px wide and it would still work fine.

The hight really depends on the size of the buttons. webAddict uses a smaller font and pretty small buttons so the gradients don't have to be large. I like to make mine pretty tall (like the above one) so they can fit anywhere around the forum.

Here is the code for gradients:

.titlebg
{
background-image: url(TITLE_GRAD_URL);
background-repeat: repeat;
}

.catbg
{
background-image: url(CAT_GRAD_URL);
background-repeat: repeat;
}

.menubg
{
background-image: url(MENU_GRAD_URL);
background-repeat: repeat;
}
</style>

Where is says URL you will have to upload an image to a hosting site as Alc mentioned.

This code is CSS and not very complicated at all. The wA header doesn't use this type of code, infact wA has coded their own header and removed the probards header.

The images are not made with code, they are done in a graphics program.

Hopefully this helped some

[Zac Attack]

It helped a bunch *huggletackles* Thanks, now I have another question, lol
How do you replace the header? lol
I know, I'll fulla questions.

[Alca-diddly-doo]

Remove <<Home>>

<script>
<!--
document.getElementsByTagName('font')[1].innerHTML='';
//-->
</script>

_________________________



Remove "Hey User, You have X Messages, X are new""

<script>
<!--
document.getElementsByTagName('tr')[1].deleteCell(1);
//-->
</script>


And if you are looking to add a header image as in a banner:

Click Admin> General Settings> then find the banner URL box and place the uploaded image URL in that box.

But definately add those two codes to your Global Headers.

[Zac Attack]

OMG, that's amazing!
Thank you so much, you are a big help

[Zac Attack]

Uh oh - I'm so bad at this. I pasted the code, add this picture,

s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg

into the codes like this...

.titlebg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}

.catbg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}

.menubg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}
</style>

and now...

-My admin area is erased
-Threads messed up
-There is not gradiant (lol)

I will have to delete the site, if I can get to the action.

[Zac Attack]

zac said:

Uh oh - I'm so bad at this. I pasted the code, add this picture,

s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg

into the codes like this...

.titlebg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}

.catbg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}

.menubg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}
</style>

and now...

-My admin area is erased
-Threads messed up
-There is not gradiant (lol)

I will have to delete the site, if I can get to the action.

So, here is a question tat will blow your mind (probably not).

How do you delete your website without access to the admin page?
*bites nails*

[Alca-diddly-doo]

Do not delete your forum, there's no need. Just do the following:

http://Your-Forum-Name.proboards#.com/action=headers_footers/noheaders/1

^Edit the colored parts of that. and copy+paste that link into your adress bar. Then, delete the code that was supposed to put gradients in and add the following code instead:



<style>
.titlebg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}

.catbg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}

.menubg
{
background-image: url(http://s232.photobucket.com/albums/ee49/zacharyyoung94/th_OrangeGradiant_test.jpg);
background-repeat: repeat;
}
</style>


^No editing for that code is necessary. Let me know if this works.

[Zac Attack]

I will try this right away. You guys are lifesavers. I have a contest idea, find an impossible code for our mods

I will for sure let you know if it works