Resources and Support
 Pixel Joint Forum : The Lounge : Resources and Support
Message Icon Topic: How to make a Pixel Joint Theme Post Reply Post New Topic
Author Message
Ensellitis
Commander
Commander
Avatar

Joined: 19 June 2005
Online Status: Offline
Posts: 10099
Quote Ensellitis Replybullet Topic: How to make a Pixel Joint Theme
    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:
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
ಠ_ಠ
There's a pubic hair on my keyboard. What the f**k?? I "mow the lawn" so it's not mine. Gross.
IP IP Logged
alkaline
Commander
Commander
Avatar

Joined: 25 August 2020
Online Status: Offline
Posts: 868
Quote alkaline Replybullet 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?
IP IP Logged
Ensellitis
Commander
Commander
Avatar

Joined: 19 June 2005
Online Status: Offline
Posts: 10099
Quote Ensellitis Replybullet 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


Edited by Ensellitis - 21 July 2006 at 3:18pm
ಠ_ಠ
There's a pubic hair on my keyboard. What the f**k?? I "mow the lawn" so it's not mine. Gross.
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 29 November 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet 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 
IP IP Logged
Ensellitis
Commander
Commander
Avatar

Joined: 19 June 2005
Online Status: Offline
Posts: 10099
Quote Ensellitis Replybullet 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.
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum