Here is my "attempt" at a Pixel Joint Theme Making Tutorial.

First, take a look at this guide:
This guide has arrows pointing to certain elements, and the style sheet you need to use, numbered to correspond to the guide above:

/* 1 - Main Background */ 
body,html {}

/* 2 - All the text */ 
html, body, td, th, font {}

/* 3 - Links */ 
a:link {}
a:visited {}
a:hover {}
a:active {}

/* 4 - Title between header and content */ 
h1 {}

/* 5 - News/Misc Titles */ 
.subheader a {}

/* 6 - Content boxes headers and text */ 
h2,h2 a,.tableLedger,.tableLedger a {}

/* 7 - Content boxes backgrounds */ 
.bx,.bxconnect,.tdata,.bxfull,.calDateCell,.calLedger,.tableRow,.tableTopRow,
.tableBottomRow,.evenTableRow,.oddTableRow,.hiddenTableRow,.PMtableRow,
.msgEvenTableRow,.msgEvenTableSide,.msgOddTableRow,.msgOddTableSide
{}

/* 8 - unknown */
.leftblockspan,.thead,.tableSubLedger,.tableSearchLedger,.calEmptyDateCell
{}

/* 9 - Padding in some cells */
.fixed {}

/* 10 - Seperator (not used on all pages) */
hr {}

/* 11 - Header */
/* all header */ #header {}

/* 11a - Upper header */
.headtop {}
/* links in upper header */ .headtop a {}
/* logo/title images in upperheader */ .headtop a img {}
/* text in upper header */ .headtoptext {}

/* 11b - Lower Header */
.headbottom {}
/* links in lower header */ .headbottom a {}

/* 12 - Navigation dropdowns */
.nav,.nav a,a.nav {}
.nav:hover,.nav a:hover,a:hover.nav {}

/* 13 - Footer */
#footer {}

/* 14 - Footer links */
#footer a {}

/* 15 - Logo graphic */
#headpicicon {background: url("/logo.gif") left no-repeat;}

/* 16 - Logo graphic */
#headpictext {background: url("/title.gif") left no-repeat;}

Now, to make custom images for the logo and header, they must remain in these dimensions:
Logo: 48w x 48h
Title: 252w x 48h

Some may look at that style sheet and say "WTF? how do i use that?"

Time to venture into CSS, bud.  I'm not going to go into a whole CSS tutorial here, since there has been so many great one written already, check out these sites:
www.w3schools.com/css/default.asp
www.echoecho.com/css.htm
www.htmlgoodies.com/beyond/css/index.php

ok...  to all whom want a tiled background used in their theme, replace the #1 section in the css with this:

body,html {background: #color url('imagename.gif');}

replacing color with your color hex for the background, and imagename.gif with your image.  Be sure to upload and add the link to the image when submitting it. (Thanks jalonso for asking this question)

There you go, I hope this helps.  Keep all posts in this thread relevant to creating PJ themes, n00bs have a hard enough time as it is

To submit your theme, go here, paste the CSS into the box, and provide links to your logo and title.


Edited by Ensellitis - 21 July 2006 at 11:05pm

what i do is go to the main page, then file>save page as then save it to my desktop, and edit the CSS that way

i will work on a script that will allow you to do it on the fly


Edited by Ensellitis - 21 July 2006 at 3:18pm

ok...  to all whom want a tiled background used in their theme, replace the #1 section in the css with this:

body,html {background: #color url('imagename.gif');}

replacing color with your color hex for the background, and imagename.gif with your image.  Be sure to upload and add the link to the image when submitting it.