Parallax - Weebly Theme Instructions

Contents

1. Introduction

Thank you for purchasing Parallax - a one page Weebly Theme designed by WebfireThemes.com.

This theme has been designed using Webfire Theme's new Design platform and includes great features to help you build a professional website easily, quickly
and with great results.

This theme comes with the option to purchase with Content Ready page layout. These are pre-designed page layouts with a mixture of drag and drop areas and
hard-coded content areas which can be edited simply by clicking and entering the content you want.

In the theme, we have also included all instructions as helper boxes which are visible via the weebly editor.

CONFIG and LIVE Page Layouts

Each Page Layout (with the exception of "coming-soon") has two variations:

Config - for building and configuring the page in the weebly dashboard
Live - for the live version published to the web
Whichever page layout you decide to use for your website, you should select the *-config version first. Build your site using the config variation of the page layout.
This includes all the helper boxes. Once you've created your website and are ready to put it live you should switch your page layout to *-live.
This will remove the helper boxes for your published website (The reason this is important is because google still reads the content on the helper boxes,
which is BAD for SEO (Search Engine Optimisation).
If you need to make further changes to your site, and need the helper boxes to appear again, simply change your page back to *-config to make the changes

The page layouts available are as below:1. "Coming-soon.html" - This page can be used as a landing page for your website while it is under construction.
2a. "cr-home-noslider-config.html" - This is the Content Ready Homepage (without slider). Use the *-config.html version to build the site.
2b. "cr-home-noslider-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
3a. "cr-home-slider-config.html" - This is the Content Ready Homepage (with slider). Use the *.config.html version to build the site.
3b. "cr-home-slider-live.html" - Once you have built the site, point the page to the *-live.html version and publish to make live.
4a. "home-noslider-config.html" - This is the Standard Homepage (without slider). Use the *-config.html version to build the site.
4b. "home-noslider-live.html" - Once you have build the site, point the page to the *-live.html version and publish to make live.
5a. "home-slider-config.html" - This is the Standard Homepage (with slider). Use the *-config.html version to build the site.
5b. "home-slider-live.html" - Once you have build the site, point the page to the *-live.html version and publish to make live.
6a. "standard-config.html" - This is the Standard external page. Use the *-config.html version to build the page.
6b. "standard-live.html" - Once you have build the page, point it to the *-live.html version and publish to make live.

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. Alternatively you can copy and paste the contents of this page into a word document and refer back to that. 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. Menu

The Parallax menu has been made easy to setup by using click to edit menu items.
Once you have set your homepage to be the page layout you want, you will see the menu helper at the top of the screen.
simply click on the "click here to edit" buttons for each of the associated menu items and type in what you want to appear here.
The last two menu items are for "external" pages. This basically means pages on your site that direct the visitor away from the one page homepage.
By default, these are setup for pages called "about" and "contact". This is only because on any new weebly site these two pages are setup when you create
the site.
If you want the links to take you to different pages you need to take the following steps.
1. Create two new pages via the weebly page sectoin (EG: Extras and info2. Open the page layout you are using: (design > edit CSS/HTML > page layouts)
3. Search for (CTRL+F) href="/about.html"4. Replace the page names for the 7th and 8th menu to link to the new pages you created:
<li><a class="external" href="/extras.html"></a></li>
<li><a class="external" href="/info.html"></a></li>

Section NamesEach menu item relates to a section on the homepage. the sections are named as follows:
#home
#tab1
#tab2
#tab3
#tab4
#portfolio
#tab6
Each of these can be used to reference as the "url" when using a scroll button. EG: href="/#tab4"

4. Header, Parallax Images and Video Background

If you're using the "cr-home-noslider-config.html" or "home-noslider-drag.html" page layouts you can change the header image by taking the following steps:
1. ensure the image you want to use is 1920x800 px (or larger, however the page will automatically rescale the image)
2. Rename the image to "header.jpg"
3. Replace the existing "header.jpg" file via weebly's designer section (DESIGN > edit CSS/HTML > files > add new file(s))

Slider Images 1. As with the instructions above, make sure the images are 1920x800 px and named "slide1.jpg, slide2.jpg, slide3.jpg"
2. Replace the existing slide1.jpg, slide2.jpg and slide3.jpg with your images via the add new file(s) section (as per instructions above)

Parallax ImagesTo change the parallax image, follow the same steps as for slider images. the only difference being you need to rename the files "bg1.jpg, bg2.jpg"

Changing the parallax image overlay1. open the main-style.css file (DESIGN > Edit CSS/HTML > main-style.css)
2. Search for (CTRL+F) for PARALLAX OVERLAY3. On the line below you wil see this code: .pattern{background-color:rgba(44,62,80,0.9)}4. To change the color simply change the RGB code (EG: .pattern{background-color:rgba(33,25,19,0.9)}5. The "0.9" is the opacity - we don't recommend you change this, however if you want to play around just change it to a decimal point between
0 and 1
You can find the hex color codes at this website http://www.w3schools.com/tags/ref_colorpicker.asp

Changing the drop shadow on the titlesFollow the same instructions as above, however change this line of code (directly underneath the code you changed for the image overlay
#slidecaption .sub-caption, .banner{text-shadow:2px 2px rgba(44, 62, 80, 0.9)}Adding the Youtube Video BackgroundJust above the Portfolio section you will see a grey empty section, simply drag over the weebly You Tube widget,
dont worry! the widget is not deisgned to be full width in the weebly dashboard but will be full width on the live website

5. Fonts and Colors

We have laid out the main-style.css file in a way that makes changing the fonts and colors easy. Please follow the instructions below to make changes as you require.

Fonts

PLEASE NOTE: Because this is a custom theme, we don't advise using the Weebly Font size changer to make the font size larger/smaller. Although this
will appear to work, and most of the time will, certain sections may become out of line if using this. We would advise adding in the text via the Custom HTML drag and drop
widget if you want to use a different size to the default.

1. Go to "DESIGN > EDIT CSS/HTML > main-style.css"
2. Scroll down to line 59
3. From line 59 and onwards you will see all the font sizes and styles of the theme. Each has a comment above it to describe what it relates to.
4. When you have found the part of the CSS you want to change, update it accordingly with the font size/style you wish to use.
EG 1 - (To Change the font size of H1) - change from:
h1{font-size:40px} TO h1{font-size:50px}EG 2 - (To change the font of the Navigation Menu) - Change from:
.menu ul li a &123;font-family:Montserrat,'Trebuchet MS',sans-serif;font-size: 13px;font-weight: 700;text-transform: uppercase;}TO.menu ul li a &123;font-family:"Times New Roman", Times, serif;font-size: 13px;font-weight: 700;text-transform: uppercase;}

Colors

1. Go to "DESIGN > EDIT CSS/HTML > main-style.css"
2. Scroll down to line 589
3. Each of the colors are grouped by category (EG: Accordion, Header, Footer etc) and comments are above different sections to describe what they are
4. To change any of the colors, find the color you want to change and replace with the color you want. Hex Colors should be used where possible.
EG: To change the color of the mobile toggle button, change the code from:
.toggle:after{color:#E56C69} TO .toggle:after{color:#FFFF00}

6. Portfolio Section

in the html page layout where the code is placed for the portfolio widget there is a section that defines the names of each filter. and in each of the image placeholders in the html, there is somewhere to define which filter to use.

EG:
This code is where you set the names of your filters (see bold). you can call this whatever you wish EG: "filter1", "filter2", "filter3"

so all you should need to do is tweak the existing code. you shouldn't need to add any new code in, unless you wanted more items to appear.

7. Icons

this theme makes the most of two sets of 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 here:
http://wft-parallax.weebly.com/features.htmlWherever 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>

8. 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-parallax.weebly.com