Exception Theme Instructions
Contents
1. Introduction2. 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 "instructions.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 instructions.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 instructions.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">
|
|
<div class="wft-flexslide-title">TEXT HERE</div>
|
|
<div class="wft-flexslide-text">TEXT HERE</div>
|
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
<div class="flexslider testi-slider">
|
Standard Price Box
Basic$15/MonthSome basic description of the plan.
|
<div class="plans">
|
Alternative Pricing Table
Basic$15/MonthSome basic description of the plan.
|
<div class="plans">
|
|
<div class="img-hoover-wrap">
|
Customer FeedbackDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Public ConversationsMirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et
quinta decima.
Free ConsultationUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
<div id="accordion">
|
|
|
<div class="innards wow">
|
With TextEtiam pretium quam sed lectus mollis, sed elementum velit cursus. Phasellus vitae mollis sem. Mauris vestibulum non urna ac placerat. |
<div class="innards wow">
|
With Text and LinkEtiam 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">
|
Paid ResultsEu 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">
|
Paid ResultsEu sit soluta antiopam, postea sanctus in an vis. Pro primis insolens recteque ne, nostrum molestie splendide sed et elitr. |
<div class="feature-box">
|
Variation 1
<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
<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="caption-block">
|
