Coronavirus (Covid-19): Latest updates and information
Skip to main content Skip to navigation

Edit your blog's CSS

Editing your blog's CSS allows you to change all sorts of things about your blog's colours, layout, fonts and imagery.  However, there are two important things to be aware of before you start experimenting with CSS:-

  1. If you don't know what CSS is or how you use it, then using this tool probably isn't a good idea. In principle, you can't do anything destructive to your blog here; what you type into this box may affect the appearance of your blog and could in some cases even make it unreadable, but you can always undo any unwanted effects by coming back to this screen and just deleting whatever CSS you added.  But if you don't know any CSS, you're almost certainly better off just choosing one of the pre-defined styles offered by Warwick Blogs.
  2. Your use of CSS is governed by the same Acceptable Use Policy that applies when you write entries on your blog. You may not edit your CSS in a way which makes your blog appear offensive or which would have unwanted, unexpected or hidden effects for users who visit your blog.

Those two caveats aside, please feel free to experiment with any changes you like (and if you come up with something that looks good, we'd love to hear about it!).  A few simple examples:-

Change your banner image

#siteLogoBar { background-image: url("yourimage.jpg"); }

Don't display the "entry types" links in the sidebar

#entrytypes {
display: none;
}

Change the background image of your blog

body {
background-image: url("yourimage.jpg");
}

Make your text size and colour different

.entry {
color: #310;
font-size: 0.9em;
}

Have your blog use a different font

body { font-family: Georgia, "Times New Roman", Times, serif;}

Make the sidebar grey with white headers and light grey links

#sideContent {
background-color: #666;}

#sideContent .sideContentItem
h2 { color: #fff; }

#sideContent a {
color: #bbb; }

#sideContent .sideContentItem .calendarday,#sideContent .sideContentItem .calendardayheader
{ color: #aaa; }

Remove quote images from blockquotes

blockquote:before { content: ""; }
blockquote:after { content: ""; }