Exception Theme Instructions

Contents

1. Introduction

Thank you for purchasing the Exception Weebly Template designed by WebfireThemes.com.
In the template, we have included all instructions in the "index.html" page layout.
These are visible both via the weebly editor and on your published website

2. Getting Started

Before you make a start, you'll notice the homepage is set to be this instructions file. We recommend the first step you take is to create a new page for
"instructions" and associate it to the index.html page layout. This way you will be able to refer back to this instruction file whenever you need to without
keeping it as the homepage.
If you publish your website at this point you will also be able to see the instructions via your website. To setup the page
like we recommend do this:
1. Click on pages > ADD > Standard Page2. Name the page Instructions3. Ensure the Index.html page layout is selected.
4. Change the Home page to the page layout you want to use.
5. Click Save and Edit.
Now you can set your homepage to use your preffered page layout.

3. Fonts and Color Schemes

You can edit the color scheme and font style/sizes by following the instructions below

Fonts

The primary Font settings are between line 73 and 89 in the main-style.css file. We recommend if changing font you use a websafe font.

A list of websafe fonts can be found here.The code for the primary fonts is below... the bold is where you can make changes on the font type and the size.
/*heading and titles*/
h1,h2,h3,h4,h5,h6,.wsite-content-title,#banner h2,.blog-title,h2,h2 span#wsite-com-title{color:#222;font-family:"lato",san-serif;font-weight:700;margin:0 0 20px}

Colors

The primary color scheme on the site is found in the main-style.css between lin 646 - 673
the CSS has been commented to describe each section so you know which colors to change...
In order to change the colors, simply change the hex color codes accordingly.

4. Icons

Icons can be used in text or in many of the widgets.
There is no way to integrate these icons directly with the weebly dashboard so you do need to change these manually in the code. The instructions in this
file clearly show you where to change the code.

Font Awesome IconsYou can find the list of icons and their codes in the Font Awesome Icon set at this link http://fortawesome.github.io/Font-Awesome/icons/Wherever there is a widget being used that includes an icon, you will see a line of code that looks like this: <i class="fa fa-twitter"></i>To change the icon just replace the code for that icon. EG: <i class="fa fa-facebook"></i>

5. FLEX Slider and Parallax Background

FLEX Slider

If you are using the "flex-slider.html" page layout for any of your pages, you will be able to add the images and captions via click to add and drag and drop.

Adding Slider Images

The HTML Code in this theme uses the following file names for the slider images.
- slide1.jpg- slide2.jpg- slide3.jpg

To ensure the images are consistant and display properly on all screen sizes, the following conditions should be met for each slide image you want to use:
- Your images must be renamed to be the same as the list above.
- Image sizes are the same on all slides (Recommended = 1400 x 720).
- Images are in "jpg" format.

Once you have got your images ready, all you need to do is upload them into the "assets" folder via the Weebly Code Editor by following these instructions:
1. In Weebly Dashboard, go to Design > Edit CSS/HTML
2. Click on the cog next to "ASSETS"
3. Select "Upload File"
4. Find your file and upload

Adding Slider Captions

Each slide has got a drag and drop content area above it for the caption. You can use any of the default Weebly Drag and Drop Elements within the slides.
We have also created some custom html styled caption boxes with this theme.

To add a custom styled HTML Widget, please follow these instructions:
1. drag the "Embed Code" element from the weebly dashboard into the drag and drop area over the picture/slide you want the caption to appear.
2. Copy and paste the HTML code for the caption box you want (from the list below) into the "Embed Code" HTML Widget.
3. Add/Edit the text you want to appear on the slider caption.

Adding additional Slides

If you want to use more than 3 slides you can add more in by inserting this code into the flex-slider.html and replacing the X
with the number slide it is. (EG: zoom_slide5.jpg)
<li>
<img src="/files/theme/zoom_slideX.jpg" alt="" />
<div class="flex-caption">
{slide-X:content global="false"}
</div>
</li>

You need to add this code into the flex-slider.html page layout after the last slide (be default this will be underneath line 77 where you see this comment:
<!--INSERT NEW SLIDES BELOW HERE-->

Parallax Background

The Parallax Background used on the "flex-slider.html" page layout can be updated adding a new image. Please follow these instructions to add/update the parallax image:
1. Prepare your image by making sure it is a jpg file, it is named para-bg.jpg and it is at least 1300 x 800 px
2. Upload the image (para-bg.jpg) by going to design > edit css/html and adding the file into the "assets" section
3. Publish your site and the new parallax image should appear.

6. Side Navigation (Sidebar page LayoutS)

The Global and non-global Sidebar page layouts allow you to display the main menu as a widget.

To display the menu in the sidebar, enter this code into a drag and drop "embed code" weebly element into the content area when
using one of the sidebar page layouts:
<div id='for_side_navi'></div>

7. Custom HTML Widgets

On any Drag and Drop content area we have included html code below that can be inserted into the Embed Custom Code element via the weebly
dashboard.

Simply copy and paste the code below to insert the widget via the drag and drop section.
The text that is BOLD in the code below is where you insert your own text after copying and pasting.
Anywhere you see this *LINK* should be replaced with a link. EG: <a href="*link*"> would be replaced
with <a href="http://www.google.com">To see the widgets in action, take a look at our demo page http://wft-exception.weebly.com