TypePad Help

Here are a few tips for TypePad users who have a better than "Basic" account, where you have the ability to change colors and the layout of your blog.

--> changing background colors
--> adding a banner image
--> Pro Users, making banner image fit better

Changing the background color
and main content color

1. Log into your TypePad account and choose the blog you want to modify

2. Click the "Design" tab, on the next screen click "Style"

3. The next screen gives you all the areas you can make changes to,
    click on the button "edit this element" under General Page Settings

you will get a screen that looks like this.....

COLOR TIP ! ! !     click here to see all the colors you can use on the web
.
choose a color, look to the left for the "hex code", which is the number
you will type into the boxes shown above...

.

Adding a banner image
and changing the color at the top of your blog

1. Log into your TypePad account and choose the blog you want to modify

2. Click the "Design" tab, on the next screen click "Style"

3. The next screen gives you all the areas you can make changes to,
    click on the button "edit this element" under Page Banner

you will get a screen that looks like this.....


PRO USERS
making your banner image fit better, removing padding from top area
making an Advanced Template

If you’re a TypePad “Pro” user, follow these steps:

1. Click on the “Weblogs” tab in TypePad.

2. Under “Your Weblogs,” click on the name of the weblog you wish to edit.

3. Click on the “Design” tab.

4. Click on “Edit Template Sets” from the sub-nav. above "Select your weblogs design"

Next, decide which template set you would like to clone and convert. (When you clone and convert a template set, the existing template set will not be changed. Instead, a new advanced template set will be created based on the existing template set. You will then be able to directly edit the HTML of that set.)

5. Click on the checkbox next to the Template Set you want to clone and convert and press the “convert” button. You will be prompted by a pop-up window to whether you wish to proceed with the conversion. If you wish to continue, click “Yes, Convert.”

(Under “Your Advanced Template Sets,” you’ll see your new template sets. You can now go in and make changes to each of the individual templates — this includes changing the HTML, adding additional Template Tags or importing your existing design.)

6. Click "edit" next to the new Advanced Template set.

7. Click "stylesheet" from the list on the next page.

8. In the text box of the next page, scroll down a bit and look for something that looks like this

a#banner-img {

display: block;

background: #006699 url("http://yoursite.typepad.com/banner.jpg") no-repeat 15px 15px;

padding: 15px;

border-bottom: 1px dotted #6699CC;

height: 135px;

}

CHANGE IT TO THIS:

a#banner-img {

display: block;

background: #006699 url("http://yourblog.typepad.com/banner.jpg") no-repeat 0px 0px;

padding: 0px;

border-bottom: 1px dotted #6699CC;

height: 135px;

}

(notice you are only changing the background variable, making "15px 15px" to "0px 0px" AND the padding variable from "15px" to "0px")

9. Now click the "save" button at the bottom, then on the next screen it tells you that you have to "publish" it, click the "publish" button.

10. Now you want to apply this design to your blog. Above the "Edit Template: Stylesheet" text, click "Select a Design" from the sub nav.

11. Click the name of your original template from the dropdown list which will now have the text [Advanced] next to it

12. Click "use this template", then click "Publish" to the left

Now you have a banner that has no color space around it and it fits your blog better.  If you make any further changes to that new advanced template, you only have to "save" and "publish" from the edit pages, becaue you have already applied the style to your blog in steps 10. through 12.

more help and FAQ files coming soon!!

do you have a great tip?  click here to share it with knitblog.com
we'll review your tip and post it here for all to see.