Inverting the colors of a template
When I published the Variant Artist template some days ago, I thought it would be a good example for showing how to change the light-on-dark colors into the opposite, with dark text on light background. It can be done in several ways, and this is how I prefer to do it. This is what the starting point, the original Variant Artist template, looks like:
Step 1: Identify what needs to be changed
In this template, it is quite simple. The background should be turned into a light color and the texts and borders should be made darker. The background consists of a body background color in the CSS and a background image in the /images folder called background.jpg. Everything is found in the CSS file (variant-artist.css). For the body background color and image, the line looks like this:
body {background:#111 url(images/background.jpg) top center no-repeat; color:#ddd;
font:84% Tahoma,Verdana,sans-serif; line-height:1.6em;}
Step 2: Add a body class to the HTML
Rather than editing the original CSS, I want to add the inverted colors as an option that will allow me to switch between the original design and the light design. To do this, I add a class to the <body> tag in index.html:
<body class="light">
This will allow me to create CSS rules that apply only if the body has the class=”light”, basically defining what will change from the original design.
Step 3: Create CSS that applies only for body class=”light”
At the bottom of the CSS file, I will now add a series of CSS rules that all start with “body.light”. This will make sure that they are only used if the light class is added. By putting the new styles in the bottom of the document, all previous CSS will be used as the starting point – so the only thing I need to add are the actual details that I want to change. The layout and formatting will remain the same, unless I create specific rules that modifies them. For now, I will stick to the background and border colors.
Going through the CSS for the original styles, I copy all the lines that I want to change into the bottom of the document. Then I add “body.light” at the beginning of each line and delete everything that does not involved the colors or the background image. For the body background, the new line looks like this:
body.light {background:#eee url(images/background-light.jpg) top center no-repeat;
color:#666;}
This changes the default background color from #111 (dark gray) to #333 (very light gray) and the text color from #ddd to #666. I took the original background image, opened it in an image editor and simply inverted the colors. In Adobe Photoshop CS5, it is done from the menu “Image” – “Adjustments” – “Invert” (or if you use Windows, CTRL + I on the keyboard). The borders of the inverted image match the background color set in the new CSS class (#111), so the transition from background image to background color should be smooth. I have saved the new images as background-light.jpg, again to leave the original background so that I can switch between the two styles.
The next step is to go through the new CSS, remove unneeded code (everything that does not change colors) and find a color combination that works well. This is what my body.light CSS addition looks like:
/* Light style */
body.light {background:#eee url(images/background-light.jpg) top center no-repeat;
color:#666;}
body.light a {color:#555; border-bottom: 1px solid #888;}
body.light a:hover {color:#333; border-color: 1px solid #555;}
body.light #content .meta {border-color:#ccc;}
body.light #sidebar li a {color:#888;border-color:#ccc;}
body.light #sidebar li:first-child {border-color:#ccc;}
body.light #sidebar li:last-child {border-color:#ccc;}
body.light #sidebar li a.current {background:#ddd; color:#555;}
body.light #sidebar li a.current:hover {background:#ddd; color:#555;}
body.light #sidebar li a:hover {background:#ccc; color:#555;}
body.light #sidebar li a:active {background:#ddd;}
body.light h2 {border-color:#ccc;}
body.light #sidebar h2 {border-color:#ccc;}
Worth noticing is that border-color is not used in the original CSS, where I instead use shorthand CSS where the background-color is defined at the same time as the border width. The code above could be further optimized by putting several selectors which share the same style on the same line, but I am leaving it this way to make it easier to read the code and modify each color independently.
Step 4: Review the result
With the code above added to the CSS, this is what the template now looks like in the web browser (click the image to see a live demo)
To change back to the original design, all I need to do is to remove the class=”light” from the <body> tag in index.html, so it is easy to compare the two styles.
Summary: Download Variant Artist (light)
The lighter version of the Variant Artist template that I have just created as described above, can be downloaded directly from here: variant-artist-light.zip (.zip, 43 Kb)
This article was written by Andreas Viklund
Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.
1 comment:
Hello, good astuce for change color of template. With PHP you can do same more quick but no more easy ^^ But cumulate php and CSS is good for speed page i think. Test this soon. Thank’s again – Paul.