EC (Extra Content) allows you to put content in areas of the page which normally cannot be easily edited. Use the ‘Preview Extra Content Containers’ option in the theme settings to view the location of Extra Content containers and find their names. To use Extra Content, follow these steps:

1) Make a note of the EC container you wish to use. Each EC container is assigned a number.

2) Switch RapidWeaver to edit mode (to prevent it refreshing the preview constantly). Under the RapidWeaver page inspector, click on the sidebar tab.

3) Enter the following code:

<div id="myExtraContent4">

This is just a standard HTML opening tag for a container. Note that the name and number in this tag should match the EC container you wish to use. So if for example you wanted to insert some text into Extra Content 7, you would enter myExtraContent7 in the tag, instead of myExtraContent4 shown above. Letters are case-sensitive - the "E" and "C" must be in uppercase with no gaps between words.

4) Put your content after this tag like this:

<div id="myExtraContent4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a eros vel purus molestie consectetuer. Duis elementum hendrerit ligula. Nam nonummy faucibus nisl.

If you are using a styled text sidebar, you can use text, pictures or links. If you are using a code sidebar, you can use text and most HTML tags.

5) To tell a web browser where your EC content ends, you must insert a closing tag like this after your content:

<div id="myExtraContent4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a eros vel purus molestie consectetuer. Duis elementum hendrerit ligula. Nam nonummy faucibus nisl.
</div>

6) If you have used the styled text sidebar, highlight your opening and closing tags (separately) and go to Format > Ignore Formatting. Be sure to highlight the whitespace after your tags as well. As well as highlighting your code a pale pink colour, this process will remove non-required line breaks and spaces RapidWeaver otherwise inserts after your tags.

There is no limit to the number of EC containers you can use, providing you do not have duplicated opening tags (tags which share the same EC container names). Note that you can combine the use of EC with using regular sidebar content. Basically everything wrapped in EC tags will be displayed in EC containers. Anything not wrapped in EC tags will be displayed in your sidebar as normal. If you are using the Stacks plugin, there is also an EC stack available. You can copy and paste EC code and content between the sidebars of different pages. More information on using EC can be found here: http://extracontent.info

Note: Some EC containers are only available when certain items such as search bars and breadcrumb links are in use. The EC contained used for double sidebar layouts is not shown as an option in the theme settings. Addtionally, when you use a double sidebar layout, the order in which some EC containers are presented in the page flow changes slightly as some containers become floated and have to be ordered backwards.

Padding, margins and line spacing
By default, some EC containers used in this theme have a 2.50em line spacing height specified. This creates a small gap above and below the text. When EC is not used, the gaps are hidden and the layout automatically condenses. If you are inserting more than a single line of text or other form of content, this extra line spacing can look odd. To reduce line spacing and insert margins above or below your EC, custom CSS code can be used:

#extraContainer~ {
    line-spacing: 1.00em;
    margin-top: 8px;
    margin-bottom: 8px;
}

In the above code, change "~" to the name of your EC container (e.g. 3). This custom code will reset the line spacing to 1.00em (single) and apply an 8px margin (gap) top and bottom. Note that in some instances you may wish to omit either top or bottom margins or change the dimensions specified above.

Extra content alignment
By default, all content inserted in EC containers is left aligned. However you can change alignment to left, center or right alignment. You can either add a CSS text-align:right property to the code snippet above, or you can change alignment inline using a pair of span tags like this when you insert your EC:

<div id="myExtraContent~"><span style="text-align:right">Some right aligned text!</span></div>

In the above example, everything inside the span tags will be right-aligned. Change "~" to the name of your EC container.

Styling EC using inline CSS
You can add CSS directly to your EC tags without requiring separate CSS code snippets. This is particularly useful in instances where you are using EC containers in locations such as the sidebar and you just need to quickly add some extra margin above to square things off. To use inline CSS, add a style property like the code below:

<div id="myExtraContent11" style="margin-top:8px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

In this example, a 8px margin will be sandwiched above EC11 to keep a sidebar level with a content container. It is these types of small amendments which can make a big difference to the appearance of a page and add to the professionalism of a completed project. Inline CSS works across all major web browsers and providing you don't make any mistakes in your code, a page will still validate as XHTML strict.