## "Bright HMTL 5 & CSS 3 Theme" Documentation by "Starlette" v1.0

# "Bright HMTL 5 & CSS 3 Theme"

Created: 24/11/2014
By: Starlette
Email: info@starlett.co.za
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form here. Thanks so much!

### Table of contents

1. HTML Structure
   1. Top Navigation
   2. Header
   3. Main Content Area
   4. Footer
2. CSS Files and Structure
3. Changing theme overal color
4. Javascript
5. PHP Explained
   1. Contact Form
6. Using the FontAwesome Icons
7. Columns and their classes
8. Sources & Credits

### 1. HTML Structure back to top

The HTML structure is very basic. It consists of a header, nav, footer and section tag:
Note: all example code is selectable. The numbers next to them won't be copied with them.

1 <nav>...</nav>
2 <header>...</header>
3 <section>...</section>
4 <footer>...</footer>

The main content area consists of multiple section tags. Add a class of "parallax" and your custom class to call up your background image to achieve a parallax scrolling effect for that specific section. Add a class of "white" to make all text white on that section.

### 1.1. Top Navigation back to top

The code is kept as simple as possible to make it as easy as possible to change:

1 <nav>
2 <a class="logo" href="index.html">
3 <img src="images/logo.png" alt="YOUR LOGO GOES HERE" />
4 </a>
5 <ul>
6 <li><a href="#section-id">Page</a></li>
7 </ul>
8 </nav>

The menu is made to scroll down to the section it needs to go to (one-pager functionality) but you are able to still link it to a seperate page. To make it scroll down to its section, you will need to add a unique ID attribute to your section then link it in the top menu. See following example:

1 <nav>
2 <ul>
3 <li><a href="#about-us">About us</a></li>
4 </ul>
5 </nav>
6 <section id="about-us">...</section>

If you have a link in your menu that links to a seperate page and you want that link to have a active state when you are on that page, then you need to add a class to the link and on the page add that same class to the body tag. It can be any class because the javascript will check for it and add a class of "current" to that anchor tag. See example:

1 <body class="about-us">
2 <nav>
3 <ul>
4 <li><a href="about-us.php" class="about-us">About us</a></li>
5 </ul>
6 </nav>
7 </body>

### 1.2. Header back to top

The header contains a banner carousel and a grey bar that is used for the social icons and the breadcrumbs.
See below code structure:

1 <header>
2 <div class="banner">
3 <div class="bg1">
4 <h1>Heading</h1>
5 <h2>Sub text</h2>
6 <a class="btn" href="#">Read more button</a>
7 </div>
8 </div>
9 <ul>
10 <li class="breadcrumbs">
11 <ul>
12 <li><a href="#">Home</a></li>
13 <li><a href="#" class="current">Page</a></li>
14 </ul>
15 </li>
16 <li class="social-media">
17 <ul>
18 <li><a href="#" class="fa fa-linkedin"></a></li>
19 </ul>
20 </li>
21 </ul>
22 </header>

### 1.3. Main Content Area back to top

The main content area is devided into sections with the html 5 "section" tag. It is done in this way to achieve the parallax scrolling effect. See below the various examples:

1 <section class="center">
2 <h2>Heading
3 <small>Sub heading text</small>
4 </h2>
5 </section>
6
7 <section class="center white parallax bg6">
8 <h2>White heading
9 <small>White sub heading text</small>
10 </h2>
11 </section>

Class "center" center aligns the text
Class "white" makes all the text white
Class "bg6" calls up a background image. You can create your own custom class as well
Class "parallax" turns the section into a parallax scrolling effect (must be combined with a background image)

### 1.4. Footer back to top

The footer tag doesn't contain much. Just the copyright information. Additional styles were added for those who want to add a backlink to their company below the copyright information. View example:

1 <footer>
2 &copy; Copyright 2014 Bright HTML5 & CSS3 Theme<br />
3 <small>Designed and Developed by <a href="#">Company Name</a></small>
4 </footer>

### 2. CSS Files and Structure back to top

The website contains the following css files:

1. bright.main.css - The structure, style and functionality of the theme
2. bright.styles.css - The main overal color styles and the 6 additional color options styles
3. font-awesome.min.css - FontAwesome icons stylesheet
4. bright.font.min - Calls in the custom made icons font for the theme (just custom arrow icons etc)
5. banner.css - Stylesheet for Slick Slider plugin
6. showcase-carousel.css - Stylesheet for Wowslider plugin
7. lightGallery.css - Stylesheet for image popup gallery
8. animate.css - Stylesheet for animating section tags (as you scroll down to them)

The css in "bright.main.css" and "bright.styles.css" has been written in a clean format to make it easier to read and understand.
See below for example:

1 /*------------------------------------------------------------------
2 [Table of contents]
3
4 1. Body and Typography
5 -------------------------------------------------------------------*/
6
7 /*------------------------------------------------------------------
8 [1. Body and Typography]
9 -------------------------------------------------------------------*/

### 3. Changing theme overal color back to top

To change the theme overal blue color to your color is really simple and quick. You only need to change it in 4 places. In the "bright.styles.css" file on lines 62, 74, 80 and 106 change the current value (#84B8D7) to your color value. You will end up changing the color where ever it shows up as a border color, font color, background color and outline color.

You can also use one of the other 6 color options provided by adding one of the following classes to the body tag:

1. green
2. green2
3. orange
4. red
5. pink
6. purple

### 4. Javascript back to top

The following scripts are included in the theme:

1. jquery.min.js - Needed to make all jquery elements work
2. parallax.js - Applies parallax scrolling effect on the carousel banner and sections with a class of "parallax"
3. waypoints.min.js - Used to check when scrolled down to the counter items and percentage bars
4. banner.min.js - Slick Slider plugin code
5. counter.js - Makes the numbers count up as you scroll down to them (counter section)
6. lightGallery.min.js - Image popup gallery plugin
7. viewportchecker.js - Checks to see if a section is visible then animates it in from the bottom
8. bright.functions.js - The theme's main functions

### 5. PHP Explained back to top

The only time php is used in this them is for the contact form to make it fully functional. All you need to do is change the email adress in contact.php to your email adress.

### 5.1. Contact Form back to top

The contact form consists of a name-, email-, subject- and message textfield and with php (contact.php) the data submitted will be send through to your email adress. To change the email address used currently to yours open contact.php and on line 3 change "info@starlett.co.za" to your email adress.

The code that collects the data and sends it to you looks more-or-less like this:

1 // Collect the data submitted
2 $Name = Trim(stripslashes($_POST['name']));
3 // prepare email body text
4 $Body = '<html><body style="background-color:'.$body_background_color.';">';
5 $Body .= "</body></html>";
6 // send email
7 $success = mail($EmailTo, $Subject, $Body, $headers);

If you want to add more fields to your contact form then you will have to call them into the php as well. Lets use an example. Say you want to have a title field then the input would have a name attribute and id attribute of "title". So the html should look like this:

1 <input name="title" id="title" type="text" />

With that set up you'll need to adjust the php as well. Below line 7 in contact.php call up your newly added text field:

1 $title = Trim(stripslashes($_POST['title'])); // $title saves the submitted value

Below line 88 in contact.php you will paste the following to make sure the submitted data of the new field will be part of the email when it gets to you:
Note: the code can be kept as is, you just have to worry about the label of the submitted data and where the value of the submitted data will display. Below is explained where you will add the label and the value.

1 $Body .= '<tr>';
2 $Body .= '<td height="30" align="right" valign="top" style="font-family:'.$font_family.';
3 font-size:'.$text_size.'; line-height:'.$text_size.'; color:'.$text_color.';
4 font-weight:'.$font_weight_bold.';">';
5 $Body .= 'Title:'; // label for submitted data
6 $Body .= '</td>';
7 $Body .= '<td align="left" valign="top">&nbsp;</td>';
8 $Body .= '<td height="30" align="left" valign="top" style="font-family:'.$font_family.';
9 font-size:'.$text_size.'; line-height:'.$text_size.'; color:'.$text_color.';
10 font-weight:'.$font_weight_normal.';">';
11 $Body .= $title; // place submitted data here
12 $Body .= '</td>';
13 $Body .= '</tr>';

Because it is a title field it should go above "name" (in contact.php above line 66) but if it was any other kind of information then you can put it below line 72 or 81 or 88. Email me if you need any assistance with adjusting the contact.php file at info@starlett.co.za

The banner picture with the logo in the email you receive everytime someone fills out your contact form can be changed, as well as the styles and the link of the banner etc. On lines 13 to 16 in contact.php you must fill in your details. That includes your site's name, your site's link and the full url of your banner pic. The reply button you can leave as is. The full url for that will never change (basicly I'm not planning on deleting the image from my server).

On lines 24 to 37 you'll find the styles for the email body text which you can change in case you aren't too happy with the current design.

### 6. Using the FontAwesome Icons back to top

FontAwesome is a free-source font that provides you with over 400 icons to choose from. Because it is a font you can change the size and color with css as if it were text. You can even add text-shadow to it. The basic structure looks like this:

1 <span class="fa fa-icon-name"></span>

Class "fa" turns the span into a icon while class "fa-icon-name" assigns the specific icon the the span. Both classes are needed for it to work. The list of classes for each icon can be found here.

All the icons used in this theme are FontAwesome icons which means you can change the icon by changing the class to the icon you want to use instead.

### 7. Columns and their classes back to top

The basic structure for columns looks as follow:

1 <div class="columns columns-4">
2 <div class="column">...</div>
3 <div class="column">...</div>
4 <div class="column">...</div>
5 <div class="column">...</div>
6 </div>

Class "columns-4" creates 4 columns. There are 2 - 5 columns available. Classes for those are columns-2, columns-3, columns-4 and columns-5.

1 <div class="columns columns-2"> // 2 columns
2 <div class="column">...</div>
3 <div class="column">...</div>
4 </div>
5 <div class="columns columns-3"> // 3 columns
6 <div class="column">...</div>
7 <div class="column">...</div>
8 <div class="column">...</div>
9 </div>
10 <div class="columns columns-4"> // 4 columns
11 <div class="column">...</div>
12 <div class="column">...</div>
13 <div class="column">...</div>
14 <div class="column">...</div>
15 </div>
16 <div class="columns columns-5"> // 5 columns
17 <div class="column">...</div>
18 <div class="column">...</div>
19 <div class="column">...</div>
20 <div class="column">...</div>
21 <div class="column">...</div>
22 </div>

### 8. Sources & Credits back to top

I've used the following images, icons or other files as listed.

1. Icons from FontAwesome
2. Jquery Waypoints by Caleb Troughton
3. Parallax scrolling plugin by Ian Lunn
4. Showcase carousel by Wowslider
5. Viewport checker plugin by Dirk Groenen
6. Projects popup gallery by Sachinchoolur
7. Main top banner by Ken Wheeler
8. Images by Free HD Walls

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Starlette

Back to table of contents