Chapter 7: Custom Stylesheets

You can customize the appearance of text in the generated HTML files by creating and assigning a custom stylesheet to the blog. iBlog comes with a simple "Stylesheet Builder" that lets you create a stylesheet quite easily.

Stylesheet Builder

You can create a custom stylesheet using the built-in Stylesheet Builder in iBlog. You don't have to know CSS (Cascading Stylesheet Language) to create a stylesheet in iBlog. Of course, you can always create more advanced Stylesheets using CSS and save them at the appropriate location so you can assign them to the blog in the "Display Settings" tab of Edit Blog sheet.

Choose "Manage Stylesheets" in the "Resources" menu to launch the Stylesheet Editor.



Here are the steps to create and assign a new Stylesheet to the Blog.

1. Click on the "New" button.
2. Enter a name for the stylesheet and click on the "Save" button.
3. Click on the colors wells in the "Background" and "Text" boxes to set the colors for the different sections of the page. Note: You can instantly see the effect of your selections in the "Preview" area to the right.
4. You can also set some sections of the page to be enclosed in boxes.
5. You can set the color of the hyperlinks.
6. Click the Save button.

iBlog saves the settings in a .sxml file. This file is saved in the folder ~/Library/Application Support/iBlog/Stylesheets, where ~ is your HOME folder.

To assign this stylesheet to the blog, double click the blog name in the "Blogs & Categories" outline view in the main window. Click on the "Display Settings" tab and choose the newly created stylesheet in the Stylesheet popup button towards the end of the sheet. Click the preview button and reload the page in the browser to refresh the browser cache.

When you click the preview button, iBlog generates a stylesheet (.css file) from the custom stylesheet (.sxml) and saves it in the Blog folder. If you go to ~/Sites/iblog/BlogFolder you will see the styles-site.css stylesheet file generated by iBlog based on the settings in .sxml file.

You can also create a custom .css file and save it in the folder ~/Library/Application Support/iBlog/Stylesheets. After you relaunch iBlog you will be able to select this in the Stylesheet popup button in "Display Settings" tab of Add/Edit blog sheet.