I’ve been knee deep in a sea of HTML and CSS lately, trying to learn the ins and outs. After making practice pages on my computer, I thought that I would try to create my own blogger theme from scratch. After looking into it, it seems completely unnecessary. You can edit anything on the page by adding CSS in the Template Designer. In this post I’ll give the steps, in the next post I’ll show all the CSS changes I made on my test blog.
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:
<Variable name="body.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
Group>
Group>
/* Content
----------------------------------------------- */
body {
font: normal normal 15px Cambria;
color: #114499;
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}
<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>
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”.
100tacks 
