Who wants a default template? Not me that's for sure. To change mine, there wasn't really much to it. I added a background image, a header image, and changed the color of both the link and text fonts. Other than that the only changes I made were to the side bar to add links and a counter.
For those who aren't really CSS savvy, you can have my theme if you like it. Simply email me at david@davidmonaghan.com and I will send you the template text and the images which I used along with instructions on how to install these items. (You will need somewhere to host the images, and no you can't use my host sorry.)
If you feel you can make the changes yourself, or you wan't to learn how here is a very simple way to get your feet wet with HTML and CSS.
Before you edit your template text, first you should be sure about the template that you are using. The template changes I made were to the Minima Black theme create by
Douglas Bowman. If you wish to use the following examples to make changes to your blog, I recommend you first select the Minima Black theme in your blog's control panel.
Now, to add an image to the background of the page we will need an image. Let us say that we have an image at http://www.imageserver.com/image/location/image_file-name.jpg. This http link also known as a url will serve as an address to the image in the CSS code. Now where would we put such a strange string of characters inside another even stranger list of characters? Perhaps in the background property of the body tag? Whoever said that gets a gold star. Now what is the body tag and where in it is the background property. Let us take a look;
body {
background:#000;
}
Now we have three lines in this example, which contains only the one property which we are interested in, the background property. The first line is the start of the body tag, the second line contains the background property, and the third contains the end of the body tag. In this example the background is set to #000 which is shorthand for #000000, the color code for black. Now we need an image there, but we also want to keep our background black, just in case. Take a look at this new tag which has an image on the background which will not repeat nor will it move if the page is scrolled. The image is also centered on the page rather than having the top left corners lined up. This way the image is in the center no matter how big or small the users resolution and browser window size is.
body {
background:#000
url("http://www.imageserver.com/
image/location/image_file-name.jpg")
no-repeat center fixed;
}
Now in order to make sure this image works all the way up to a screen resolution of 1600x1200 the image must be 1600x1200 (not really exactly unless you are considering full screen browsing, which I do every now and again.)
The header image follows the same basic principals and code, only the image was in my case about 660x150px.
Changing the colors of links and images is pretty straight forward. With links you have three tags which control color. :link color :hover color and :active color. You can change each of these to get a rollover effect if you want. Setting the :link and :hover colors the same will take away from this effect, though you can use another property like text-properties to get a line-through or other effect. If you change the property of the a:link, a:hover, and a:active which fall right after the body tag, all of the links on the page change which are not explicitly set elsewhere. In my case this was all I changed.
I also added images to the background of the post titles which are controlled by the
.post-title tag. In my case the width of the images are 410px wide. Another note in the editing of the post title background is the orientation of the text in the box. My particular background, being comprised of two objects on the right and left which happen to be the same color as the text, it was important to arrange the text around the background image. To achieve this goal I created a margin of 25px on the left and right of the post header. Here is what the code looks like to achieve this, minus everything else around it.
.post-title {
padding:0 25px 4px 25px;
}
And that about wraps it up. Again, if you wan't my code I'll be happy to hand it to you. I may post more information about creating the images if requests come in :).
