Helli Template | Business, Company, Agency or Personal Profile Template

Helli Template - Documentation

Created: 15/08/2015
By: Rudhi Sasmito
Email: rudhisasmito@gmail.com

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 via my user page contact form here. Thanks so much!

A) HTML Structure

Helli template is designed to introduce and promotion your business, company, agency or personal profile. Helli template in design with simple, clean and modern.

This template made with Bootstrap, using HTML5, CSS3, JS and jQuery.

<!-- Load page -->
<div class="animationload">
...
</div>

<!-- NAVBAR SECTION -->
<div class="navbar navbar-helli navbar-fixed-top">
...
</div>

<!-- BANNER ROTATOR -->
<div class="section banner" data-slide="1">
...
</div>

<!-- ABOUT SECTION -->
<div id="about" class="section about" data-slide="2">
...
</div>

<!-- SERVICES SECTION -->
<div id="services" class="section services bg-grey" data-slide="3">
...
</div>

<!-- STATS SECTION -->
<div id="stat" class="section f2 stat" style="">
...
</div>

<!-- OUR WORK SECTION -->
<div id="ourwork" class="section ourwork" data-slide="4">
...
</div>

<!-- TEAM SECTION -->
<div id="ourteam" class="section ourteam bg-grey" data-slide="5">
...
</div>

<!-- STATS FACTS SECTION -->
<div id="stat" class="section f2 stat" style="">
...
</div>

<!-- TESTIMONIAL SECTION -->
<div id="ourteam" class="section testimony" data-slide="6">
...
</div>

<!-- PRICING SECTION -->
<div id="pricing" class="section pricing bg-grey" data-slide="7">
...
</div>

<!-- STATS VIDEO SECTION -->
<div id="stat" class="section f2 stat" style="">
...
</div>

<!-- BLOG SECTION -->
<div id="blog" class="section blog" data-slide="8">
...
</div>

<!-- GET IN TOUCH SECTION -->
<div id="contact" class="section contact bg-grey" data-slide="9">
...
</div>

<!-- CONNECT SECTION -->
<div id="stat" class="section f2 stat connect" style="">
...
</div>

<!-- FOOTER SECTION -->
<div class="footer">
...
</div>

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

.about-item a { color: #someColor; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

.about .about-item a { color: #someColor; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

BANNER ROTATOR SECTION

<li style="background-image:url(images/blog-3.jpg)">
  <div class="caption">
    <div class="title-box">
      <h2>3WE ARE <span class="f-red">HELLI</span></h2>
    </div>
    <p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean 
    est in volutpat amet sodales, porttitor bibendum facilisi suspendisse.</p>
  </div>
  <div class="overlay-bg"></div>
</li>

You can add a banner item by copying the code in the examples above. This method applies to the other section.

SKILL SECTION

<div class="circular-bar">
   <input type="text" class="dial" data-fgColor="#CD3636" data-width="150" data-height="150" 
   data-linecap=round value="60">
   <div class="circular-label-content">
      <label></label>
   </div>
   <div class="circular-bar-content">
      <strong>....</strong>
      <p>....</p>
   </div>
</div>

you can change color circular-bar skill by edited the atribute "data-fgColor"

GOOGLE MAPS SECTION

<div class="maps-wraper">
   <div id="cd-zoom-in"></div>
   <div id="cd-zoom-out"></div>
   <div id="maps" class="maps" data-lat="-7.452278" data-lng="112.708992">
   </div>
</div>

you can change coordinate google map by edited the atribute "data-lat" for latitute and "data-lng" for langitude

B) CSS Files and Structure

On the CSS side, we load different css files depending on the page that loads.

How to change a title/font from css

We recommend using the FireBug add on in Firefox for a fast identification of the css properties that you might want to change. Lets say for example that we want to change the color and add a link to the h1 represented in the picture below.

Open the style.css file form the root folder and search h3 until you find the color property in the file. Its on line 110 and it looks line this:

h3, h4, h5 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  color:#009;
}

Change the color with the one you want and hit save. Note that you've changed the color to all the headings (h3, h4 and h5). If you want to change only the h3 color, you have to separate the h3 and give it another color. The css should look like this.

h4, h5 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  color:#009;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  color:#custom_color
}

Now, lets say we wanted h1 to poin to http://google.com. At this point the h1 looks like this:

<h1>Shortcodes: Typography & paragraph styles</h1>

To make it point to a specific URL the h1 must look like this:

<h1><a href="http://www.google.com">Shortcodes: Typography & paragraph styles</a></h1>

You can make changes to the css to any elements. You just need to know the name of the element or div either by using FireBug or by opening the HTML and then search for that element in the css. Piece of cake!

C) JavaScript

This template imports different js files for the different sliders, lightboxes and interactive tabs from the homeplage and the rest of the pages. All the js is built around JQuery. What follows are some examples where jQuery was used:

FlexSlider

Jquery Knob

Magnific-popup

Owl Carousel

Maps Google

D) PSD Files

I've included two psds with this theme:

Homepage layout
Single Page Layout

The header dimension is 1680 x 768 pixel. If you'd like to change the main image in the header, open "header.psd", make the necessary adjustments, and then save the file as "slide-xxx.png".

Include any more specific information about your psds.

E) Search Engine Optimization

In order to improve your search engine ranking, and thus enable your web site to appear among search results, please don't forget to change the description and keywords with your own.

<meta name="description" content="">
<meta name="keywords" content="">

E) Sources and Credits

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

HTML, CSS and JS:

Images:

Fonts:

Raleway

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.

Rudhi Sasmito