e.g. to create the orange checkerboard use:

body {
background-color: #eee;
background-image: linear-gradient(45deg, orange 25%, transparent 25%, transparent 75%, orange 75%, orange),
linear-gradient(45deg, orange 25%, transparent 25%, transparent 75%, orange 75%, orange);
background-size:60px 60px;
background-position:0 0, 30px 30px
}

Lea Verou has an editable css3 pattern maker that opens up all sorts of creative possibilities!

Not all browsers support css3, and certainly older versions don’t.  Time to upgrade your browser and also increase online browsing experience and security.

Testing the XML-RPC facility

To permanently stick it above all the posts you’ll need to either update the date of your entry each time you add a sticky or use a handy plugin to handle it.

Here’s the css, which removes the sticky styling, the entry meta and the utility meta & adds some border style.

The plugin is Sticky Post Order or Q2W3 Post Order as it is now known.

#post-1001 {
background:white;
border:20px groove #FBB040;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:7px 7px 5px rgba(50,50,50,0.25);
-moz-box-shadow:7px 7px 5px rgba(50,50,50,0.25);
box-shadow:7px 7px 5px rgba(50,50,50,0.25);
width:80%;
padding:20px 5px 0 20px;
margin-left: 50px;}

#post-1001 .entry-utility {
display:none;
}


You can change the background by uploading your own pretty pattern, or if that sounds like hard work chose a colour using a color picker program like colorpic from iconico or simply use css names described here: http://www.w3schools.com/cssref/css_colornames.asp.

Now you will need to add this to the safecss editor (enable it via Settings > Slim Jetpack):

.home .sticky {
background:url('http://ourlocality.org/themes/files/2012/04/download.png');
border-top:20px groove #FBB040;
margin-left:10px;
border-bottom:20px groove #FBB040;
}

While we are looking at this you’ll notice that we’ve tweaked the margin as changes to the sidebar position have repercussions. Negative margins (yes!) are used for the sticky class, so if you want to use the right and left border properties you’d need to find a workaround.

To make the non-sticky content look subordinate, we can add the following to give it a more finished look:

.hentry {
margin:0 20px 48px;
}


Staying on the subject of moving sidebars using css, the advice earlier has other consequences on single column templates as they are shunted across. A single margin tweak fixes that:

.one-column #content {
margin:0 -100px;
}


To see the above in action (well you won’t see much action, actually) visit this page.

To finish off, most modern browsers will render the following instructions which give you a double border and a little bit of curviness which softens the look of your otherwise hard edged ourlocality template. The wrapper element is the envelope for your site.

#wrapper {
border:double 4px #ffbe5c;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

NB: You’ll need the Safe css plugin to apply these changes.

Move the primary and secondary widget areas over as follows:

#primary, #secondary {
float: left;
overflow: hidden;
width: 220px;
margin-left: 10px;
}

#secondary {
clear: left;
}

Now attend to the content area:

#container {
float: right;
margin: 0 -250px 0 0;
width: 940px;
}

#content {
overflow:hidden;
}

And that is it!

Should css be made compulsory at school?

1) Pay someone a bucket of money to do it for you

2) Buy a ready made template, with dozens of features and front page management options (and spend hours configuring it)

3) DIY using css.

All you need is a decent browser like chrome, which has an html and css element inspector built-in, plus a wee plugin to edit the css safely. Contact us to find out more.