“Propper” Documentation by “Theme Starz” v1.0.0

“Propper HTML Template”

Created: 30.08.2016
By: Theme Starz
Email: support@themestarz.net

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

You can have two styles of navigation:

Regular navigation with listed links - default
Navigation button only - add nav-btn-only class into navigation class in <nav> element

Block class

Block class adds top and bottom padding into content section, so the different content has nice white space between. Also you need to use this class if you want to set color or image background of the section (see bellow).

Background styling

The section can have color or image background using background-wrapper class. This class needs to be wrapped in block class.

Dark background example

<div class="block background-is-dark"> // background-is-dark tells that background is dark and it set all texts, buttons etc to white
    <div class="background-wrapper"> // basic wrapper
        <div class="background-color background-color-black"></div> // background-color-black will fill the background with black color
    </div>
</div>

Light grey background example

<div class="block">
    <div class="background-wrapper"> // basic wrapper
        <div class="background-color background-color-black opacity-5"></div> // background will be filled with black color, but opacity-5 will make it a light grey
    </div>
</div>

Background with image example

<div class="block">
    <div class="background-wrapper"> // basic wrapper
    <div class="bg-transfer opacity-15"> // bg-transfer class will transfer image into CSS background for better resizing control
        <img src="assets/img/gallery-big-01.jpg" alt=""> // path to the image
    </div>
        <div class="background-color background-color-black opacity-5"></div> // background will be filled with black color, but opacity-5 will make it a light grey
    </div>
</div>

Custom color background

<div class="block background-is-dark"> // background-is-dark tells that background is dark and it set all texts, buttons etc to white
    <div class="background-wrapper"> // basic wrapper
        <div class="background-color" data-background-color-custom="#093228"></div> // set HEX value of your custom color
    </div>
</div>

Owl carousel

Propper allows you to create a carousel without editing a JavaScript. All you need to is to set data- parameters. These data-attributes you can set:

data-owl-items - number of displayed items. Default 1
data-owl-nav - display navigation arrows. Default 0
data-owl-dots - display navigation dots. Default 0
data-owl-center - center the slide. Default 0
data-owl-loop - loop the carousel. Default 0
data-owl-margin - margin between slides. Default 0
data-owl-auto-width - dynamic width based on slide width. Default 0
data-owl-nav-container - container for navigation. Default 0
data-owl-autoplay - auto play slides. Default 0
data-owl-fadeout - fade animation between slides. Default 0

Email forms

To set the for receiving messages, open assets/php/email.php and change email@example.com to your own. Forms can have these four predefined name attributes:

name
email
phone
message

Inputs styling

You can choose between regular inputs style and underline. To add underline style, add inputs-underline class into <form> element.

Links hover effect

You can enable or disable "roll" effect on links hover. Just add links-hover-effect class into body to enable.

Loading screen (Pace plugin)

To enable loading screen just add has-loading-screenclass into body to enable.

Map settings

To display the map, you need to have these lines at the end of your page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
    var latitude = 34.038405; // latitude of the map center
    var longitude = -117.946944; // longitude of the map center
    var markerImage = "assets/img/map-marker-w.png"; // image of the marker icon
    var mapTheme = "dark"; // map theme. Use dark or light
    google.maps.event.addDomListener(window, 'load', simpleMap(latitude, longitude, markerImage, mapTheme));
</script>

Count down timer

To change the date of the countdown change these data attributes:

data-countdown-year
data-countdown-month - without "0". So for the July it is data-countdown-month="6"
data-countdown-day

Universal classes

font-color-white { color: #fff; }
font-color-black { color: #000; }
font-color-dark { color: $color-dark; }
no-margin { margin: 0; }
no-bottom-margin { margin-bottom: 0 !important; }
no-top-margin { margin-top: 0; }
note { @include opacity(.4); font-size: 12px; margin: 5px 0; }
half-bottom-margin { margin-bottom: 30px; }
row.no-gutters { margin-right: 0; margin-left: 0; }
row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] { padding-right: 0; padding-left: 0; }
shadow { @include box-shadow(0px 1px 10px rgba(0,0,0,.07)); }
stick-to-footer { margin-bottom: -60px; }
opacity-90 { @include opacity(.9); }
opacity-80 { @include opacity(.8); }
opacity-70 { @include opacity(.7); }
opacity-60 { @include opacity(.6); }
opacity-50 { @include opacity(.5); }
opacity-40 { @include opacity(.4); }
opacity-30 { @include opacity(.3); }
opacity-20 { @include opacity(.2); }
opacity-19 { @include opacity(.19); }
opacity-18 { @include opacity(.18); }
opacity-17 { @include opacity(.17); }
opacity-16 { @include opacity(.16); }
opacity-15 { @include opacity(.15); }
opacity-14 { @include opacity(.14); }
opacity-13 { @include opacity(.13); }
opacity-12 { @include opacity(.12); }
opacity-11 { @include opacity(.11); }
opacity-10 { @include opacity(.1); }
opacity-9 { @include opacity(.09); }
opacity-8 { @include opacity(.08); }
opacity-7 { @include opacity(.07); }
opacity-6 { @include opacity(.06); }
opacity-5 { @include opacity(.05); }
opacity-4 { @include opacity(.04); }
opacity-3 { @include opacity(.03); }
opacity-2 { @include opacity(.02); }
opacity-1 { @include opacity(.01); }
opacity-0 { @include opacity(.00); }
text-align-left { text-align: left; }
text-align-right { text-align: right; }
underline { text-decoration: underline; }
width-10 { width: 10%; }
width-20 { width: 20%; }
width-25 { width: 25%; }
width-30 { width: 30%; }
width-33 { width: 33%; }
width-40 { width: 40%; }
width-50 { width: 50%; }
width-60 { width: 60%; }
width-70 { width: 70%; }
width-80 { width: 80%; }
width-90 { width: 90%; }
height-10 { height: 10%; }
height-20 { height: 20%; }
height-30 { height: 30%; }
height-40 { height: 40%; }
height-50 { height: 50%; }
height-60 { height: 60%; }
height-70 { height: 70%; }
height-80 { height: 80%; }
height-90 { height: 90%; }
height-100 { height: 100%; }
height-200px { height: 200px !important; }
height-250px { height: 250px !important; }
height-300px { height: 300px !important; }
height-350px { height: 350px !important; }
height-400px { height: 400px !important; }
height-450px { height: 450px !important; }
height-500px { height: 500px !important; }
height-550px { height: 550px !important; }
height-600px { height: 600px !important; }
height-650px { height: 650px !important; }
height-700px { height: 700px !important; }
height-750px { height: 750px !important; }
height-800px { height: 800px !important; }
height-850px { height: 850px !important; }
height-900px { height: 900px !important; }
height-950px { height: 950px !important; }
height-1000px { height: 1000px !important; }
space { height: 60px; }

Icons used

Font Awesome

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.

Theme Starz

Go To Table of Contents