Hello and welcome to my flock addons pages. Please feel free to contact me on mctones at gmail dot com with any comments/bugs/feature requests. Alternatively, drop by the forums . For the latest updates, be sure to head over to my blog and subscribe to the extensions category feed.

Blogplus: Preset Markup

Preset Styles: THIS PAGE IS OUT OF DATE, please ignore for now

You can use the Preset Markup sidebar to create, store and, when required, apply preset CSS styles to text selections. The extension comes with three example styles included.

1. Creating your preset style
Open the preset markup sidebar and click on the add button. In the 'Style CSS Code' multiline textbox, enter the css code, for example color: #cccccc;. There are many examples on the internet for learning css code, such as that found on w3schools.

Note that you should not use curly brakets {} or class/id's, just the inner css that is normally contained within the curly brakets.

By default, the highlighted text is enclosed in a <span> element so that the style can be applied, but a number of other possible elements are available for you to choose from.

2. Applying the preset style

Firstly, you must highlight the text you wish to apply the saved style to. You then have two options for applying the style:

  • With the sidebar open, select your style from the drop down list, then click on the apply button.
  • Use the toolbar preset markup dropdown list, select the style and the changes are applied to the highlighted text.
Important! When you first install the extension, you will have to customise your toolbar to get the Preset Markup dropdown list onto your toolbar (right-click on the toolbar). The very first time you do this, you will have to close and reopen your blog editor. Once this is done, the toolbar dropdown list will be permanently 'linked' to your preset markup sidebar database.

Preset Markup (useful for microformats):

You can use the Preset Markup sidebar to create, store and, when required, apply preset html markup to text selections, such as microformats. The extension comes with the following microformat example below included.

If we look at this example, a microformat address.

  • <div class="adr">
  • <div class="street-address">665 3rd St.</div>
  • <div class="extended-address">Suite 207</div>
  • <span class="locality">San Francisco</span>,
  • <span class="region">CA</span>
  • <span class="postal-code">94107</span>
  • <div class="country-name">U.S.A.</div>
  • </div>
This might be displayed as (non microformatted):

  • 665 3rd St.
  • Suite 207
  • San Francisco, CA 94107
  • U.S.A.

Step 1 - Creating a preset markup example.

If you look at the available preset microformats, there is one missing, the extended-address. Open up the preset markup dialog and click on the add button.

Select <div> as the element and 'extended-address' as the class and finally choose a name such as 'uF extended-adr' then save.

Step 2 - Applying the preset markup.

Write your address in the blog post and highlight it all. We will now go through and apply microformats.

a) With the whole address highlighted, select 'microformats (uf) adr' from the sidebar or toolbar dropdown list. Click apply if using sidebar dropdown list, toolbar dropdown list will be applied automatically. Note see Preset styles section above for important info about the toolbar dropdown list.
b) Next highlight only the street address and apply the 'uF street-adr'  markup
c) Next highlight only the extended address (if using one) and apply the 'uF extended-adr'  markup
d) Repeat all by highlighting relevant lines and applying the preset markup. After you have done, click on the source tab and the address should match the full microformatted example. There is no limit on how many microformats can be created and saved (unless you have a 100kb hard drive!!). Dedicated hCalendar and xfn dialogs have been included but for greater flexibility the preset markup sidebar should be used for all other microformats. One important 'bug' of which I have no control: If you highlight a line of text and apply a <span> element to it, and you then want a child <span> element within, the flock blog editor will split the first span element (<span class="foo"> This is my parent foo element</span><span class="bar">and this is my child element</span><span class="foo"> but hold on heres my parent again</span>) If you use the preset markup to apply to the child first, then it will work (<span class="foo"> This is my parent foo element<span class="bar">and this is my child element</span> still my parent</span>)