CSS and TypePad

A couple of days back Daisy asked on her blog

Now all I need is figure out which bits of TypePad /Movable Type code to avoid buggering up and I can settle down for a good study and tinker... "

So I took a quick look at the CSS for her blog, and made a couple of comments.

Which gave me an idea - how about a short tutorial about safely using CSS with typepad sites.

That will be coming soon, but in the meantime, here are my comments on the CSS.

Daisy,

I've taken the liberty to take a look at your style sheet, and make a few comments about what to touch and what probably to leave alone.

Probably the only things I'd really not mess with are absolutely positioned elements, and be careful with margins, as often layouts lie these use absolute positioning in conjunction with margins to work, and when something is changed, then it all goes pear shaped.

#left {
position: absolute;
left: 0px;
top: 101px;
width: 200px;
background-color: #F04766;
border: 1px dotted #FFCCCC;
overflow: hidden;
}

#right {
position: absolute;
right: 0px;
top: 101px;
width: 200px;
background-color: #F04766;
border: 1px dotted #FFCCCC;
overflow: hidden;
}

These statements apply to the <div id="left"> and <div id="right"> elements on the page.

You could change the colors and the border of course, just leave all the positioning. I've got a couple more notes a bit below about playing with that.

The banner element is a div across the top.
The following statements only affect elements inside this div.

#banner a {
color: #003366;
text-decoration: none;
}

applies to any links in the banner

#banner h1 {
font-size: small;
font-weight: bold;
display: none;
}

#banner h2 {
font-size: small;
display: none;
}

applies to the headings of level 1 and 2 in the banner.

#center {
margin-right: 200px;
margin-left: 200px;
overflow: hidden;
}

I'd probably leave that. The 200px left and right margins would be to make way for the left and right divs we saw earlier. You could play with the width of those and these by adjusting both in sync. Of course, always keep a backup so you can revert to that if things go awry.

.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #003366;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
}

all should be fine to play with here.

The following apply to elements inside elements of class content. You should be able to play with these to your hearts content

.content p {
color: #003366;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

For example, this applies only to paragraphs inside elements with a class of "content", such as which in your case, is in the center.

Hope that is a good start, and fire away with more questions.