ScottsCSS1

Customizing CSS for a Hosted TypePad Blog: Part 1

Design Choices

However you've come to be here, you may be looking for just the nuts & bolts of the How To... if so, that's mostly in Part 2. What follows here is the initial thought process and decisions about what changes to make.

While in the process of updating my personal web site, I decided it might be good to have a generally matching theme for my blogs. (Or at least some colors and text that would look more the way I'd want.) For various reasons, I've chosen to use TypePad via hosting, rather than install MovableType on my own server. TypePad offers a bunch of easy to use themes and customizations, but if you want to have things exactly you're way, you have to get into the style sheets. So any customization I'd do would be via Custom Templates and editing the CSS for the Blogs. Either way, there'd be some decisions to make. And there's multiple ways to go about doing the design.

The first decisions are design:

Should the theme exactly match my web site?

That is, should I try to pull in the same surrounding masthead and navigation elements from the core site or allow the TypePad blogs to have their own design?

My Choice: The blogs will have their own simple design with an easy link back to the core web site. Reaonsing: 1) The complexity of my site's design and time/effort vs. benefit to create a match just for the personal spew in my blogs. 2) Burying the blogs under a bunch of surrounding design elements would likely impact Search Engine Optimization, (SEO), for the content. 3) Visually, adding the blog navigation components within the site design, (likely in a right column), would make for a slim center content column. 4) The user experience would likely be best to leave a clean and simple, "blog-like" design that focused on the content. 5) Most visitors, (assuming I get any at all), would likely show up directly via search or links. They proobably couldn't care less about my personal site or anything on it. They're there for the the core of the content and that's it. 6) If I'm not happy with the result, it's all CSS. It can be changed easily enough.

So what should the design look like?

Since I'm going to diverge from the 'mother site' I can do anything I want. What should I do?

My Choice: A simple, attractive theme that would have a similar color scheme to the main site, but would in the end be optimized for readablity of the content itself. To me, this means a reasonable width to the main text column and a decent font size. And I wanted to use a liquid layout whereas my main site is set up with absolute pixel values. Anyway, there's a variety of studies regarding text readability in terms of line lengths, fonts, etc. They're a bit inconclusive, but somewhat directional. (Usabilty News 7.2 Study, Reading Text Online, Font/Text Size.) Such studies focused on visual issues. Of course, there's more to online text in terms of cogntive issues and so on. (Improving usabilty for screen readers, a second reference to similar article, (to account for linkrot on one of them.)

I also know I'm not going to have time to do everything I want, like maybe use backround images behind some elements and such, so I want to set things up so I can easily get back to it at some later date. (Yeah, right. Still... I'd like to think I'll get around to it.)

Go to Part 2 for the details on how to make the changes.
Customizing CSS for a Hosted TypePad Blog: Part 2

Customizing CSS for a Hosted TypePad Blog: Part 2

Part 1 dealt with some design choices. You don't need to read Part 1 to just dive in here.

NOTE: There's probably a lot of people who will look at the instructions below and say, "That's insane." Just follow the page layout map and start from scratch. That's fine. And a totally valid way to go. This way, while cumbersome, does start you out with CSS that works. By starting with something that works and winding your way around it to modify as you like, two things will likely happen... First, you'll get a sense of how things work as you go. So next time maybe you can go right to code. Secondly, you're less likely to break stuff and get lost along the way and can probably try more variations faster than if you were starting from scratch.

Suggested Pre-requisites

• The obvious. Know at least a little bit of HTML and CSS, (but you don't have to be an expert.)
• Read and maybe print the following TypePad KnowledgeBase sections:  Custom CSS, Advanced Template Sets, definitely get the TypePad Weblog Page Structure printed out. You'll find this handy.
   

Methods for Customizing the CSS

• Edit as You Go: You can just use the TypePad fields to edit directly and then go back and forth, viewing your changes as you go. You don't need these instructions for this. Just have at it. Though you may want to copy/paste your custom CSS to a text file on your pc and save versions as you go.
  
• Edit a Copy on Your Computer: You can grab the elements you want to modify and bring them down to your computer for editing first, then copy them back up once you're liking what you've done. (Possibly using a web page editing tool to make changes.) A major advantage to this is you can be fairly sure you've got things right before you potentially mess up your live content, and have to revert back to a standard template you don't like.

What will be described here

• The "Edit a Copy on Your Computer" is the best bet and that's procedure I'll describe here. For one thing, if you mess up, you won't have to puzzle out how to get back to a default and maybe lose some of the work that might have been good. For another, you can have confidence things are the way you want them before you make a live change.

Doing It

This is just how I happened to go about things. You may find your own ways and that's great. If you do, put them up on the web someplace and add a Trackback below.

1. If you have an account that allows it, make a sandbox/play blog just to mess around first.
2. Use the TypePad tools to get as far as you can towards your goals before doing the more manual customizations. That is, choose your theme and layouts, change content selection and ordering, colors, widgets, etc. as much as you can.
3. Go to that Blog and use your browser's "View > Page Source" menu choice to look at the page's HTML code. Copy this HTML code to an editor on your pc and Save it as newblogcss.htm or something like that.
4. Look at the HTML source code and find the CSS file link. It should look something like this:

   ≤link type="text/css" href="http://scottg.typepad.com/scottscss1/styles.css" rel="stylesheet" /≥

5. Use your browser to link to the stylesheet just as you would any other page. (That is, cut/paste everything from the http: just like any web page, and link to it.) It should just come up in your browswer.
6. Depending on what previous customizations you've made using the TypePad tools, you may have to call up another stylesheet or two. It may have what appears to be a cryptic address, like this:
   

   @import url(/.shared/themes/common/base-weblog.css);
   
   If so, that just means you'd need to link to here:
   http://www.typepad.com/.shared/themes/common/base-weblog.css

7. Now, there may be ANOTHER style sheet attached as well. Do the same thing. Use any text editor and take that second stylesheet and just add the contents to the bottom of the first one.
8. You now have a choice. You can clean things up a bit and make sure all the individual elements, (e.g. "body"), and so on, have their properties listed all in one place. Or just edit the components you want to change from here. It's work to clean it up. But... it'll make things easier. If instead of using a text editor like notepad, you're instead using a web page editing tool like Dreamweaver 8 with good CSS support, you should just be able to edit the individual CSS styles directly without having to bother with the cleanup.
9. Anyway, save this new CSS file, (change the name if you want, maybe something like mystyle.css), to the same directory where you put your HTML file.
10. Edit the HTML file to point to the stylesheet, now local on your filesystem. (Use mystyle.css or whatever you like. It really doesn't matter as you're only concerned with being able to view locally.)
11. Save a copy of this file. (Something like ORIGINAL_styles.css.) Now make sure when you go to edit, you're editing the mysteyle.css file, not the one you just named "ORIGINAL." (I know that's obvious, but c'mon, you've probably had accidents before with MS Word doc versions and similar.)
12. Now drag the HTML file into your browser and open the stylesheet in an editor. It's MUCH easier to edit the stylesheet in a professional stylesheet or web production tool. And if you are, you can just load the HTML into the editor as well. Personally, I use Dreamweaver 8. Of course, older versions or other products would do fine as well. (Purists will say it's better to hand edit the CSS file. But I just think you can try more things with a better/faster tool.) This is useful - if for no other reason - then you can easily get to help files that describe CSS selectors and their attributes. Of course, the main benefits include ease of editing and the end result being cleaner than you might do it by hand.
13. As you save each of your changes to the CSS file, you can quickly see changes in your page in the editors Design mode or you can click re-load on the browswer.
14. Once you're ok with how everything looks, you can copy the CSS code you've made up to TypePad. Just open your CSS file in a text editor, copy it, then go to the TypePad Custom CSS window and past it in. Check the preview and if all's ok, save it.
15. You're done.