Houses HTML

Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

1. Responding to questions or problems regarding the item and its features
2. Fixing any discovered item’s bugs
3. Providing updates to ensure compatibility with new software versions

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

XHTML

<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="row">     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>     <div class="col-md-1">.col-md-1</div>   </div>   <div class="row">     <div class="col-md-8">.col-md-8</div>     <div class="col-md-4">.col-md-4</div>   </div>   <div class="row">     <div class="col-md-4">.col-md-4</div>     <div class="col-md-4">.col-md-4</div>     <div class="col-md-4">.col-md-4</div>   </div>   <div class="row">     <div class="col-md-6">.col-md-6</div>     <div class="col-md-6">.col-md-6</div>   </div>

Page structure

Below you will find default page structure :

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

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.

I.E.

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.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1. Animations
2. Divided Section
3. List Box
4. Promo
5. Divided Widget
6. Counter Box
7. Ratings
8. Weather
9. Board
10. Google Map
11. Headroom
12. Blog Box
13. Pagination
14. Lists
15. Bootsrap Media
16. Categories
17. Dividers
18. Media section, owl thumbnails
19. Divided Media Sections
20. Info Boxes
21. Calendar
22. Divider slider
23. Testimonial
24. Date picker
25. Contact
26. Gallery Container

Scroll page down to see animated fixed menu.

What you need to do is put the proper class to the body for example (ct-headroom–scrollUpMenu):

We han have fixed menu, animated, hided etc. We can add the moment when navbar should disappear, show itself etc.

Javascript

 The whole docs how to use ir properly, is in the_../assets/plugins/headroom/init.js

There are 3 pages for houses listing:

• book slider
• book 2 columns
• book 3 columns

EXAMPLE (book slider):

And there is common book page.

Use one of two elements dedicated for ratings:

• ratingBox
• rating stars:

We have few kinds of blogs in {Theme):

• normal index blog
• blog sidebar left
• blog full width
• blog single post.

Common blog post looks like:

We can put there any images, video, audio or slider medias. An example:

After entering any blog to blog single post we’ll get full blog post.

Navigate between blog posts with simple pagination:

How it looks?

Widgets can be used in footer and sidebar.

Houses comes with several variations for Bootstrap media – read more about Bootstrap media object:

• media
• media-slider
• media-sidebar
• media-author
• media-comment

Code snippet:

media-slider

media-sidebar

media-author

media-comment

All media can be nested inside its parent media-body.

All sliders included in Houses have the following common HTML markup:

There are three types of slider basis on this markup. To select each type you need to add one of the following CSS classes to <div class="item"> tag:

owl-carousel–arrowsType1

Slider -type 1

owl-carousel–arrowsType2

Slider – type 2

owl-carousel–arrowsOutside – navigation arrows will be displayed outside the slider content

Remember to include the following script in page with slider:

Learn more:
Check slider advanced option in plugin documentation.

Gallery Box

Put any image in columns in Gallery Box and you’ll get equal elements as images.
HTML markup:

There are several available variations of List Elements :

• ct-list
• ct-list–extended
• ct-list–tagged
• ct-list–colour
• ct-list–taggedNoBorder

Common HTML markup:

ct-list

ct-list ct-list–extended

ct-list ct-list–tagged

ct-list ct-list–colour

ct-list ct-list–taggedNoBorder

Each testimonial containes user’s feedback and his/her picture.

Button

Use the simple HTML markup to create a button:

Define button size by adding one of the following classes to HTML:

• btn
• btn-xs
• btn-sm
• btn-lg

And select one of the following color variations:

• btn-default
• btn-primary
• btn-secondary
• btn-link
• btn-transparent

Houses comes with two types of socials. Each type has it’s CSS variation:
ct-socials

Socials

ct-socials–small

Small socials

Both types have the same basic HTML markup:

We’re using tooltips for each social button.

Tooltip

Tooltip can be added with the following HTML markup:

You can change tooltip placement also to:

• bottom,
• left,
• right,

There are three types if media sections:

• Parallax,
• Video,
• Kenburns

Inside each of them you can add your custom content.

Parralax
We recommend you to use at least 1900px widht image as background
HTML markup:

Video
Consider having to 2 extended files: mp4 and webm.
HTML markup:

Kenburns
In kenburs we can add 3 images.
HTML markup:

Require scripts for Media sections:

We have two divided sections on media sections:

– ct-dividedSection–primary

– ct-dividedSection–secondary

We have divided media section where on the left side there is a video frame.

Script Source

All javascripts are placed in folder /js.

Javascript library structure

In main.js file we implement all functions calls.
This theme uses following Javascript scripts:

/counter/
Files needed for initialising the animation number after loading pages.

/data-picker/
Scripts for choosing the date from small calendar and attaching it to the input form.

/full-calendar/
This calendar is devoted to planning the events in the calendar. User can put some events there and review them between e.g. months, years etc.

/gmaps/
Plugin needed for displaying google map on the page.

/magnific-popup/
Needed for galleries and their popups images where we can review them with slides via arrows.

/select2/
Plugin which creates select box for select tag in the page. It generates html code via javascript so that each browser can have the same select box.

/zweatherfeed/
Weather plugin where we can see weathe on live.

externals.min.js
One big file where are minifixed javascript files:_ 1.jquery 2.boostrap 3.placeholder 4. easing 5. device.min.js 6. jquery browser 7.Snap min JS 8. jquery appear_

main.js
The main javascript initializaions and other major snippets.

/plugins/ct-mediaSections/
Media sections where we can add parralax, kenburns or video to the section. Dynamical content of medias.

/headroom/
Animated/fixed navbars. Plugin needed for detecting scrollbar and attaching animations for menu.

/owl/
Files which initialize sliders in the page.

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

Houses comes extenden calendar where you can attach any info events into it in javascript. If you want to invoke calendar, the only one thing is to put the code snippet in HTML:

Javascript Example of events, how to add:

Javascript

Full calendar documentation: http://fullcalendar.io/docs/