TUTORIAL

To assist our customers with fully understanding and utilizing the features of the theme, we include with the theme a free download of the project file we have used for the preview site. The project file includes as a default setting all of the built-in style options we selected from the theme to build the preview site. The file will also show a first hand use of the various pieces of code used to implement some of the stunning features of the theme.
BANNER IMAGE

To accommodate earlier versions of RapidWeaver, the use of a banner image in Anthem requires one line of code as explained below. To utilize the built-in banner area of the theme to display your images, please follow the instructions below.

1. Click and drag your image into the Resources area of the project file (banner images used on the preview site measure 1100x x 600px. Images with small dimensions may not display properly due to the size of the banner area on larger viewing devices). The Resources area can be found on the left hand column of your project file. (Please note that the Resources area is limited to RapidWeaver 5 and above).

2. Insert the following code in the Custom CSS box within RapidWeaver (For RapidWeaver 6 and below, the Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS. For RapidWeaver 7, clink on the Inspector icon at the top-right side of your project file. The CSS section will appear as the first box on the left-hand side of the panel):

#feature {background-image: url(%resource(my-image.jpg)%);}

3. Replace the "my-image" with the name of the image. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

4. Your banner image will now appear in preview mode.
NAVIGATION/IMAGE NAVIGATION


The design of the theme allows for 2 levels of navigation - with up to 4 image sub-pages for each main link. To utilize the built-in image sub-navigation, please follow the instructions below.

1. Click and drag the image you would like to use for the sub-navigation link to the Resources area of the project file. (The theme will automatically resize the image of your choosing to display properly for the space allotted for the sub-navigation image.) The Resources area can be found on the left panel of the project file.

2. Once your image is in the Resources area, there is a Settings area just below the Resources area. Click on the Icon labeled Code.

3. Click on the box labeled JavaScript and enter the following code:

jQuery(function(){
AddImageToNav(1,1,"%resource(my-image.jpg)%");
});


The 1,1 in the code corresponds to the numerical order of the main navigation link, followed by the numerical order of the sub-navigation link. The code above will be applied to the first main navigation link, and the image will display for the first sub-page/link.

If your site has two sub-pages for the first main navigation link, then you would use the following code to have images for both sub-pages/links.

jQuery(function(){
AddImageToNav(1,1,"%resource(my-image.jpg)%");
AddImageToNav(1,2,”%resource(my-image.jpg)%");
});

The theme allows for up to 4 sub-navigation link images for each main navigation page/link.


4. Replace the "my-image" with the name of the image. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site.)

5. Your image/s will now display for the corresponding sub-page/s. There are also several style options for the navigation as well, including font, colors, and positioning.
SOCIAL ICONS

This theme includes the social icon set Font Awesome. You are given access to nearly 1,000 social icons to choose from for your site. Best of all, you are able to place the social icons anywhere within the main content areas of your site. Please follow the instructions below.

1. Copy and paste the following code in the main content area of the page you want the social icon to appear (this includes the sidebar area, too).

<a href='#'>Font Awesome code</a>

2. Replace the # with the page URL of your social icon.

3. Visit the Font Awesome website at the following link to search for the social icon/s you want to use for your site: Font Awesome.

4. Once you have found the social icon of your choosing, click on the icon. A new page will appear with a line of code at the bottom left hand corner of the page.

5. Copy the code from the Font Awesome website and replace the words Font Awesome code from the code above.

6. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. The code will have a pink background if successful. (For multiple social icons, repeat the above steps for each desired icon.)

EXTRA CONTENT AREAS

The theme contains many Extra Content Areas to expand your design choices and options. The Extra Content Areas are limited to using the Extra Content Stack with Stacks 2 and above and therefore can only be used on pages built using Stacks with the exception of Extra Content Area 9. You can download the Extra Content stack for free under Extra Content Stacks Plugin at the following link: Extra Content Stack.

When using the Extra Content stack, it is important to target the content within the stack if using margin or padding. Margin and padding should not be applied to the actual Extra Content stack that contains the content.

Please note that the Extra Content Areas begin with Extra Content #2 and end in Extra Content #7. Do not use any other Extra Content Areas as they are being utilized for other functions related to the theme with the exception of Extra Content Area 9. The Built-In Style options of theme include the ability to utilize your own custom background image or any solid color.
MAIN CONTENT/EXTRA CONTENT BACKGROUND IMAGE

To utilize the option of displaying a background image of your choosing for either the main content area, or the 6 Extra Content Areas, please follow the instructions below.

1. Click and drag your image into the Resources area of the project file. (Please ensure that your images are large, high quality images. Smaller images will not display clear or crisp). The Resources area can be found on the left hand column of RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5).

2. Insert the following code that corresponds to the background area you are targeting in the Custom CSS box within RapidWeaver (The Custom CSS area can be found by clicking on the Page Info icon at the top-right side of your project file. A panel will appear -- please click on the Header label. The Custom CSS box is located towards the center of the panel and labeled CSS):

MAIN CONTENT AREA ONLY

section #padding {background-image: url(%resource(my-image.jpg)%);}

EXTRA CONTENT AREA ONLY

#extraContainer? {background-image: url(%resource(my-image.jpg)%);}

3. Replace the "my-image" with the name of the image AND if utilizing the Extra Content Area, replace the ? with the appropriate Extra Content numbered area. ONLY Extra Content Areas 2-7 are useable options for this feature. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site).

Please note that content background images may switch from a switched position to one that scrolls on tablet and handheld devices. This has nothing to do with the theme and everything to do with the functionality and limitations of those devices.

Internet Explorer 8 also has limitation with processing background images. As a result, when viewed in Internet Explorer 8, background images will convert to the solid color selected for the corresponding background area.
MAIN CONTENT HEADER/EXTRA CONTENT #9

The EXTRA CONTENT #9 area is located above the main content and is used for a main content header area for those pages that may be limited with having a dedicated header area (i.e. Blog and Contact pages). To utilize this built-in extra content area, please use the following instructions for proper implementation.

1. Place the following code in a stacks container or the content area of the page. (For the Blog page the code can be placed in any blog entry. For the Contact page the code can be placed in the customizable text area of the the page).

<div id="myExtraContent9”>Sample Content</div>

2. Simply replace Sample Content with your own content.

3. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. The code will have a pink background if successful.

4. Under the Toggle Style Option, select Extra Content #9 On and your content will display.
LOGO

The theme has the capacity to accommodate a logo and will display at the center of the page just above the title. There are no set width or height requirements for the logo. The logo will automatically re-size based on the size of the viewing screen.
RESPONSIVE STACKS

This theme is a responsive theme. As a result, it is imperative to ensure that any stacks used with Stacks 2 and above, or any 3rd party products, are responsive as well. While it is not necessary to build a website with the theme using Stacks, it is a wonderful product that offers additional options to building your site, including hundreds of third party-products. If you choose to use Stacks, please ensure the stacks you are using are responsive.