Although I figured out MT enough to install it, and HTML enough to tweak little things here and there, I’m still lost on stylesheets and all that muck. I love the way this site looks on my Mac (and all its browsers), but notice when I get to work and use IE on a PC that everything looks bigger and klunkier. I set the width in the body to 60% so that people wouldn’t have to scroll horizontally (on a PC), but this also makes some machines see the text wrap around photos quite crappily.
The coding currently looks like this (the 60% is the only thing I changed from the original MT “clean” stylesheet):
body {
margin:0px 0px 20px 0px; width:60%;
background:#FFF;
}
My question for you is how to I set the width definitively so that everyone sees the same layout (as long as they all have the same font, of course). I tried changing the body width to 400px in the stylesheet, but all that did was affect my archives, not my main blog. And I’d love to be able to add some extra white space to the left of the sidebar, too …
The blog that comes to mind when I think clean design that looks exactly the same no matter what computer or browser through which I view it is kottke.org. I know, I know – he’s a professional designer and stuff. I don’t want my site to look like his, I just want to control the look of mine. It seems like only a few simple commands would help.
Your letters are different sizes because mac monitors are 72 pixels per inch and PCs are 96 (i believe).. to get your letters the same size you need to set your point sizes ANd line depths (same as leading) in pixels (px).
here is kottke’s style sheet: http://www.kottke.org//templates/mt/higher.css
You can figure out how things work by experimentation … it’s how I did mine. I had never done a lick of CSS before Aug. 15; within days I was building my whole blog with it. You need to learn how div commands work, and to use absolute positioning … do some googling and you can teach yourself all you need to know.
Also: go into your MT Control panel and create a two new blogs — one to experiment with and the other as a backup so you’ll always have the default settings available when your experiements go madly awry. When you get the look you want on your test blog, cut and paste your settings into the real blog. That way you don’t have to screw up the look of your real blog while you’re trying to redesign it. (I wish the hell I’d thought of this when i redesigned mine).
On the other hand: if all you want to do is fiddle with type sizes, go to your stylesheet and look for the following:
blogbody {
font-family: palatino, verdana, georgia, arial, sans-serif;
color:#333;
font-size:small;
font-weight:normal;
background:#FFF;
line-height:130%;
}
See where the font-size says “small” .. change that to a pixel depth like 14px … you can leave the line-height alone, or experiment.
Thank you for the booster!
blah blah blah, huh?
sure, I like the color yellow…
swa’ ya’d say??? Arrgh.
No need to create a backup blog: default templates are available on the Movable Type web site:
http://movabletype.org/default_templates.shtml
As far as learning CSS for design purposes, start with canonical Zeldman:
http://www.zeldman.com/
Also, see Zeldman’s book (HIGHLY recommended!):
http://www.amazon.com/exec/obidos/ASIN/0735712018/ref%3Dnosim/jeffreyzeldmanprA/
Other resources:
http://www.simplebits.com/
http://stopdesign.com/ (especially the Articles section)
I’m in the same boat. I’m doing all of my design on a Mac — and I’ll continue to design with the look on a Mac my paramount concern — but I’m continually shocked by how different things look on a PC. I’m only just starting to figure out the possibilities of CSS.
I’ll be checking out the above resources, though. Thanks all!
You’re only starting to figure out CSS?
Damn … your site looks so good, though.
I figured you were a master.
Did you really do most of that without CSS?
I’m so coding ignorant – ahhhh!
Actually, most of the design was done in Photoshop, which automatically generated the basic html (table-based) code. From there, I just had to go in, clean it all up (which actually took quite a while), then alter elements to allow for dynamic scaling (so, for example, the main content window would expand to fit the window without strecthing the overarching page logo, which I wanted to remain centered). I’ve only been using CSS to handle character styles and some image placement, but beyond that, I’m a CSS neophyte.
I’ve started work on a redesign (which I’ll probably unveil in December, once my blog hits its one-year mark), but I’m dreading having to redo all the code again. With any luck, I’ll be a lot better at CSS by then, and I can use that to greater effect.
No promises, though.