• Facebook
  • Twitter

Looks Good – Responsive HTML5 Template


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

HTML Structure


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:

Page structure

Below you will find default page structure :


CSS files and 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. Snap mobile
  2. Frame box
  3. Image pointers
  4. Pricing lists
  5. Contact
  6. Popup
  7. Sliders
  8. Animations
  9. To Top button
  10. Navigations blog
  11. Services list
  12. Blog post
  13. Blos single post
  14. Gallery
  15. Person box
  16. Comments
  17. Google Map
  18. Loader
  19. Forms
  20. Buttons
  21. Media sections


Media Sections


Looks Good allows you to create three types of Media Sections. To each type you can add any content you want.

Parallax

Kenburns media section

Kenburns media section

HTML markup:

Kemburns

Parallax media section

Parallax media section

HTML markup:

Video

HTML markup:

Remember to include plugin jquery.stellar.min.js to page where you are using media sections for proper element working.


Service List


Service List

Service List

HTML markup:


Sliders


All sliders in Looks Good are created with OWL Slider plugin – here you will find plugins documentation.
Also each page, where you are including the slider should have attached the following script:
owl.carousel.min.js

Below you will find general HTML markup for slider:

There are 4 types of sliders:

Main slider

Main slider

Example of usage can be found here.

Slider with bottom left pagination

Slider with bottom left pagination

Add class:
ct-pagination–BottomLeft – to create navigation at the bottom left side.

Slider with middle navigation

Slider with middle navigation

Add to the HTML markup class:
ct-navigation–variation1 – to create navigation in the middle of the slide.


Slider boxes


Looks Good comes with predefined boxes, which can be added in main slider:

Book form

Book form

HTML markup:

Notice: to define email address, where contact should send emails – edit /form/config.php file with your email.

Offer box

Offer box

Promo Box

Promo Box


Testimonials


Testimonials

Testimonials

There are three variations of testiomonials. Each can be enable with one of the following CSS classes added to HTML markup:

  • ct-testimonials–left – align testimonials to the left hand side,
  • ct-testimonials–right – align testimonials to the right hand side,
  • ct-testimonials – without frame
  • ct-testimonials–frame – with frame

General HTML markup to edit:


Accordion


Accordion

Accordion

Accordion can be created with the following HTML markup:


Blog


There are several types of blog posts, which can be used for you blog:

Featured post

Featured post

Featured post

HTML markup:

Blog post:

1) Simple post with picture

Simple post

Simple post

2.) Video post

Video post

Video post

3.) Gallery post with pagination

Gallery post with pagination

Gallery post with pagination

4.) Text post

Text post

Text post

5.) Different gallery post with navigation

Gallery post type 2

Gallery post type 2

6.) Post with quote

Post with blockquote

Post with blockquote

7.) Audio post

Audio post

Audio post

Basic HTML markup:


Single post page


There are several elements you will find on blog single page:

Single post - general view

Single post – general view

HTML markup:

Comment form

Comment form

Comments

Comments


Widgets


Sidebar widgets

Sidebar widgets

Sidebar widget

Sidebar widget

Each widget should have basic widgets classes, like the following:


Pagination


Pagination

Pagination

Use the following HTML markup to create blog posts pagination:


Social Buttons


We used two types of social buttons in Looks Good

Socials

Socials

HTML markup:

Rounded socials

Rounded socials


Header line


Header line

Header line

HTML markup:

You can use several header variations – just add one of the following classes to your HTML markup:

  • ct-header
  • ct-header–stretch
  • ct-header–doubleBorderTop
  • ct-header–doubleBorderBottom

Dotted menu


Create a price-list or table of content with simple HTML markup:

Dotted menu

Dotted menu


Gallery


Looks Good comes with three types of Gallery:

Standard gallery (OWL gallery)

Standard Gallery

Standard Gallery

Example of HTML markup:

Masonry Gallery

Masonry  gallery

Masonry gallery

HTML markup:

Gallery with filters

Gallery with filters

Gallery with filters

HTML markup:

Notice:
The following plugins are used in gallery:

owl-carousel.js
imagesloaded.js
jquery.isotope.min.js


Image Box


Image box is simply image with cool hover effect.

Image Box

Image Box

HTML markup:

Available variations – just add selected class to HTML markup:

  • ct-imageBox–transparent
  • ct-imageBox–doubleLine

Javascript


All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

  • HTML/assets/js/jquery.min.js – Jquery Plugin
  • HTML/assets/js/bootstrap.min.js – Bootstrap Plugin
  • HTML/assets/js/placeholder.min.js
  • HTML/assets/js/easing.1.3.js
  • HTML/assets/js/device.min.js
  • HTML/assets/js/jquery.browser.min.js
  • HTML/assets/js/snap.min.js – Snap Plugin is for responsive menu
  • HTML/assets/js/jquery.appear.js
  • HTML/assets/js/masonry.min.js – This is using in home page and in gallery
  • HTML/assets/plugins/owl/owl.carousel.min.js – slider plugin
  • HTML/assets/plugins/owl/init.js
  • HTML/assets/js/portfolio/imagesloaded.js – Needed for gallery
  • HTML/assets/plugins/magnific-popup/jquery.magnific.min.js – Needed for gallery, using when you want to see a big image after click on thumbnail
  • HTML/assets/plugins/magnific-popup/init.js
  • HTML/assets/plugins/ct-mediaSection/js/jquery.stellar.min.js
  • HTML/assets/plugins/ct-mediaSection/js/init.js
  • HTML/assets/js/jquery.gray.js this plugin is for image
  • http://maps.google.com/maps/api/js?sensor=false
  • HTML/assets/js/gmaps/gmap3.min.js
  • HTML/assets/js/gmaps/init.js
  • HTML/assets/js/datepicker/moment.js
  • HTML/assets/js/datepicker/bootstrap-datetimepicker.min.js – needed to have a small calendar on the page
  • HTML/assets/js/headroom/headroom.js – creates effect for menu and topbar
  • HTML/assets/js/headroom/jQuery.headroom.js
  • HTML/assets/js/headroom/init.js
  • HTML/assets/js/select2/select2.js – select input on the page
  • HTML/assets/js/main.js – Main scripts
  • HTML/assets/js/less.min.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

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/

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/


Contact Form


Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:


Sources & Credits


The following sources and files have been used to build up this theme


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!