Print Page | Close Window

How to make a Pixel Joint Theme

Printed From: Pixel Joint
Category: The Lounge
Forum Name: Resources and Support
Forum Discription: Help your fellow pixel artists out with links to good tutorials, other forums, software, fonts, etc. Bugs and support issues should go here as well.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=2642
Printed Date: 13 September 2025 at 5:45am


Topic: How to make a Pixel Joint Theme
Posted By: Ensellitis
Subject: How to make a Pixel Joint Theme
Date Posted: 21 July 2006 at 2:43pm

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:
http://www.w3schools.com/css/default.asp - www.w3schools.com/css/default.asp
http://www.echoecho.com/css.htm - www.echoecho.com/css.htm
http://www.htmlgoodies.com/beyond/css/index.php - - 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, http://www.pixeljoint.com/pixels/contact.asp - go here , paste the CSS into the box, and provide links to your logo and title.


-------------
ಠ_ಠ
There's a pubic hair on my keyboard. What the f**k?? I "mow the lawn" so it's not mine. Gross.


Replies:
Posted By: alkaline
Date Posted: 21 July 2006 at 3:15pm
Great tutorial on em ensell. Will help a lot. But how do you test your css? Can you? how will you know how it turns out?

-------------

Posted By: Ensellitis
Date Posted: 21 July 2006 at 3:17pm
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


-------------
ಠ_ಠ
There's a pubic hair on my keyboard. What the f**k?? I "mow the lawn" so it's not mine. Gross.

Posted By: jalonso
Date Posted: 21 July 2006 at 10:44pm
I have been making one and have trouble with "other" images I wish to add. BGtile for example? Like BtG used. Now that this inetgrates with the forum does that need its own css or special note. I notice MoDs brown still have green default buttons and orange secondary graphics. I want TOTAL control 

-------------
http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378&FID=6&PR=3 - PJs FAQ <•> http://www.pixeljoint.com/forum/forum_topics.asp?FID=6 - Sticky Reads

Posted By: Ensellitis
Date Posted: 21 July 2006 at 10:57pm
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.


-------------
ಠ_ಠ
There's a pubic hair on my keyboard. What the f**k?? I "mow the lawn" so it's not mine. Gross.


Print Page | Close Window