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.
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.
The code is kept as simple as possible to make it as easy as possible to change:
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:
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:
The header contains a banner carousel and a grey bar that is used for the social icons and the breadcrumbs.
See below code structure:
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:
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)
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:
The website contains the following css files:
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:
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:
The following scripts are included in the theme:
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.
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:
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:
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:
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.
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.
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:
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.
The basic structure for columns looks as follow:
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.
I've used the following images, icons or other files as listed.
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