~Trick My Blogger~

Places to go to get cool blogger layouts:

http://Pimp-My-Profile.com

http://www.pyzam.com/bloggertemplates



Things you can do to change up your blog.

First thing you have to do is go to your customize section and open the "edit html" block. In there you will see a complete html of what your blog contains. What we will be working with is the "wrapper" so scroll through the html until you see "wrapper" so you can get familar with it. Before changing anything be sure to save a copy of your template.

To make your header wider you want to go to the section that looks like this:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:5px solid $bordercolor;

Here is the area you use in order to change your title area. If you change the "width:" to a larger number your title area will be bigger, same goes if you want it to be smaller, change it to a smaller number.

As you scroll down the html you see other areas such as:

#header {
margin: 5px;
border: 5px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
background-color:#FFCCFF;
background-image:url(none);

Here you can change the width of the border around your title. You would change the width by making the "px" next to "border" a smaller or larger number. You can also change the style of your border such as in the above case, you can see the border is "solid." There are different types of style you can change it too and you can find those at this website:

http://www.somacon.com/p141.php

As you move down the html list you see different inputs labeled "header," these are for each individual portion of the title. For example in my title it looks like this:

The Whatever File
A blog about life and my part in it
"image"

So for me, I would have the outer header section at the top, then the first line of text, the 2nd line of text, and then the image. These lines have their own html code starting with "#header."

Once you are past the header section you will come to the wrapper section. The first section is the "outer wrapper." The outer wrapper is the area around your boxes of information such as like your, post area.....if you look at my page: The Whatever File you see I have a top box and two boxes side by side.....so the outer wrapper is the space between these boxes. If you want to change the space you can do so by changing the width as shown in the section below:

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:3px;
text-align:left;
font: $bodyfont;
}

As you can see mine is set to "900px." Here you can also change the padding, I don't know much about padding but I think it gives you more space between sections but don't qoute me on that.

Working our way down the html the next section is:

#main-wrapper {
width: 600px;
float: left;
padding: 3px;
border:5px solid $bordercolor;
background-color:#FFCCFF;
background-image:url(none);

This is the box to the left on my blog. You can change the width say for instance if you want your box to be bigger....I have mine set to 600px. You need to play with these and then preview them because if the box is too big you will force the right side box down underneath and you don't want to do that. So what I did was change it alittle each time and then previewed it to see how I was doing....it takes alittle time but if you want to maximize the most of your blog space it's well worth it. You can also changed the color of your background, this is the background in the box, your main background will not be touched by changing it here. On my blog I originally had a transparent background which made it difficult to read because the full background showed through my text. So by changing the background you can minipulate the box itself. Say you want to have a transparent background you would take out the "#FFCCFF" and type in "transparent." Now you have to go down and change each wrapper so it matches or you can choose to have different background colors for each section. You can also had an image by inputing an "url" on the "background-image:" section but make sure to take out "url(none)" if you do this.

If you don't know your color numbers here is a good website that give you the color number just be sure to add the "#" before each number or it won't change anything. http://www.w3schools.com/html/html_colors.asp

The next section of wrapper is the "sidebar wrapper", and you use this the same way as you do the others.

#sidebar-wrapper {
width: 250px;
float: right;
padding: 3px;
border:5px solid $bordercolor;
background-color:#FFCCFF;
background-image:url(none);

The next section is the "post" section.

.post {
margin:.5em 0 1.5em;
border-bottom:5px dotted $bordercolor;
padding-bottom:1.5em;
background-color:#FFCCFF;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$pagetitlecolor;
}

I wish I could offer alot on this one but I am still learning. I do know that if you want the background to be "transparent" you can change the background-color section or if you want a different color you can change the number. If you have a premade layout with a transparent background like I did you have to change this to a color just like you did in the wrapper section.

So this is what I have learned so far working with my Blogger Blog, I hope it will help someone and if you have any questions about this or something you don't understand please feel free to email me at: photog.chick@gmail.com .