Blogs at Penn State Community

You can use code generated by the Stylecatcher to customize your own blog CSS theme file.
Note: The following documentation assumes familiarity with Cascading Style Sheets (CSS). Information on CSS files can be found at

• ITS Training CSS Resources
• Penn State Web Developer Guide

Note on Older Movable Type Styles

The new version of Movable Type includes styles not found in the previous versions of the blogs, so older themes may not work perfectly.

Find and Copy CSS Template

1. Login and enter your blog.
2. Click Design in the top menu then select Styles.
3. You should see a list of available preformatted styles. Click the option for MT 4 Style Library in the left to see all available styles.
   Note: There may be a delay before all styles are displayed.
4. Find a style that most closely approximates the style you want then highlight it. A larger version will be displayed in the right.
5. Click the CSS File link beneath the larger image of the theme.
   

6. Copy the CSS and paste it into a .css text file.
7. Change the CSS specifications as needed
8. Insert the following code at the top of your CSS file.
       /*
     name: Your Theme Name
     designer: Your name and name of original theme
     */

Key Divs

Below are a list of key DIVs used in Movable Type 4. Many include an -inner div as well.

• <div id="container"> is the main body of the blog excluding background images. The width of this DIV should always be a minimum of 940px.
• <div id="header"> is the top header of the blog. This can be changed as needed, although $MT variables should be left intact. This DIV also contains <div id=”header-inner”> which contains <div id=”header-content”>
• <div id=”content”> is the main page below the header.
• This div also contains <div id=”alpha”> which represents the large column with blog entries.
• <div id=”entry"> is an individual entry. Entry DIVs contain Asset DIVs
• <div id="beta"> is the sidebar which contains the <div id=”beta inner”> and various widget DIVs.
• <div id=”footer”> is the footer (bottom

Apply Custom Theme in Blog with Templates

1. Login to the Blogs system and enter a blog
2. Click Design in the top menu then select Templates.
3. Click link for Stylesheet – Main (styles.css).
4. Make sure the first line begins with “@import url(base_theme.css);”
5. Replace the rest of the CSS with your CSS markup.
6. Click Save and Publish, then click the View Site (page icon button at top) to test.
7. In the browser, click Shift+Control+R (Win) or Shift+Command+R (Mac) to make sure the updated style is loaded.

Uploading Style Images

If your CSS relies on images, then you may upload them into your blog in the Assets area. To upload images.

1. In the top menu click Create, then Upload File.
2. Select file to upload, but do not select a destination. Click the Upload button at the bottom. Files will be uploaded into the same directory as the style sheet.

Apply Custom Theme in Blog

1. Login to the Blogs system and enter a blog
   Note: You can click the white Main Menu link to return to the main blogs menu.
2. Click Select a Design using Stylecatcher in the lower right.
3. Enter the URL of your CSS file in the Theme or Repository URL field, then click Find Style.
4. Your theme CSS will be imported with the name in the /* name: */ description. Highlight it and click Apply Selected Design.
5. If you wish to include a background image, upload it to a directory, then use an absolute link in your CSS file (e.g. http://www.psu.edu/graphics/yourimage).
6. To test the site, click Main Menu in the right, enter the blog,
7. Within the blog, click View Site. If necessary, Shift Reload the page in your browser to verify that the new CSS has been applied.
8. If you need to revise your theme, then edit and re-upload your file, then re-import the theme following steps #1-6 in this section.

Apply Design with Style Catcher

These steps will allow you to create a Stylecather preview. The disadvantage is that if you update the CSS file, you will need to reapply the style each time.

1. Insert the following metadata at the top of your CSS file.
       /*
     name: Your Theme Name
     designer: Your name and name of original theme
     designer_url: this is optional
     developer: this is optional
     developer_url: this is optional
     desciption: Describe theme here (this is optional)
     layouts: layout-wtt, layout-twt, layout-wt, layout-tw
     */
2. Create a folder for your theme in PASS space (the folder can be in your /blogs directory)
3. Upload your CSS file and any images used in your style to the folder.
4. If you want a thumbnail displayed in the Style Catcher, then take large and small screen capture of your blog and name the files thumbnail.gif (ca 150 px wide) and thumbail-large.gif (ca 400 px wide) respectively. Load these images in the same directory as the CSS file.
5. Determine the URL to your theme (e.g. http://www.personal.psu.edu/xyz123/blogs/mytheme/theme.css).
6. Login and enter your blog.
7. Click Design in the top menu then select Styles.
8. Click the plus button next to the Saved Styles text above the style preview grid.
9. Copy and paste the URL of your style into the pop-up window and click OK. The style preview will appear in the preview area.
10. Highlight style and click Apply Design in the lower right.