Getting sticky with css

If you have just discovered that by making your post sticky you can make it float to the top of your list of posts, you may not like the black border or the default blue in the basic theme.

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;
}

About Our Locality

OurLocality is a Free East Lothian Publishing Platform
This entry was posted in News. Bookmark the permalink.