Tagged: Technical

Using a TypeList to Maintain Style

Matt at Diamondhacks was hacking on me about the difficulty of my previous technique for stylizing posts, so I did a little tinkering and have discovered a more robust method for managing the style formatting of your MLBlog than my previous post suggested. The coding technique is the same, but the method for injecting the code is slightly different. It involves using TypeLists, and uses essentially the same technique as site meters and other widgets. Here are the steps. Click on the thumbnail for a larger image demonstrating the action:

Selecting Weblog


Logon to MLBlogs. From the dashboard, select your weblog from the “Your Weblog” panel.

Selecting TypeLists - cropped


Select the TypeList tab.
Selecting a new Link TypeList - cropped


Select “Link” from the “List type” dropdown list in the “Create a New TypeList” panel to the right of the page.
Entering the name of a TypeList - Cropped and Highlighted


Enter the name of the TypeList. I recommend using “Styles”, and will refer to it as such in the remainder of the documentation.

Press the Create New List button - cropped and highlighted


Press the “Create new list” button.
Adding the list to your weblog - cropped


Select the “Add this list to your weblog(s) or About Page” link on the ensuing confirmation page, the “Recent Items:” page.
Add list to weblog dialog


Check your weblog (it will not be Some Ballyard, as in the example) from the popup dialog and press the “Save Changes” button. A status bar will indicate that the changes are being applied. When the changes are complete, you will receive a confirmation.
Closing the Add list to weblog dialog


Once the changes have been saved, select the “Close Window” button.
Selecting Add a new item from the TypeLists Manage Tab - cropped 9. You will be returned to the the “Recent Items:” page. Select “Add a new item”.   This will launch another popup window, the most important for our endeavor, the “Add item” dialog.
Inserting the Style logic into the Notes Field 10.

In the “Add item” dialog, enter a name for the style. Then paste your style code into the “Notes” textbox, e.g.:

p {color: green; font-size: 11pt}
a {color: #FF8800;}

You can read my earlier post on Formatting Posts for some admittedly scanty information on the code itself. I’ll be posting more information in future posts. For now I want to establish the process of creating and managing the code. Once you have inserted the code, press the “Save Item” button.

Selecting the Configure Tab for a TypeList - cropped 11. You will be returned to the “Recent Items:” page. Select the Configure tab for the TypeList.
Selecting Display notes As text from the TypeList Configure Tab - cropped and highlighted 12. On the Configure page for the TypeList, in the “Advanced configuration” section, check the “As text” radio button for the “Display notes” option. 
Saving Changes to the TypeList Configuration - cropped 13. Press the “Save Changes” button, and you are finished! Go to your site and you should be able to see the formatting you’ve specified. 
Selecting the Manage page for a TypeList - cropped 14. (Optional) If you want to modify the formatting, select the “Manage tab” for the TypeList.
Editing the Style on the Recent Items page - cropped 15. (Optional) Edit the code as desired and press the “Save and update”. You do not need to go through the Configuration page again. From this point forward all you need to do is modify the code and save the changes. 
Deleting a style from the Recent Items page - cropped 16. (Optional) If you really don’t like what you are seeing and can’t seem to get what you want, you can press the “Delete” button to remove the TypeList item, which will erase the item and remove all formatting associated with it.

After creation, you can edit and manage your styles from the TypeList page for your weblog. In case you can’t figure that out, I’ll be describing that process in detail in a future post.

Backing Up

Backing up is a critical operation for any computing endeavor. Amongst professional software developers, the assumption will be made when something goes awry–and it often does–that “You have a backup.” If you do not, you will get no sympathy, and you might get a pink slip. Although there are network backups and code repositories, I make a personal backup of my code each day, sometimes more than once.

I’m assuming MLBlogs backs up its servers, but you will want to backup your blog to your local machine in any case. What if MLBlogs should go under, God forbid? Or their Disaster Recovery Plan was like New Orleans’? It happens. So you should always take such matters into your own hands.

Here are the steps. Click on the thumbnail for a larger image demonstrating the action:

Selecting Weblog 1. Logon to MLBlogs. From the dashboard, select your weblog from the “Your Weblog” panel.
Selecting Import or Export - cropped  2. From the “Weblog Editing Shortcuts panel on the right of the page, select “Import/Export my posts”. 
Selecting export posts - Cropped 3. Click on the “Export Posts from your MLBlogs Weblog: yourweblog” link at the bottom of the Import/Export Posts page (yourweblog will be the name of your weblog).
Saving the Export - Cropped 4. A new web browser will open with your exported posts. Select “File”, then “Save as” from the browser window menu. You will be presented with a “Save as” dialog.
File Save Dialog 5. Enter a file name and press the “Save” button.  I lean toward appending the date to the weblog name as my convention, but you can use any naming convention you like.

You now have a backup of your site! In a later post I’ll tell you how to restore the backup in case of a catastrophe-which, in the version of TypePad specially modified for MLBlogs, is the only time you would want to restore. — Michael Norton

Formatting Posts

Note: be sure and read the post Using a TypeList to Maintain Style before proceeding…

For those of you interested in formatting your site, the proper method is to use styles. If you’ll include something like the following in a post (after selecting TypePad Editor - Entering Style with highlights"Edit HTML" in the TypePad posting editor interface), you can control the appearance of your posts.

p {color: green; font-size: 14pt}
a {color: #FF8800;}

The example formats the Paragraph (p) and Anchor (a) elements, which are probably the only ones you are interested in, except perhaps the visited link, which is a:visited, e.g.:

a:visited {color: red;}

You can find a complete list of attributes (font face and color, background color, etc.) and possible values (color, bold, etc.) at DevGuru.  He also has color charts for fine tuning colors using RGB values (the #FF8800 in the example).  Play around with things and find what you like.  You can, of course, get much more sophisticated.  If there is interest, I might give a tutorial on using CSS to make your site pretty much whatever you want it to be–notice my orange footers.

Note that all posts on the page are affected, as well as other aspects of the page! Once you’ve included the style you don’t need to include it with subsequent posts. You can remove the style and revert back to the default by saving the original post which contained the style without the style code snippet, which actually disappears after posting (so be sure and save a copy of the code someplace to cut and paste back in).

Important:  Although this change is rather innocuous, you should always make a backup of your site before attempting anything like what is described in this post (actually you should backup regularly anyway).  You can make a backup by exporting your site in the TypePad dashboard and saving the results.  If you do not know how to do this, wait.  My next post later today will describe the process of backing up your site in detail.

— Michael Norton