My experience in Theme'ing

[ScHwErV]

donnoman asked me to share my experience with making a skin for CPG in hopes that my experiences might help someone else.

I was going to just share my skin, but unfortunately I had to get the Ok to use a copyrighted image to make mine, so I cannot share it.  Hopefully the process that I used will be help enough for anyone trying to make a custom skin to match their site.

My Site - http://www.eoutdoorsman.com - Custom skin, wanted gallery to match and wanted gallery to bridge with IPB.
My Gallery - http://www.eoutdoorsman.com/gallery

First thing I did was poke through the existing skins to see what one I wanted to base my skin from.  I am a fan of the tabbed themes, so the mac_ox_x theme fit me nicely.  I copied the theme folder and named it eod.

After I had chosen my base theme and uploaded the new folder to my website, I set the new theme as my default so that I could see what I was working on.  Then it was time to add the background and play with colors to get the look that I wanted.  Basically I looked for a color that I wanted to change (found the hex using photoshop), and I searched for it in the style.css.  After just a little playing in there, you get very used to things and can find your way around easily.  The folks at CPG made it quite nice with some good notes inside the file to help you find your way.

Once I had the background image in place and the colors the way I wanted, it was time to tackle the images.  I did the colors first so that I could tell what images needed to be changed.  It was blantantly obvious which images needed to be changed since they no longer fit in with the new color scheme. 

The process was fairly simple, I looked at the site, picked the image I wanted to start with.  I right clicked on the image and selected View Image or View Background Image (I use firefox).  This made finding the image I needed to change with photoshop much easier.  The path and filename were right in the Address Bar and the image was the only thing showing on the screen.  I simply surfed to the correct folder, picked the file, and changed it so that the colors matched my new color scheme.  Some images I simply didnt want anymore, so I just searched for the name of the image in the css and removed them.

Things I think I did right.

No one but my administrators knew the gallery existed until the skin was done.  This was nice and made it so that I could work on the gallery while having the new skin set as default.

Changed colors before changing images.  As I said before, it made finding the images that needed to be changed very easy.

Went back in and added comments where I canged the tab links across the top to make any future changes much easier.

Got feedback from multiple people about the skin before I went live with it.  I have 4 administrators on my site and they all got to see it first and give feedback.

Most importantly, I had a picture in my head when I first started of how it would turn out.  I kept at it until it looked like that picture.  This makes the outcome that much more rewarding.

Things that I wish I would have done.

At the time I was doing all the work on this, I was home sick from work and was a bit doped up on nyquil.  If I had been thinking straight, I would have made comments in the style.css and theme.php for each line that I had changed in case I need to go back in and make changes in the future.

I also would have saved the images in photoshop (psd) format as I was working on them to make future changes easier.

Problems that I had.

Well, first thing I did was not make any friends here at the forum by complaining that the documentation for the skins wasnt adequate.  I got yelled at by nibbler (rightly so), who has since helped me with 2 other problems, so hopefully he doesnt hate me .  Anyone reading this make a mental note, dont piss off the people who can help you the most.

Make sure the color you use for the buttons doesnt match the background color of the cells, I did this, thats why currently the color of the cells on my gallery doesnt match the color of the cells on my forum, I have to change all the buttons to something else before I can do anything about it.  Bad planning on my part.  This time I'll save them in photoshop format.

Learn to use the gallery first and make sure your gallery is functioning properly before you skin!  I actually started skin work before I even uploaded the script to my server (using colors from the demo).  Bad planning on my part because when I went to do things to make sure my script was correct, I had to go fix parts of the gallery.

For some reason after changing the images, the admin panel got shoved up into the image above and it looked messy.  I had to edit the template.html and find the spot to put in a br tag to move them down a bit.

I think I ended up rambling a little bit, but I did want to add as much info as I could remember so as to help anyone else thinking about doing their own skin.

ScHwErV 

[ohsogeeky6]

You have absolutely no idea how much this post helped me out! THANK YOU!

[Hot Rides]

Im glad I started looking around before I started chaning mine because your post is very helpful.

[omarmnn]

I want you to help me please, I cant build my theme for my web page

[Joachim Müller]

Then why don't you start a thread of your own instead of cluttering an announcement thread?