Why I love CSS

Those of you that spend any time in the Printfection Forums will no that I mak no secret of the fact that I love CSS. I love the  way that it listens to me, I love the way that it always does what I ask and I especially love the freedom that it gives me to be creative. For some of you though, CSS is still a mysterious thing that feels like another world. Through this site and its collection of articles, as well as the many questions answered at the Forum, I have tried to make CSS as friendly as possible for everyone, and I do see some really great examples of people taking the standard themes and changing some of the colors and the page background to end up with something pretty good.

For example have a look at Oorah Graphics store. I'm not sure who's store this is, but notice the way that they have changed the colors to suit the military designs. What I don't often see however, is people taking the standard themes and turning them into something quite different. To show you what I mean, I'm going to show you how I turned the good old Purple Crestone theme into a very different animal. Click on the images below to see the ful size before (left) and after (right) stores.

 Just from looking at these two images, it would be easy to think that hey have absolutely no relationship, however the fact is that there were no changes to the HTML and all modifications were done only in the Custom CSS.

To further illustrate this, have a look at this video to see the store being converted from one to the other and back again. For the video I am using the CSS editing capabilities of the Firefox developer toolbar so that it is fast for demonstration purposes. Let me run it through setp by step

1. I change the background on the body using an image that tiles vertically. The image is around 300px high and 1300 wide and is positioned top center

body { background: url(http://www.yourserver.com/image.jpg) center top }

2. Then I use that big purple bar (#topbar) in the Crestone theme to create the white top to start off the background. At the same time, I set a new background for the header using the city skyline image and set the the background behind the logo to transparent..

#logo {background: transparent !important; text-align: left; padding-top: 115px;  margin-bottom: -5px;  border-bottom: 2px solid #000}
#header {background: url(http://www.yourserver.com/image.jpg) transparent !important; height: 199px; border-bottom: 2px solid #000}
#topbar {background:  url(http://www.yourserver.com/image.jpg) top center !important; margin-top: -35px; margin-bottom: -220px}

3. Then I deal with the main content area and turn it black with white text as well as set some default colors for links.

#page {border: none !important;}
#menucol, #maincol, #breadcrumb {background: #000 !important; color: #fff}
#menucol *, #maincol * {color: #fff}
#menucol a, #maincol a {color: #fff; font-weight: bold }
#maincol a:hover  {text-decoration: none!important; color: #0093dd}

4. And finally I change the footer from the purple to a "night" version of the city skyline by setting a background and height.

#footer {background: url(http://www.yourserver.com/image.jpg) transparent !important; height: 199px}

So there we are, 4 images, a few lines of CSS and a completely different store. I would love to see how far people are taking things with the standard themes, so please leave a comment so that we can all see the fruits of your efforts.

.

07.02.2008. 01:46

Cj on 13.02.2008. 11:49

Wow! I just ran across this section and I'm honored that you used my store as an example. I'm still learning my way around CSS and am very thankful you for all the help you give us all!

Have a great day!

~cj

Mark White on 22.07.2009. 00:35

Is there any influence you can have at PF to get some styling tags into the ##products## and ##sections## functions so we can use some lovely CSS in the stores?

Even taking out the td center alignment and giving appropriate class names to some of the main elements would be a great start.

Right now I'm hacking about with javascript to try to get some classes in there. It's terribly cumbersome, and IE doesn't really like it...

Cheers.