1. Pick the design that is the closest to what you want.
By default, you start out with the first option in the "simple" category. If you like this one, then great! There are a good number of options to pick from, but I admit they look mostly the same. Choose the design that is the closest to what you want. Try not to focus too much on the colors or images, since you can change most of those in the customization options offered in the template designer. I picked the picture window template.
2. Customize using options in Blogger
Choose the Background, Widths, and Layout for your blog. Finally, use the options available under the advanced tab to change colors and fonts. Even though I made a lot of changes, there were still some things I didn't like. For example, I wanted the header to have a picture instead of a solid color background. It's possible to change most anything with CSS, as long as you know the name of what you want to change.
3. Get the CSS from your blog
This step can be skipped if you are familiar with CSS. Apply any changes you've made, view your blog and right-click on the page. Select "View Page Sorce", select all text and save it in a text editor (such as Notepad or jEdit, but NOT MS Word). The text will have a mix of markup and code, but you're looking for just CSS. Scroll until you see this:
/*-----------------------------------------------
Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
That's where the template style starts. If you picked a different template, it will say something different but look basically the same. Delete everything above this. As you scroll down, you will see a lot of named variables next:
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#333333"/>
Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#296695"/>
<Variable name="header.background.color" description="Header Background" type="color" default="transparent"/>
<Variable name="post.background.color" description="Post Background" type="color" default="#ffffff"/>
Group>
You don't need those either. The next part is the actual CSS. It looks like this:
/* Content
----------------------------------------------- */
body {
font: normal normal 15px Cambria;
color: #114499;
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}
You can tell it's CSS by the lines with only "}" on them. Keep scrolling down until the CSS ends and you see a bunch of listed divs. They look like this:
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'>div>
<div class='cap-right'>div>
div>
<div class='fauxborder-left'>
<div class='fauxborder-right'>div>
<div class='fauxcolumn-inner'>
div>
Everything from here on out you don't need.
4. Inspect your blog
Go to the browser's menu, select "developer tools" and then "inspect". The page should go dark, and as you roll your mouse across the page, it will highlight the different elements. Since I want to change the header background, I rolled over the header until the entire thing was selected.
Go to the browser's menu, select "developer tools" and then "inspect". The page should go dark, and as you roll your mouse across the page, it will highlight the different elements. Since I want to change the header background, I rolled over the header until the entire thing was selected.
Be certain to get the entire section you want to change highlighted. Elements are layered over one another, so selecting the wrong one is easy. when you have it highlighted, it will show a text box on top with its name. In my case, the name is "div#header-inner".
5. Search the text file
Use "find" to search for the element you want to change. Copy the name and everything inside the brackets, as well as the brackets themselves. If more than one name is mentioned before the brackets, then you would be better off typing up the CSS instead of copying it. Multiple names means the rules are affecting multiple sections of your blog. Unless you want to change all of those sections, you'll have to write up the CSS yourself.
6. Add the CSS to your blog
In the template designer, under the advanced option, scroll down and click the "Add CSS" option. You'll see a textbox to the right, which is where you add your CSS. Either paste or write your new rules here. You should see the page changing in the window below. Because I wanted to change the background of the header to match the background of the blog, this is what I put in:
#header-inner{
background: url(http://1.bp.blogspot.com/-4VLWjV-oGhQ/T75k7cXnxnI/AAAAAAAAAY8/UgeaI-TFh0U/s1600/blogbackground.jpg) -400px, 500px;
}
The link references the same location where the background is stored. Any picture will have to be referenced in this way, but only use pictures that are yours or free for public use.
Repeat the last three steps to change anything that you want on your blog. I'll give a lot of examples of what you can change in the next post.
