makeing/zipping v4 skin templates??

[lafairy]

I just can't figure out,how you ppl make templates...
I mean where do u find the code that comes in the headers..and the css ..and all..can some one tell me or make an tutorial....I need to know real bad..!!!!
and then zipping them ..how do you get the skin template in itsy bitsy lil pieces for it to zip??


THANKS A MILLOIN

[matthew]

right ..where to begin?

ok, i think i'll start by showing you the code I use in my templates, so you can use them yourself.


this script tidys up the top of the page around the banner.

It removes the pm's and <home>, and centers the logo.

<script language=javascript>
<!--
var PMLogoCell = document.getElementsByTagName("TD")[1]; PMLogoCell.removeChild(PMLogoCell.lastChild)
document.getElementsByTagName('tr')[1].deleteCell(1);
-->
</script>

This is the CSS I use. It changes the scroll bar colours, adds images to the menu, news, title, and category bars, and centers and repeats vertically the the background image, so i can have cool looking vertical borders

<style type="text/css">
<!--
body
{
scrollbar-arrow-color:#HEX COLOUR GOES HERE;
scrollbar-track-color:#HEX COLOUR GOES HERE;
scrollbar-3dlight-color:#HEX COLOUR GOES HERE;
scrollbar-highlight-color:#HEX COLOUR GOES HERE;
scrollbar-face-color:#HEX COLOUR GOES HERE;
scrollbar-darkshadow-color:#HEX COLOUR GOES HERE;
scrollbar-shadow-color:#HEX COLOUR GOES HERE;
}
.newstitlebg{background-image: url(NEWS TITLE IMAGE GOES HERE);}
.titlebg {background-image: url(TITLE IMAGE URL GOES HERE); background-repeat: repeat;}
.catbg {background-image: url(CAT IMAGE URL GOES HERE); background-repeat: repeat;}
.menubg {background-image: url(MENU IMAGE URL GOES HERE); background-repeat: repeat;}
BODY {background-position:center top;background-repeat:repeat-y;}
-->
</style>

I also use this Script to change the forum width. Where it says 'SIZE GOES HERE' you can put in either a %, or a width measured in pixels.

So if i wanted the widths of the boards to fill up 65% of the window.

I'd put in '65%'. If I wanted the board to be 700 pixels wide, I'd just put '700'.

<script language="JavaScript">
var boardwidth = document.getElementsByTagName('TABLE');
for(i=0;i<boardwidth.length;i++) {
if(boardwidth.width=="92%"){
boardwidth.width='SIZE GOES HERE';}}
</script>

---

I use the same codes for all my pages, so I put those codes in the global headers and footers.

So for the above codes...


in the header I put

<style type="text/css">
<!--
body
{
scrollbar-arrow-color:#HEX COLOUR GOES HERE;
scrollbar-track-color:#HEX COLOUR GOES HERE;
scrollbar-3dlight-color:#HEX COLOUR GOES HERE;
scrollbar-highlight-color:#HEX COLOUR GOES HERE;
scrollbar-face-color:#HEX COLOUR GOES HERE;
scrollbar-darkshadow-color:#HEX COLOUR GOES HERE;
scrollbar-shadow-color:#HEX COLOUR GOES HERE;
}
.newstitlebg{background-image: url(NEWS TITLE IMAGE GOES HERE);}
.titlebg {background-image: url(TITLE IMAGE URL GOES HERE); background-repeat: repeat;}
.catbg {background-image: url(CAT IMAGE URL GOES HERE); background-repeat: repeat;}
.menubg {background-image: url(MENU IMAGE URL GOES HERE); background-repeat: repeat;}
BODY {background-position:center top;background-repeat:repeat-y;}
-->
</style>
<script language=javascript>
<!--
var PMLogoCell = document.getElementsByTagName("TD")[1]; PMLogoCell.removeChild(PMLogoCell.lastChild)
document.getElementsByTagName('tr')[1].deleteCell(1);
-->
</script>

and the forum width code goes in the footer

<script language="JavaScript">
var boardwidth = document.getElementsByTagName('TABLE');
for(i=0;i<boardwidth.length;i++) {
if(boardwidth.width=="92%"){
boardwidth.width='SIZE GOES HERE';}}
</script>

I hope that helps you out a bit with the code, lafairy.

[lafairy]

thanks a million...
and then i just go and adding the codes in html/txt files and zipping??

[matthew]

To include the codes in a zip file, all you need to do is to put them in a note pad. Then when someone downloads and extracts the zip they can open up the notepad and copy and paste the code directly into the headers and footer. Just save the notepad as a normal file.

[lafairy]

thanks...!!this really helped me..i will try it in 2 days..cause I don't have any time tomorow..I will let u know how it went.lol
wish me luck

[matthew]

hehe...cool

and good luck!!!

[lafairy]

2 more things before I start..lol
if an board has like a lotta skins,and u add the css code in the headers,it won't mess up the other skins,but addin the title bar gradient to all of the others,or so?

and where to u people go to make templates..I actually wante dot make an new forum,just to make my templates..LOL...but I can't so I thought of useing ssd again..just to see the preview..lol

I am going to start with the customized iages right now...lol...

[matthew]

I make templates using Paint Shop Pro. You can download it and try it out from Here.

also you can try out photoshop cs, and photoshop elements.

www.adobe.com/

you could even use Paint to make graphics for templates.

if an board has like a lotta skins,and u add the css code in the headers,it won't mess up the other skins,but addin the title bar gradient to all of the others,or so?

I'm not sure i fully get what you mean here. But if you put css in the headers of your board then you will get the same style on all your skins.

[lafairy]

I think I got my answer..
so If I add one template,and the css in the header...all skins on the forum,will have that style...
hmm..well that sucks...hrmmm....
ok,then I need to find an code for that..i reckon...lol


oh I have psp7 and ps 7....and u make css in psp??wow

[matthew]

A template consists of both code and graphics. It's only the graphics that i make in psp .

You don't need to make the css from scratch, all you have to do is put the colours and images in the 'create new skin' area, and that will do it for you.

For the grads (and other extras) you need to put in the extra CSS. If you just put the grads in the headers just using normal style tags, then you will have the same grads for all your skins, and that's why you need to use a code (like we are using here) to add the grads to the skin.

[lafairy]

well lol..I have that code for the grad stuff,but it won't work..but I got somebody to look it over...lol...

oh ok..yeah just graphics..I was like...waht css in psp..whoa...lol
I am just trying to use the ssd skin maker to get the preview and then i will put the hex codes in the header file and such..I hope it will work....and hopefully i can get an preview of the result in dreamweaver..or else I will upload it to my board...lol

[matthew]

dreamweaver sounds cool. i'd like to have that

[lafairy]

it didn't work in dw..ehh..
anyway..when i put the skin up on my board and posted the code with the stuff,and the code from u in the headers and footers...(edited of course)
but it took away the welcome message and the navi buttons...

[matthew]

the code i use does remove the welcome message, but not the menu buttons....so that's strange. how did you get back into your admin panel to remove the code?

[lafairy]

I just clicked the back butoon twice or so,to get back to the headers..lol

could u tell me the code that with an code that doesn't take the welcome message...please..lol
and here is the code ,so u can look at if I did something wrong with the code to take away the navi buttons
<style type="text/css">
<!--
body
{
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#000000;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-face-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#000000;
}
.titlebg {background-image: url(URL goes here); background-repeat: repeat;}
.catbg {background-image: url(URL gooes here); background-repeat: repeat;}
.menubg {background-image: url(URL goes here); background-repeat: repeat;}
BODY {background-position:center top;background-repeat:repeat-y;}
-->
</style>
<script language=javascript>
<!--
var PMLogoCell = document.getElementsByTagName("TD")[1]; PMLogoCell.removeChild(PMLogoCell.lastChild)
document.getElementsByTagName('tr')[1].deleteCell(1);
-->
</script>(of course I added the url in the code lol)
it didn't have anything to do with the footer code,cuz I tried it with the footers code and without....so there is something in the headers code I messed up..lol
I just can't code myself out of an paper bag..lol
thanks

[matthew]

I can't see anything wrong with it....again very strange

there is a code that centers the logo and keeps the welcome message but I'm not sure where to find it. LHW knows though, because he gave it to me once.

to keep the welcome message with the above code you remove this bit

document.getElementsByTagName('tr')[1].deleteCell(1);

but it doesn't center the logo

[lhw]

If I'm reading all this right, just replace this code:

<script language=javascript>
<!--
var PMLogoCell = document.getElementsByTagName("TD")[1]; PMLogoCell.removeChild(PMLogoCell.lastChild)
document.getElementsByTagName('tr')[1].deleteCell(1);
-->
</script>

with this one:

<script type="text/javascript">
<!--
var c = document.getElementsByTagName("td");
c[2].align = "center";
c[2].bgColor = c[1].bgColor;
var nc = document.getElementsByTagName('table')[1].insertRow(1).insertCell(0)
nc.appendChild(c[2]);
nc.align = "center";
-->
</script>

[matthew]

Thanks rich

I tested it out and the bg color only shows up behind the welcome message text.

[lafairy]

hmmm..I just tried that code ,and it got the bg in the center(no repaet,just once),no scrollbar..no navi....
but I also have to say I have an diffrent gradient code in my headers...so mybe when testing the code it won't work with the diff grad code...so it looks like that..maybe...
but actually it shouldn't do anything or...
I am confussed...are there any other codes to make templates...??

[matthew]

I think you must have a code conflicting with that one.

you could check out

Code Help

The forum has been dead as long i've known about Proboards, but it's a handy database. They do have a code that centers the logo, but it isn't cross-browser.