TUTORIAL

BANNER IMAGE

To utilize Halogen's built-in banner area for display of 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 of Halogen measured 1200px x 800px. 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 RapidWeaver just below your webpages. (Please note that the Resources area is limited to RapidWeaver 5).

2. Insert the following code 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):
#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.



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 5 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 4-8 are useable options. (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. To ensure your main content background image displays correctly, please select the Toggle option Main Content Background Image Formatting. To ensure your Extra Content background Image displays correctly, please select the Background Image Formatting Style Option for the corresponding Extra Content Area under Extra Content Background Textures.

Please note that content background images may not re-size proportionally 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. As an alternative, Halogen includes in the Toggle section under the Tablet / iPhone options, the ability to utilize a background image on the desktop, but then convert the image to a background color of your choosing when viewing the page on tablet / handheld 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.



BUILT-IN-SLIDESHOW

To utilize Halogen's built-in responsive slideshow for any page, please follow the instructions below.

1. Click and drag your images into the Resources area of the project file. The Resources area can be found on the left hand column of RapidWeaver just below your webpages. For proper display, please ensure slideshow images have a width of 980px. The height does not require a set measurement.

(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).

2. Please insert the following code in the sidebar area:

<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


3. Replace the word my-image within the code to the name of the image you would like to have as the first image for your slideshow. You have now just completed your slideshow with 1 image.

4. For each additional image you would like to add to your slideshow, you will need to add the following line of code for each image:
<li>
<img src="%resource(my-image.jpg)%" />
</li>


The code below shows the additional line of code should be placed after the first li sequence, and what your sidebar area should look for a slideshow with two images. You may continue to add images to your slideshow as needed. Please note that images will appear in corresponding order.

<div id="myExtraContent1">
<div class="flexslider">
<ul class="slides">

<li>
<img src="%resource(my-image.jpg)%" />
</li>

<li>
<img src="%resource(my-image.jpg)%" />
</li>

</ul>
</div>
</div>


5. To ensure your slideshow displays correctly, highlight the entire code in the sidebar area and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen. If this is done correctly, the entire code will have a pink highlight.

Please verify that the Display On under Built-In-Slideshow in the Styles section of RapidWeaver has been selected. There is also an option to choose between a slideshow that will transition images with a fade-in, fade-out feature, or slider effect under Built-In Slideshow Transitions in the Style Options section.



LOGO

Halogen has the capacity to accommodate a logo and will display it above the site title. If the site title is not utilized, the logo will display where the title is placed. There are no set width or height requirements for the logo.



EXTRA CONTENT AREAS

Halogen contains 5 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 therefore can only be used on pages built using Stacks 2. You can download the Extra Content stack for free under Extra Content Stacks Plugin at the following link: http://extracontent.info/downloads/.

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 #4 and end in Extra Content #8. Do not use any other Extra Content Areas as they are being utilized for other functions related to the theme. The Built-In Style options of theme include the ability to utilize your own custom background image, or choose between 12 background textures, or any solid color.


FLUID VIDEO

Halogen will ensure your videos adjust appropriately no matter how small or large the device is being used. Halogen supports embedded video from the following sites:

1. You Tube
2. Vimeo
3. KickStarter
4. Viddler
5. Blip

Once you have embedded your video from any of the compatible media sites listed above, highlight the code used for embedding and click on "Ignore Formatting" under Format. Your video is now set-up and ready to display appropriately on multiple devices.

(Please note that embedded video is not the actual link to the video but a string of generated code).




RESPONSIVE STACKS

Halogen is a responsive theme. As a result, it is imperative to ensure that any stacks used with Stacks 2, or any 3rd party products are responsive as well. While it is not necessary to build a website with Halogen using Stacks 2, 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 2, please ensure the stacks you are using are responsive. Joe Workman's responsive stack package is a great place to start your collection of responsive stacks and can be found at the following link: http://joeworkman.net/rapidweaver/stacks/responsive-layout/. The fluid image stack from this package was used for the images on the main page of this preview site.

Please note that standard stacks margin and paddings may not display properly with Internet Explorer 8.




TOGGLE OPTIONS

The following contains a brief description of the functionality for each of the Toggle Options included in Halogen:

No Banner
By selecting this option, you are eliminating the use of a main banner area. You then have the option of choosing between background textures, images, or a solid color.

Main Content Image Background Formatting
If you choose to utilize a background image for the main content area, you must select this option for proper display.

Main Content, EC #4 - 8 Tablet / iPhone Background Color On
If you are using a background image in the main content area or any of the Extra Content areas, but would like to switch the image to a solid color on the iPad or iPhone, please select this option for the corresponding content area. The background will display whichever color has been selected under the Colors categories for the respective content area.

Navigation Scroll Off
Disables the fixed navigation feature on the desktop and iPad. This feature is automatically disabled on the iPhone to ensure proper functionality.

Navigation Border Off
This setting is checked by default. If you are using the fixed navigation feature, but feel that the navigation boxes are blending in with the content while scrolling, disable this feature and each of the navigation boxes will have a 1px border to distinguish itself from the other content on the page. The border is a color customizable option under the Colors Style Options labeled Navigation Border.

Sidebar On
Displays the sidebar below the main content.

Photo Page Title, Move Page Title Description Extra Content Area On
This unique feature creates a separate, color customizable area for the title and description of your Photo and Movie Pages.

Blog Sidebar Above
This unique feature of Halogen will move your blog's sidebar content to the top of your blog entries, just below the main banner image.

Blog ENTRY Light / Dark Opacity Background
Choose from a light or dark opacity background for your blog entries. Ideal for blogs utilizing a main content background image.

Blog No Background
Removes the background for blog entries, and will display whichever background has been selected for the main content area.

Contact Form Light / Dark Opacity Background
Choose from a light or dark opacity background for your contact form. Ideal for a contact page utilizing a main content background image.

Contact Form No Background
Removes the background for the contact form, and will display whichever background has been selected for the main content area.
DISABLING CONSOLIDATE CSS

If you are experiencing any display issues with the theme, or if certain style options are not working properly, please disable the RapidWeaver Consolidate CSS File setting within Preferences. The disabling of this setting should restore your style option selections and display issues.



CONTACT PAGE + GOOGLE MAPS

To include a google maps of your choosing on the RapidWeaver Contact Page, please follow the instructions below.

1. Using Google maps, choose your destination or address that you would like displayed.
2. Click on the link icon at the top left side of the page (just left to the arrows of the map).
3. Click on the Customize and preview embedded map link. Select the Custom option and manually set the width to 500 and the height to 460 and press enter.
4. Copy the the generated code that begins with iframe and ends with iframe below to the Customizable Text area of the Contact Page. (The Customizable Text area can be found by clicking on the Page Info icon at the top right of RapidWeaver. A Page Inspector panel will display: select the Page icon at the top right side of the panel. Select Customizable Text).
5. On a separate line ABOVE the iframe google maps code, please add the following code:
<div id= "extraContainer9">
At the end of the iframe google maps code, please add the following code:
</div>

After refreshing the page, you can now preview your customized google maps on your contact page.


RAPIDWEAVER MANUAL

If you are new to the RapidWeaver community, or come across a setting that you are not quite sure of, the team at RealMac has compiled a great resource for RapidWeaver users and answers many questions about the software. From instructions on how to create sub-navigation pages to explaining the Resources area, you will most likely learn something new about RapidWeaver after reviewing the manual. You can find the manual at the following link: http://realmacsoftware.freshdesk.com/solution/categories/14470/folders/24470.



SOCIAL ICONS

To utilize Halogen's built-in social icons, please follow the instructions below.

1. Insert the following code in the Sidebar area within RapidWeaver:
<a class= "social" href= "#">f</a>
2. Replace the # with the page URL of your social icon.
3. Replace the letter f with the corresponding symbol of the social icon of your choice using the chart below.
4. Highlight the entire code and click Clear Formatting, then Ignore Formatting under Format at the top left of your screen.
(For multiple social icons, repeat the above steps for each desired icon.)
Stacks Image 108