Exception Theme Instructions

Contents

1. Introduction
2. Getting Started
3. Fonts and Colors
4. Icons
5. Flex Slider and Parallax Background
6. Side Navigation (global-sidebar page layout)
7. Custom HTML Widgets

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

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 Page
2. Name the page Instructions
3. 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.

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}

/*parallax background heading and titles*/
#parallax-bg h1,#parallax-bg h2,#parallax-bg h3,#parallax-bg h4,#parallax-bg h5,#parallax-bg h6,#parallax-bg .wsite-content-title,#parallax-bg h2#wsite-com-title,#parallax-bg h2 span{color:#fff!important}

h1{font-size:42px}
h2{font-size:32px}
h3{font-size:26px}
h4{font-size:24px}
h5{font-size:18px}
h6{font-size:14px}
@media only screen and (max-width:567px) {h1{font-size:20px}h2{font-size:18px}h3{font-size:16px}h4{font-size:14px}h5{font-size:11px}h6{font-size:10px}}

/*paragraph text*/
p,.paragraph,div.paragraph span,p span{font-family:'Open Sans',Arial,sans-serif;font-weight:400;font-size:13px;color:#525252;line-height:1.5;margin:0 auto 1.6em}
div.paragraph span{color:#525252!important}

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.

The code below is where you will find the primary colors that make up the color scheme - The Bold Text are the actual color codes.

/*content a link color*/
#wsite-content a,.paragraph a{color:#118cd9}
/*color class*/
.nav li a:hover,.nav li a:focus,.wsite-menu li a:hover,.wsite-menu li a:focus,.nav li#active a,.nav li:hover
a,.color,.feature-box a,.caption- block p{color:#118cd9}
.testi-slider .author,.form-required,.contact-info-widget ul li a,#footer-wrap a:hover,#footer-bar a
{color:#118cd9!important}

/*blue backgrounds*/
.wsite-social-item,.wsite-com-product-social a,#topbar .wsite-social-item:hover,#topbar .wsite-com-product-
social a:hover,.caption-iconbox header,#wsite-menus .wsite-menu li a:hover,.header-section
h1::after,.header-section h2::after,.header-section h3::after,.header-section h4::after,
.accordion-toggle i,.divider-title .section-line::before,.plans-header.colored,.contact-info-widget ul
i,.effect-first h2,.innards .icon-container,.my_custom_menu li a:hover,#footer-wrap .wsite-button
{background:#118cd9 !important}
.progress-bar.colored,.testi-slider .flex-control-paging li a:hover,.testi-slider .flex-control-paging li
a.flex-active{background-color:#118cd9 !important}

/*blue borders*/
.box-services h3::after,blockquote,#parallax-bg .callout-box{border-left:2px solid #118cd9 !important}
.feature-box i{border:2px solid #118cd9}
.testi-slider .flex-control-paging li a{border:1px solid #118cd9}
.innards .icon-container::after{border-color:#118cd9 transparent transparent}

/*dark background*/
.plans-header.alternative,.progress-bar.alternative{background-color:#2c2c2c;}

/*Rgba Blue*/
.title-page #banner h2,.tall-header-page #banner h2,.landing-page #banner h2
{background:#118cd9;background:rgba(17,140,217,0.8)}

/*background-color options*/
.grey-bg{background:#333}
.grey-bg h1 .grey-bg h2,.grey-bg h3,.grey-bg h4,.grey-bg h5,.grey-bg p{color:#7c7c7c}
.light-grey-bg{background:#f6f6f6;border-top:1px solid #e2e2e2}
.color-bg{background:#118cd9}

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 Icons
You 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>

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.

Slider Caption Box Codes
<div class="wft-flexslide-box">
<h3>TITLE HERE</h3>
<h2>SUBTUTLE HERE</h2>
<p>CAPTION TEXT HERE</p>
<a class="wsite-button wsite-button-small wsite-button-highlight" href="**LINK HERE**" target="blank">
<span class="wsite-button-inner">BUTTON TEXT HERE</span>
</a>
</div>

Business 2 Business

Providing step by step guidance

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Read More..
<div class="wft-flexslide-title">TEXT HERE</div>
Experienced Business
<div class="wft-flexslide-text">TEXT HERE</div>
Get Ready to Lead

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.

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>

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

Title Widget h1.


<div class="header-section">
<h1>Title Widget h1
<span class="color">.</span>
</h1>
</div>


Title Widget h2.


<div class="header-section">
<h2>Title Widget h2
<span class="color">.</span>
</h2>
</div>


Title Widget H3.


<div class="header-section">
<h3>Title Widget H3
<span class="color">.</span>
</h3>
</div>


Title Widget H4.


<div class="header-section">
<h4>Title Widget H4
<span class="color">.</span>
</h4>
</div>

Icon Title Divider


<div class="divider-title">
<div class="divider-title-content">
<i class="fa fa-globe"></i>
<h3 class="divider-section-title">Icon Title Divider</h3>
<div class="section-line"></div>
</div>
</div>


Title Divider


<div class="divider-title">
<div class="divider-title-content">
<h3 class="divider-section-title">Title Divider</h3>
<div class="section-line"></div>
</div>
</div>


<div class="divider-title">
<div class="divider-title-content">
<div class="section-line"></div>
</div>
</div>

Social Media

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab corrupti, quasi? Beatae cumque maiores.


<div class="box-services">
<i class="font-icon color fa fa-comments-o fa-4x"></i>
<h3>Social Media</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Testimonial Scroller

  • Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per suscipit lobortis nisl ut aliquip ex ea commodo consequat. seacula quarta decima et quinta decima.
    James Smart
    Owner - Carthy Ltd
  • Ut wisi enim ad minim veniam, anteposuerit litterarum formas humanitatis per suscipit quis nostrud exerci tation ullamcorper seacula quarta decima et quinta decima suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    Gemma Topman
    MD - Enteprise Ltd
  • Nam liber tempor cum soluta nobis eleifend option congue nihil seacula quarta decima et quinta decima imperdiet doming id quod mazim placerat anteposuerit litterarum formas humanitatis per suscipit quis facer possim assum.
    Luthor Stevens
    Manager - Ethos Ltd
<div class="flexslider testi-slider">
<ul class="slides wft-center">
<li>
<blockquote><i class="fa fa-quote-left testi"></i>TEXT HERE<i class="fa fa-quote-right"></i>
<div class="author">AUTHOR HERE</div><div class="role">JOB ROLE HERE</div>
</blockquote>
</li>
<li>
<blockquote><i class="fa fa-quote-left"></i>TEXT HERE<i class="fa fa-quote-right"></i>
<div class="author">AUTHOR HEREn</div>
<div class="role">JOB ROLE HERE</div>
</blockquote>
</li>
<li>
<blockquote><i class="fa fa-quote-left"></i>TEXT HERE<i class="fa fa-quote-right"></i>
<div class="author">AUTHOR HERE</div>
<div class="role">JOB ROLE HERE</div>
</blockquote>
</li>
</ul>
</div>

Standard Price Box

Basic

$15/Month

Some basic description of the plan.
  • Unlimited Bandwidth
  • 1Website
  • 100 GBDisk Space
  • 10Databases
  • 100Email Addresses
  • -
  • -
<div class="plans">
<div class="plans-header colored">
<div class="title"><h4>Basic</h4></div>
<div class="price">
<h3>$<span>15</span><br>/Month<br></h3>
<small>Some basic description of the plan.</small>
</div>
</div>
<div class="features-list">
<ul class="features">
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>1</strong>Website</li>
<li><strong>100 GB</strong>Disk Space</li>
<li><strong>10</strong>Databases</li>
<li><strong>100</strong>Email Addresses</li>
<li>-</li>
<li>-</li>
</ul>
</div>
<div class="plans-footer">
<a class="wsite-button wsite-button-small wsite-button-normal" href="**LINK HERE**">
<span class="wsite-button-inner">Read More..</span>
</a></div>
</div>

Alternative Pricing Table

Basic

$15/Month

Some basic description of the plan.
  • Unlimited Bandwidth
  • 1Website
  • 100 GBDisk Space
  • 10Databases
  • 100Email Addresses
  • -
  • -
<div class="plans">
<div class="plans-header alternative">
<div class="title"><h4>Basic</h4></div>
<div class="price">
<h3>$<span>15</span><br>/Month<br></h3>
<small>Some basic description of the plan.</small>
</div>
</div>
<div class="features-list">
<ul class="features">
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>1</strong>Website</li>
<li><strong>100 GB</strong>Disk Space</li>
<li><strong>10</strong>Databases</li>
<li><strong>100</strong>Email Addresses</li>
<li>-</li>
<li>-</li>
</ul>
</div>
<div class="plans-footer">
<a class="wsite-button wsite-button-small wsite-button-normal" href="**LINK HERE**">
<span class="wsite-button-inner">Read More..</span>
</a></div>
</div>
weebly hover effect

Hover Boxes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Button
<div class="img-hoover-wrap">
<div class="hoverimg effect-first">
<img src="http://wft-exception.weebly.com/files/theme/**IMAGE NAME**.jpg" alt="weebly hover effect" />
<div class="img-overlay">
<h2>Hover Boxes</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<a class="info wsite-button wsite-button-small wsite-button-highlight" href="**LINK HERE**">
<span class="wsite-button-inner">Button</span>
</a>
</div>
</div>
</div>

Customer Feedback

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Public Conversations

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.
Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Free Consultation

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros.

<div id="accordion">
<h4 class="accordion-toggle"><i class="fa fa-users"></i>Customer Feedback</h4>
<div class="accordion-content default">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
<br>
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit.</p>
</div>
<h4 class="accordion-toggle"><i class="fa fa-comments"></i>Public Conversations</h4>
<div class="accordion-content">
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram.
<br>
Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
<h4 class="accordion-toggle"><i class="fa fa-thumbs-up"></i>Free Consultation</h4>
<div class="accordion-content">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
</div>
</div>
<div class="innards wow">
<div class="icon-container">
<i class="fa fa-check-square-o fa-3x"></i>
</div>
</div>

With Text

Etiam pretium quam sed lectus mollis, sed elementum velit cursus. Phasellus vitae mollis sem. Mauris vestibulum non urna ac placerat.

<div class="innards wow">
<div class="icon-container">
<i class="fa fa-bar-chart fa-3x"></i>
</div>
<h3>With Text</h3>
<p>Etiam pretium quam sed lectus mollis, sed elementum velit cursus. Phasellus vitae mollis sem. Mauris vestibulum non urna ac placerat.</p>
</div>

With Text and Link

Etiam pretium quam sed lectus mollis, sed elementum velit cursus. Phasellus vitae mollis sem. Mauris vestibulum non urna ac placerat.

Learn more
<div class="innards wow">
<div class="icon-container">
<i class="fa fa-bar-chart fa-3x"></i>
</div>
<h3>With Text and Link</h3>
<p>Etiam pretium quam sed lectus mollis, sed elementum velit cursus. Phasellus vitae mollis sem. Mauris vestibulum non urna ac placerat.</p>
<a href="**LINK HERE**">Learn more</a>
</div>
Paid Results

Eu sit soluta antiopam, postea sanctus in an vis. Pro primis insolens recteque ne, nostrum molestie splendide sed et elitr.

Learn more
<div class="feature-box">
<i class="font-icon fa fa-flask"></i>
<h5>Paid Results</h5>
<p> Eu sit soluta antiopam, postea sanctus in an vis. Pro primis insolens recteque ne, nostrum molestie splendide sed et elitr. </p>
<a href="#">Learn more</a>
</div>
Paid Results

Eu sit soluta antiopam, postea sanctus in an vis. Pro primis insolens recteque ne, nostrum molestie splendide sed et elitr.

<div class="feature-box">
<i class="font-icon fa fa-magic"></i>
<h5>Paid Results</h5>
<p> Eu sit soluta antiopam, postea sanctus in an vis. Pro primis insolens recteque ne, nostrum molestie splendide sed et elitr. </p>
</div>

Variation 1

Planning

<div class="bar">
<h6>Planning</h6>
<div class="progress progress-striped">
<div class="progress-bar colored" style="width: 70%;">
<span></span>
</div>
</div>
</div>

Variation 2

Planning

<div class="bar">
<h6>Planning</h6>
<div class="progress progress-striped">
<div class="progress-bar alternative" style="width: 70%;">
<span></span>
</div>
</div>
</div>
<div class="paragraph">
<div class="contact-info-widget">
<ul>
<li>
<i class="fa fa-map-marker"></i>
<div>112 Hanley Drive, Oakland, USA</div>
</li>
<li>
<i class="fa fa-phone"></i>
<div>+0846 756 320</div>
</li>
<li>
<i class="fa fa-phone"></i>
<div>+0646 856 709</div>
</li>
<li>
<i class="fa fa-envelope-o"></i>
<div>
<a href="**LINK HERE**" target="_blank">[email protected]</a>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<a href="**LINK HERE**" target="_blank">www.exception.com</a>
</div>
</li>
</ul>
</div>
</div>

Dave Johnson

07688 267 646

Email

[email protected]

<div class="caption-block">
<p>Dave Johnson</p>
<h3>
<i class="fa fa-phone"></i>
07688 267 646
</h3>
<p>Email</p>
<h3>
<i class="fa fa-envelope-o"></i>
<a target="_blank" href="**LINK HERE**">[email protected]</a>
</h3>
</div>

We are always happy to hear you   Get in touch