Tutorials

How do I delete the border lines around my header?

2009-04-28T15:02:00.000-07:00

1. Go to the Layout tab of your template and click the Edit HTML link. Scroll down in the code box until you see this section (it'll be about 1/4 of the way down):

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:850px;
margin:0 auto 10px;
border: 1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

2. There are 2 places you will have to delete the border from. They are shown above in the sections highlighted in green. Simply change the number 1 to a number 0 in both sections. (You could take that entire line of code out of both sections as well, but changing it to a 0 gives you the option of putting it back in later).

3. Preview to make sure that's how you want it to look. Then save and you're done!

How do I move the text for my header title and description?

2008-10-07T14:30:00.000-07:00

You CAN move the text written on your header around. The catch--you have to go into the dreaded html code to do it. However, we have tried to make it easy in this tutorial so have at it!

To move your title:
1. Sign into your blogger account, go to your blog, and click on the Layout tab.
2. In this tab, click on the edit html link.
3. Scroll through the crazy coding until you see this:
#header-inner {
4. Under this section is where the placement of your blog title is found. To move your title left or right, you must change the word auto to any number of pixels.

Example: to make the left margin wider (moves text to the right) you might type something like this: margin-left: 200px;

Always Preview before saving your changes!

To move your blog description:
1. Sign into your blogger account, go to your blog, and click on the Layout tab.
2. In this tab, click on the edit html link.
3. Scroll through the crazy coding until you see this:
#header .description {
4. Under this section is where the placement of your blog description is found. You will need to type the following under this heading:
margin-left: 0px;

Example: You can move your description left or right by changing the "0" to a higher or lower number.
margin-left: 100px;

Always preview before saving changes!

What if I want to keep my original header?

2008-08-15T21:27:00.000-07:00

You can still download our templates and keep your original header! If you have uploaded your header as a page element or photo/.jpg, then follow these simple steps to load our template and keep your original header:

1. Copy and paste the template of your choice into your layout/html tab following the instructions on the template. (Our template and header should come up along with keeping your original header).
2. To get rid of our header so that only yours remains you will need to go back to the layout tab and then to the html tab.
3. Scroll down the html codes until you find this:
/* Header
-----------------------------------------------
*/
#header-wrapper {
background-image:url(there should be a long crazy looking code/link in these parenthesis);background-repeat:no-repeat;
4. Delete everything that is in the parenthesis and nothing else. Preview. This should take away the smitten blog designs header, leaving only your original header in place!

How do I adjust the border around my header?

2008-08-14T12:51:00.000-07:00

You may have noticed that our blog templates come with the headers "sewn" into the script. If you choose to change the fonts and colors (see post below) the header border may shrink or become too long for the header itself. Since there is no way for us to manually fix all of our templates for everyone, we will teach you how to adjust your own.

1. Log into Blogger.
2. From your Dashboard, select Layout.
3. Select Edit HTML.
4. Scroll down the page slightly until you see the Edit Template box.
5. Scroll down the template box, searching through the crazy code until you see this section:

#header {
margin: 18px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

The 18 is relative, it could be any number depending on what template you are using.

If there is blank space between the bottom of the header and the border, you will need to shrink the bottom border of your header, choose a smaller number, taking away 4-5 pixels or so, previewing and then adjusting up or down a few pixels as necessary.

If the border has cut off some of the bottom of the header, you can choose a slightly higher number adding 4-5 pixels, preview and adjust up or down a few pixels, until the border just hits the bottom of the header.

Following these steps, you can choose any font style and size on your header and still enjoy a nicely framed header border.

How do I change fonts and colors?

2008-08-14T12:43:00.000-07:00

Perhaps there's a template you really like, but would like to change the fonts and colors of the blog template. No problem! Its super easy and fun to customize your blog colors to your own liking.

1. Log into your blogger account.
2. From Dashboard, choose the Layouts tab.
3. Under this tab there are little blue links. Choose the one that reads, Change Fonts and Colors.
4. It will bring up a box with every section of writing on your blog, so you can change both the colors, and the text style of each section to your desired look.
5. When you are satisfied, simply click save.
6. View your blog and enjoy your own personal touch. :)

How do I change the navbar color at the top of my blog?

2008-08-06T12:50:00.000-07:00

You'll notice on each of the live previews of our blog template designs, that the navbar at the top of the blogs is color coded to match the design. It may seem like a little thing, but it can make a big difference in the overall look of your blog design.

Changing your navbar is super easy to do. If you don't know how, follow the easy steps below:

1. Log in to blogger.com
2. From your dashboard, select the Layout link of the desired blog.
3. Directly under the Save button at the top, you'll see a long blue rectangle labeled Navbar. Click the Edit button.
4. Choose the color of your choice and press Save.

That's it! Hope this was helpful to you!

How do I save my sidebar elements?

2008-08-01T13:58:00.000-07:00

Click here for the full tutorial on How to Save Your Sidebar Elements.

We have a full tutorial on how to save sidebar elements (the link above), however, each of our customized templates, comes prepared with back-up code for the following items:

Profile
Archive
2 Text Boxes
2 Link Lists
8 Pictures/Images
5 HTML codes
1 Video Bar
1 Slide Show
2 Blog Lists
1 Subscribe Link
1 Newsbar

If you have the same or less of each of these items, you can change templates without losing sidebar elements. If you have more, simply follow along our easy tutorial and we'll show you step by step how to save every sidebar element you have.