My personal alternate style for Tarski

As you regular visitors might have noticed, I’ve finally decided to switch themes. As I wrote almost a year ago, the K2 theme I used previously is unmaintained. I didn’t want to keep using it in combination with all the new versions of WordPress because I feared might cause compatibility problems and not allow using certain new functionality. So I decided to start using the Tarski theme. However, I didn’t like the default looks of the Tarski theme, so I made my own alternate style for the theme. You can see the CSS code for my theme below, thanks to the SyntaxHighlighter Evolved plugin.

/*
avlmod.css
Alexander van Loon's style for the Tarski theme - http://tarskitheme.com/
Designed by Alexander van Loon, http://alexandervanloon.nl/
*/

/* Tables */

table {
    background: none repeat scroll 0 0 #F9F9F9;
    border: 1px solid #AAAAAA;
    border-collapse: collapse;
    margin: 1em 1em 1em 0;
}

table th, table td {
    border: 1px solid #AAAAAA;
    padding: 0.2em;
}

table th {
    background: none repeat scroll 0 0 #F2F2F2;
    text-align: center;
}

/* Body */

body {
    background: #F7F6F5;
}

/* Wrapper */

#wrapper {
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
    background: white;
}

/* Header Image */

#header-image {
    margin: 0 0 -50px 0;
}

/* Title */

#title {
    border-bottom: medium none;
    margin: 0 0 0 40px;
    position: relative;
    top: -70px;
}

/* Blog title */

#blog-title {
    color: white;
    font-family: "Trebuchet MS",Verdana,Sans-Serif;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0.1em 0.1em 0.2em black;
}

#blog-title > a {
    color: white;
}

/* Tagline */

#tagline {
    color: white;
    font-family: "Trebuchet MS",Verdana,Sans-Serif;
    font-size: 0.9em;
    font-style: normal;
    font-weight: bold;
    text-shadow: 0.1em 0.1em 0.2em black;
}

/* Navigation */

#navigation {
    border-top: 1px solid #CCCCCC;
    margin: 0;
}

/* Post title heading */

h2, h2 a, h2 a:visited {
    color: #444444 !important;
    font-family: "Trebuchet MS",Verdana,Sans-Serif !important;
    font-size: 20px !important;
}

Developing my own theme wasn’t easy, it took a lot of trial and error, searching and reading to figure out how CSS works. Because there were some things I didn’t understand I posted a topic at the WordPress.org forum, while it didn’t provide me with the help I expected I did get the very good advice to use Firebug. Fortunately a nice colleague at work helped me out.

Yet, I still have little idea of what I’m doing and if my code is any good or an ugly hack. Take the last paragraph of code for an example, it seems the !important is necessary to overrule some inheritance to make it work. I don’t think this is the right way and I’d like to know how to do it without using !important. Also the border above the navigation bar (with “Home” and “About”) is placed just below the header image in Firefox, but on Chrome (and other browsers using WebKit) the border is placed over the header image.

To make my theme I borrowed some CSS code of other websites I examined, to get an idea of how others do it. The table code is borrowed from Wikipedia and already features in the child theme (alternate style) I made for K2. The background color and the box shadow in the background were borrowed from OMG! Ubuntu.

I like what I have now, while my original goal was to mimic K2 as close as possible I’ve made some different changes which I like. And even if I’m still  a newbie, I like the fact that I know a bit more about CSS now. What I’m still missing is K2’s rolling archives slider bar, which also stays on top along with the search field as you scroll. Copying that to Tarski would probably involve quite some time and advanced skills, which I don’t have.

2 thoughts on “My personal alternate style for Tarski”

  1. Dude, I LOVE the theme: Clean, functional & easy on the eyes. I WANT! 🙂
    I hope you don’t mind me stealing it for my domain. LOL. 🙂
    Greaat job! Oh, does it have support for random headers? That is a killer feature that K2 did with EASE.

    Cheers!

  2. Assuming you mean random header images, yes, Tarski offers that as well. If you make any modifications, especially a fix for the placement of the border above the navigation bar (as I mention in my post, WebKit-based browsers display it a few pixels higher than Firefox which displays it correctly), please share them with me in the comments please.

Leave a Comment

Your email address will not be published. Required fields are marked *