Classes Structure

Miscellaneous classes

There are also miscellaneous classes that do all sorts of stuff:

Height class presets:

These height classes are all in pixels and they go from 10 to 10px, begining with 0 ending with 700px. These heights are generally added to the page-header block which will use your predefined height. The classes are:

Min Height:
.min-200 { min-height: 200px !important;}
.min-380 { min-height: 380px !important;}
.min-330 { min-height: 330px !important;}
.min-370 { min-height: 370px !important;}
.min-400 { min-height: 400px !important;}
.min-450 { min-height: 450px !important;}
.min-500 { min-height: 500px !important;}
.min-700 { min-height: 700px !important;}
.min-820 { min-height: 820px !important;}

Heights:
.h-260 { height: 260px !important;}
.h-320 { height: 320px !important;}
.h-520 { height: 520px !important;}
.h-545 { height: 545px !important;}
.h-400 { height: 400px !important;}
.h-500 { height: 500px !important;}
.h-600 { height: 600px !important;}
.h-625 { height: 625px !important;}
.h-720 { height: 720px !important;}
.h-760 { height: 760px !important;}

Back To Top

Text colors and background colors

We included in this template several color presets that will style your element directly when applying the class. The styles can be found in template.css

The general syntax of the classes is simple .color, so the text color classes are:

.white [i'm an example]
.black [i'm an example]
.gray [i'm an example]

 

Background colors:

Background colors can be added also on any element, they can be found in template.css and their general syntax is simple like .bg-[color] , so the classes are:

.bg-white,
.bg-gray,
.bg-lightgray,
.bg-dark-gray

 

Back To Top

Typography classes

Inside stylesheet css/template.css you can see there are lots of predefined classes. I’ll cover here the typography classes.

 

Font sizing:

Because there’s a wide variety of headings and custom font sizes i added predefined sizing:

.fs-smaller {font-size:70%;}
.fs-small {font-size:90%;}
.fs-big {font-size:110%;}
.fs-bigger {font-size:140%;}
.fs-14 {font-size:14px;}
.fs-15 {font-size:15px;}
.fs-16 {font-size:16px;}
.fs-18 {font-size:18px;}

Font-width:

Font width’s means the thickness of the font. As you know fonts have the css property of font-width and values are 100, 200, 300 ….. 900 which means how think a font should be. I honestly don’t know a font that’s having all these thickness values so i just covered a few:

.fw-vthin {font-weight: 100;}
.fw-thin {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700;}
.fw-extrabold {font-weight: 800;}

And a general example is:

<h4 class="fw-extrabold"> I'm a heading and i'm so bold, wait.. i'm extrabold!!</h4>

 

Letter Spacing

Letter spacings as it’s called, will add spaces between each letter in a word/phrase/paragraph. The classes are:

.lt-spacing-1 {letter-spacing: 1px;}
.lt-spacing-2 {letter-spacing: 2px;}
.lt-spacing-3 {letter-spacing: 3px;}
.lt-spacing-5 {letter-spacing: 5px;}

 

Back To Top

Margins and paddings

My motivation to do this, add predefined classes for custom margins and paddings is that, because of spacing inconsistency and desire of providing a good flexibility. The margins/paddings are

  • 5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px
  • 60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px

So the classes structure would be:

For margins:

  • Top: mt-##, example classes: mt-20 , mt-40, mt-100 etc.
  • Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.
  • Left: ml-##, eg: ml-20, ml-40, ml-100 etc.
  • Right: mr-##, eg: mr-20, mr-40, mr-100 etc.

For paddings:

  • Top: ptop-##, example classes: ptop-20 , ptop-40, ptop-100 etc.
  • Bottom: pbottom-##, eg: pbottom-20, pbottom-40, pbottom-100 etc.
  • Left: p-left-##, eg: pleft-20, pl-40, pleft-100 etc.
  • Right: p-right-##, eg: p-right-20, p-right-40, p-right-100 etc.

 

These are all preset classes and it’s your choice whether you should use them or not.

Back To Top

Components

Js based components

Search domain (Google)

In js/kl-scripts.js file around line 13 change with your website link.

 

 

Chaser menu

In js/kl-scripts.js file around line 99 change with 1 or 0 if you want the chaser menu on.

 

 

Tweets in footer

Search in js/kl-scripts.js file “Tweets in Footer” and change ID with yours.

50

If you don’t use twitter plugin we recommended to comment/delete this, to not load unnecessary resources to slow down your website.

 

Mailchimp newsletter

This is an embeded form generated by Mailchimp application but customised for Kallyas template. You just need to change the action attribute to your own custom link.

For example the link looks like : http://my_hogash_list.us3.list-manage1.com/subscribe/post?u=9cbcf2e6a8sfgh56528&amp;id=5544sdfe9da6

Get yours from your Mailchimp account.

Here’s an in depth tutorial here http://designshack.net/articles/css/custom-mailchimp-email-signup-form/ or from MailChimp on how it works http://kb.mailchimp.com/lists/signup-forms/create-signup-forms-and-response-emails .

Back To Top

Elements

1) Screenshot box

19

Html markup:

20

Then load the script:

screenshot

 

 

2) Grid photo gallery

22

Grid photo gallery have 2 style: square ratio and shorter ratio

Square ratio style markup:

23

Load scripts in the html page:

To change in shorter ratio style, just change the class:

25

 

 

3) Recent work carousel

26

Recent work carousel has 4 styles, you can see the markup in elements-recent-work.html file and scripts are loaded separately in the footer.

 

 

4) Latest posts

27

The latest posts has 5 styles, the markup for each one is in the elements-latest-posts.html file.

 

 

5) Devices and frames

28

For devices there are 2 styles of frames images/devices/. The markup for each one you will find in elements-devices.html file.

 

 

6) Media containers

29

Change the image and the text directly from the html markup.

 

 

7) Google map

30

To add map in a page and a info panel, use this markup:

31

and load the script:

maps

 

 

8) Search box

33

The search box has 4 styles, you can find them in elements-search-box.html file.

 

 

9) Action box

34

Action box has 3 styles, you can find them in elements-action-box.html file, each one has the same markup the difference between them is only the style class:

action_box style1
action_box style2
action_box style3

 

 

10) Big social

35

Big social has 2 styles and can be used boxed or full width.

 

 

11) Call out banner

36

Call out banner has 3 styles, you can find them in elements-call-out-banner.html file. Use demo markup and change text.

 

 

12) Partners and testimonials

37

Testimonials has 4 width styles (1, 2, 3, 4), you can change the width style direct from html markup:

ts-pt-testimonials__item ts-pt-testimonials__item--size-2 ts-pt-testimonials__item--normal

Partners logo html markup:

38

Load the script in your page:

partners

 

 

13) Circle box title

40

Circle box title has 3 style, you can find the markup in elements-circle-title-box.html file.

 

 

14) Historic element

41

Find the markup in elements-historic-element.html file.

 

 

15) Hover boxes element

42

Find the markup in elements-hover-boxes.html file.

 

 

16) Services boxes element

43

Find the markup in elements-services.html file.

 

 

17) Icon boxe element

44

Find the markup in elements-icon-box.html file.

 

 

18) Icon box grid element

45

Use your preferred one, by choosing markup from elements-icon-box-grid.html file.

 

 

19) Image box element

46

Image box has 3 styles, use your preferred one, by choosing markup from elements-image-box.html file.

 

 

20) Contact form element

47

The markup:

48

Don’t forget to change in php_helpers/_contact-process.php file the email around line 10.

 

 

21) Stage and icon boxes

49

Find the markup in elements-stage-and-icon-boxes.html file around line 686.

Back To Top

General components

Below there are several components that have options (styling classes). This template is a demo/showcase for all elements so for other components you can simply copy paste & edit the html markup.

 

Page sub-header

15
The markup:
16

In kl-bg-source div we have the background for sub-header, you can use a gradient, simple color, image, sparkles, video.

To make your custom background gradient enter on this website and generate one: http://www.colorzilla.com/gradient-editor/

To add sparkles you need to load this script on html page:

17

 

Sub-header masks

All styles of sub-headers mark-up are in the components mark-up/sub-header masks/mask-style.html take the preferred style and add to your sub-header mark-up:

18

Kallyas Videos

Sample markup:

As you can see the setup is being made by the data-setup attribute which has options such as:

  • position – The position css value for the video object to be created, make it “absolute” or “fixed”, being that the latest makes it scroll with the page (used for fullpage backgrounds usually)
  • z-index – The z-index css property for the background video, usually set it to “-1” or “0”, being that -1 will put it behind absolutely everything, even the background-color itself
  • video_ratio – If you want your video to fill all the available area (will crop some parts of the video potentially but looks terrific) set here the value resulting from the calculation width_of_the_video/height_of_the_video
  • loop – Set to true or false depending if you want the video to loop or not when it reaches the end
  • autoplay – Set to true or false depending if you want the video to start to play immediately or not
  • muted – Set to true or false depending if you want the video to start muted or not
  • mp4 – The path to the mp4 video format
  • webm – The path to the webm video format
  • ogg – The path to the mp4 video format
  • youtube – The id of the youtube video
  • start – Available for youtube videos only, sets the time in seconds you want the video to start at
  • fallback_image – The image to fallback to on mobile devices

Remember: videos can only be seen on desktop devices as mobiles are still buggy, so as a fallback for smartphones/tablets there will only be displayed the poster.

Video control positions:

You can reposition the video controls by simply adding data-position attribute on the .kl-video--controls block. The positions can be: top-left, top-center, bottom-right, bottom-left, bottom-center, middle-right, middle-left, middle-center .

Back To Top

Folder Structure

Other folders & files

There are the common folders “css”, “js” and “images”. These are obvious and for Css and Js folder i will explain later on in depth.

.htaccess file :

This is a file that’s being used by the server (definition: A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers).

Inside there are a few lines that are commented, used by the Retina Images feature. Will explain later on about the Retina images feature.

Also there’s a caching feature (will speed up your website). It’s enabled by default but it will only work if the server’s Apache support these features (eg: mod_deflate, mod_expires or mod_headers)

_retinaimages.php file:

This is used by the Retina images script. Will explain later in the documentation about it.

humans.txt

An initiative to know the creators of the website. Contains the information about humans to the web building. This file is NOT needed so don’t worry too much about it, just don’t forget to edit it.

robots.txt

Information on the robots.txt Robots Exclusion Standard and other articles about writing well-behaved Web robots. Our websites are constantly being scanned by robots. This file tells the bots what not to scan. For example there are some folders you simply don’t want to be scanned and shown in the search results.

Back To Top

Plugins folder

This folder contains various plugins used by Kallyas template:

 

Scrollme

Folder "/js/plugins/scrollme", performs a scroll effect on the slideshow section.

2

This effect can be disabled by removing this line:

3

Raphael Diagram

Folder "/addons/raphael_diagram", makes possible this beautiful diagram:

4

Magnific Popup

Folder "/js/plugins/magnific_popup", this plugin is used for images, videos and gallery popup:

5

jQuery Loupe

Folder "/js/plugins/jquery_loupe", this plugin is used to create a loupe on a image:

6

Don’t forget to load in the html page the plugin and the settings for the loupe:

7

Flickr Feed

Folder "/js/plugins/flickrfeed", this plugin is used to create a flickrfeed gallery:

8

To make this gallery, load the plugin in the html page:

9

and this is the html markup that you need:

10

Back To Top

Php Helpers Folder

This folder is being used by several components of the website. That’s because plain HTML doesn’t do dynamic stuff, there’s simply no other way.

Contact process php script (_contact-process.php)

This file is being used the the contact forms in the template and it cleans, checks and sends emails to the email address you specify. Don’t forget to change the email address!
There were many users that asked if there could be added other fields to this script. The truth is that it can, but unfortunately we (author) cannot handle any customizations requests so this will have to be done by you or another experienced developer.

Mobile detection (Mobile_Detect.php & _ismobiledevice.php)

Mobile_Detect.php is a php class used to detect what type of device is accessing the website. More here: http://mobiledetect.net/

_ismobiledevice.php is the file that imports the mobile detect php class and creates the conditionals of what to return. The data is added to the body class with the help of AJAX in kl-scripts.js file.

Date.php

This file is used for display the date on the page sub-header.

Back To Top

General Stuff

Use TextCrawler

TextCrawler is a free software with Search & Replace across files, insert or delete text. You can download from here http://www.digitalvolcano.co.uk/textcrawler.html

As mentioned on their website:

TextCrawler is a fantastic tool for anyone who works with text files. This powerful program enables you to instantly find and replace words and phrases across multiple files and folders. It utilises a flexible Regular Expression engine to enable you to create sophisticated searches, preview replace, perform batch operations, extract text from files and more. It is fast and easy to use, and as powerful as you need it to be.

I use this one to search a string of text to find out where it is across the whole folder and sometimes to batch replace.

Back To Top

Author note

Hey guys, thank you so much for purchasing my template. It’s a hard worked template and i’ve tried to release it with very few bugs or problems and i’ve tested it in many ways, but, problems might appear so i will kindly ask you in case of encountering problems, please start a new thread over the support forums. Thank you so much!!

Back To Top

Don’t forget to!

These are just a few to do’s that you should not forget about:

Change the email address with your own:

Add your email address in the php_helpers/_contact-process.php page. I still receive emails in my inbox from users who bought other items from me, and haven’t changed the email address there.

Change Twitter widget id:

If you’re planning to use the Twitter feed, don’t forget to change the Widget ID from the js/kl-scripts.js file (search for “twitter”). The id could get blocked if there are too many requests.

Change MailChimp ID:

If you’re going to use the newsletter component, make sure you add your own Mailchimp id.

Add a Google Analytics tracking code:

Don’t forget to track your visitors by adding the Analytics ID (in the bottom of each page).

Edit humans.txt file in the root (or simply delete it if you don’t want it)

Back To Top

Use server-side environment (eg localhost)

For a better experience with the template it’s recommended to be developed/tested in a server side environment:

a) Either hosted online on a server

b) Or better, use a virtual server environment on your personal computer, for example: XAMPP, WAMP, MAMP etc. They contain Apache server, Mysql and PHP and already configured.
Here are some tutorials on how to install them:

Place the template in “www” folder of WAMP and then in browser “localhost/template”

Back To Top

Other features

Google reCaptcha

First, we need an API key, so head on over to https://www.google.com/recaptcha/admin. To gain access to this page you’ll need to be logged into a Google account. You’ll be asked to register your website, so give it a suitable name, then list domains (for example tutsplus.com) where this particular reCAPTCHA will be used. Subdomains (such as webdesign.tutsplus.com and code.tutsplus.com) are automatically taken into account.
captcha

With that done you’ll be given a site key and its partner secret key:

captcha2

Site key you will add in html page:

captcha3

Secret key you will add in php_helper/_contact-process.php file:

captcha4

Back To Top

Retina images

Retina images feature  serves different images based on the device being used by the viewer. You can find many details here on how it works http://retina-images.complexcompulsions.com/

Currently in the website, the php file exist under the name of _retinaimages.php in the php-helpers folder. Also i’ve added in .htaccess file it’s code but commented. Finally in each page in the <head> tag, you should find a commented script that holds the javascript.

Why the code is commented?

Well , i’m not a big fan of retina images, although it looks like it makes the web a better place, the cost of bandwidth is way too big. Ironically most smartphone devices with limited bandwidth have Retina or better said doubled devicePixelRatio . The cost is too big and perhaps in a few years with 4G+ speeds and perhaps unlimited bandwidth we can truly forget about website sizes, for the moment i recommend the tool only where you really need to use it.

Back To Top

Meta tags

In each page’s head tags you can see many meta tags that will come in handy to have a good SEO and relevant info for the crawlers to scan your website. Uncomment the meta tags you are going to use! Be relevant and don’t spam!

 

Simply and mandatory meta tags:

<meta name="keywords" content="premium html template, unique premium template, multipurpose template" />
<meta name="description" content="Kallyas is an ultra-premium, responsive theme built for todays websites. Create your website, fast.">

 

Canonical meta tags

(url of your website – more here http://www.metatags.info/rel_canonical )

<link rel="canonical" href="http://hogash-demo.com/kallyas_html/" />

 

Restrict google from scanning info from Dmoz or YahooDir

More here: http://www.seoboy.com/what-are-the-meta-tags-noodp-and-noydir-used-for-in-seo/
Also more on robots here https://yoast.com/articles/robots-meta-tags/

<meta name="robots" content="noodp,noydir"/>

 

Social media tags and more

Read more here: http://moz.com/blog/meta-data-templates-123 !!!

Debugging tools:

 

Google Authorship and Publisher Markup

Author = Owner, Publisher = who built the website. Add profile url in href=””.
Profile url example: https://plus.google.com/1130658794498306186 or replace [Google+_Profile] below with your profile #

<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]"/>

 

Schema.org markup for Google+

<meta itemprop="name" content="Kallyas Premium Template">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="">

 

Open Graph Protocol meta tags.

Used mostly for Facebook, more here http://ogp.me/

<meta property="og:locale" content="en"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Vauss Premium Template"/>
<meta property="og:description" content="Vauss is an ultra-premium, responsive theme built for todays websites."/>
<meta property="og:site_name" content="Vauss Premium Template, Vauss Responsive Template"/>
<meta property="og:url" content=""/><!-- Url of your website -->
<meta property="og:image" content=""/><!-- Representative image -->

 

Twitter Cards

Will generate a card based on the info below.
More here: http://davidwalsh.name/twitter-cards or https://dev.twitter.com/docs/cards

<meta name="twitter:card" content="summary">
<meta name="twitter:image" content=""><!-- Representative image -->
<meta name="twitter:domain" content="hogash.com">
<meta name="twitter:site" content="@hogash">
<meta name="twitter:creator" content="@hogash">
<meta name="twitter:url" content=""><!-- Url of your website -->
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API allows developers to add META tags to their website, and Twitter will build card content from links to a given site.">

 

 

GeoLocation Meta Tags / Geotagging.

Used for custom results in Google.
Generator here http://mygeoposition.com/

<meta name="geo.placename" content="Chicago, IL, USA" />
<meta name="geo.position" content="41.8781140;-87.6297980" />
<meta name="geo.region" content="US-Illinois" />
<meta name="ICBM" content="41.8781140, -87.6297980" />

 

Dublin Core Metadata Element Set

Using DC metadata is advantageous from an SEO perspective because search engines might interpret the extra code as an effort to make page content as descriptive and relevant as possible.

<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" />
<meta name="DC.Title" content="Kallyas Premium Template, Kallyas Responsive Template" />
<meta name="DC.Creator" content="hogash" />
<meta name="DC.Type" content="software" />
<meta name="DC.Date" content="2014-09-05" />
<meta name="DC.Format" content="text/html" />
<meta name="DC.Language" content="en" />

 

 

Back To Top

PSD Files

Included PSD files

We’ve included a ton of PSD’s for almost every page in the template. The PSD’s are layered, properly arranged with colour markings for every group.

Note: They don’t included images, mostly to reduce the size of them.

Back To Top

Site Structure

JS Structure

Main js files:

Bootstrap (bootstrap.min.js)

Scripts being used by Bootstrap. To build your own custom load please access this url http://getbootstrap.com/customize/?id=9e12995c18085dd80bf5 and then overwrite the existing one.  This is a unique link that holds the configuration of the Boostrap build.

 

Plugins (kl-plugins.js)

This is a bundled js file which holds many javascript and jQuery scripts. The main reason why it’s being bundled, is because of the http load requests to be minimized to increase loading performance. These plugins are loaded in the entire website because they are very common and used in the template. If you want to cleanup, make sure you also remove triggers from kl-scripts.js file so there won’t be any js errors.

A list of plugins:

  • jQuery Easy Video background – This is a premium plugin which displays videos as normal players or backgrounds. It supports both video tags but also youtube videos.
  • jQuery Easing – Classic jQuery plugin to add mathematical easing effects
  • imagesLoaded plugin – Plugin that helps other plugins to be lauched only when the images within a specific container are loaded.
  • Twitter Post Fetcher – This will fetch the latest tweets of your Twitter account.
  • jQuery h5Validate – HTML5 form validator. Fully benefit by the html5’s validation power
  • Animated Sparkles (kl-sparkles)
  • IsotopeFilter & sort magical layouts
  • jQuery gMap – Google Maps API V3
  • jQuery UI
  • jQuery SmartScroll – This is a debouncer for the scrolling event. It basically optimizes the javascript triggers/hooks etc. upon scrolling.
  • jQuery SmartResize – This is a debouncer for the browser resize event. It basically optimizes the javascript triggers/hooks etc. upon resizing your browser. It increases performance.
  • jQuery Appear plugin  – Used for the elements in viewport animation when scrolling
  • SmoothScroll – Customizes the scrolling effect making it a bit more eased. I must admit it does affect performance and if needed i recommend deleting the script.
  • jQuery Flickr Plugin – This will fetch the latest images from your Flickr account. Make sure you get an id here http://idgettr.com/
  • jQuery Magnific Popup – Awesome and lightweight popups. Also really powerful and customisable.
  • jQuery carouFredSel – This is a really powerful carousel solution. There are literally tons of resources and demos online.
  • jQuery v1.10.1

 Note: As you can see i haven’t explained too in-depth about these plugins because i couldn’t simply explain more than their very own websites or project pages. 

 

 Kallyas Scripts (kl-scripts.js)

This script file contains triggers for almost anything that’s being javascript handled.

There are no custom required settings to be change here, only if you really want to. I tried to make the settings to be added through custom data-attributes. If you do intend to change something here keep in mind that updates will be released and i will most likely overwrite this file.

Note: There are also page specific scripts but this one in particular mostly executes plugins from kl-plugins.js file.

 

Custom Scripts (kl-custom.js)

Well this is for you my dear loyal customer. Because there’s a big chance that i will update kl-scripts.js file, it’s highly recommended to add your own scripts here in this file.

 

Other scripts:

Modernizr (js/modernizr.min.js)

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It can be either used in your custom javascript as a feature detection (eg: detect if device is touch enabled), or when you want to style your website differently or with fallbacks for older browsers. This library is being used constantly in the template so it’s mandatory not to be touched (other than to extend it’s custom built).

 

Back To Top

CSS Structure

The CSS Stylesheet structure:

Custom.css stylesheet:

This stylesheet is where you add your own css styles. The file is separate because template.css or other stylesheets surely will be updated and we cannot afford such terrible thing to happen. Make sure you add your own styles here, either new styles or simply override others. Custom.css is loaded lastly so that you can easily override any properties.

 

Bootstrap.css stylesheet:

This stylesheet contains thousands of really cool styles generated by the famous Bootstrap UI Toolkit (UI Framework). To build your own custom built please follow this link http://getbootstrap.com/customize/?id=5fdbc01a38262c94ce5f and choose what to load or not.  This is a unique link that holds the configuration of the Boostrap build. For example you might not want all sorts of things that’s loaded inside and removing stuff will optimize page speed. There are thousands of documentation lines on the Bootstrap’s website so i highly recommend having a look and try using stuff that’s already loaded in the template, before loading other plugins.

 

Base-sizing.css stylesheet

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customisation power with just a few classes added to a certain block or element.

I highly recommend having a look overall in the stylesheet and keep in mind what’s inside and what you can use from it. I added lot’s of html markup examples with these classes applied.

 

 Template.css stylesheet

This is the main stylesheet which contains almost everything that the template is styled upon. Please keep in mind that i will surely update the template therefore this file too so i highly recommend NOT to edit or alter it, and instead add your own css code into custom.css stylesheet. It’s very important not to overwrite your work.

The template itself serves as a database of examples of html markup and css styles applied. In the Styles menu pages you can see there are lots of examples of the classes and styles added to the elements. I really don;t know what to add here as i would actually recommend scanning the file by yourself and see what’s inside. If there’s no patience for this, no problem, just copy/paste code from the existing html files and then debug styles using the Chrome Developer Tools (see TIPS section with a few tutorials).

 

 Responsive.css stylesheet (part 2 – responsive styles)

At the end of the stylesheet you will find the @media queries and responsive design styles. Please keep in mind that the styles are desktop first, not mobile first.

To debug responsive css styles, open the Chrome Developer Tools in a new window and resize your browser. On the right side css styles pane you will notice that media queries appear and you can simply figure out what styles are applied.

Back To Top

Grid Markup

This template uses Bootstrap UI Toolkit and framework and therefore it uses a complex but so useful grid system.

Instead of in-depth explaining here i would better suggest heading over the Bootstrap website as there are massive useful info’s about the grid system which are far better explain that i ever could.

Just some short tips:

  • There are 12 columns
  • there are 4 states of how is the grid applied – xs , sm , md and lg .
  • You can have all 4 types of classes tied to a column eg: class=” col-xs-10 col-sm-6 col-md-4 col-lg-3 ” (this means that on large devices the column will occupy 3 columns, while on medium devices 4 columns, 6 colums on small devices and 10 colums on even smaller devices such as smartphones or phablets).
  • If you just add a lg column class (eg col-lg-6), it will only occupy the #no o cols you specified (6), on large devices (1200+), while on smaller devices it won;’t have any predefined width, just 100%.
  • if you add a single md column class (eg col-md-6), it will only occupy the #no o cols you specifed (6) but on medium and large devices (992+), while on smaller devices it won’t have any width, just 100%
  • Grids must be inside of a .row, while a .row must be inside a .container

 

Back To Top

HTML Markup

The HTML markup of the template’s pages follow this pattern:

--body
  -- #page_wrapper (wraps almost everything except side panels, popup windows, page preloader and other stuff like scripts or #totop button )
    -- #header
    -- #page-slideshow (holds the slideshows of the page)
    -- #page-sub-header (this holds the head part of a page without Slideshow, but it's not mandatory to be present. Usually it's one of these 2, not both)
      -- section
        -- 9 columns - holds the content of the page
        -- 3 colums - holds the sidebar
      -- other sections (sections with various content, used mostly for homepages where it's a modular structure)
    -- #footer

This example doesn’t necesarily mean it’s this exact pattern however it’s the most common used. For example pages such as offline or coming soon have a different markup.

 

Other mentionable html markups are:

 

IE Chromeframe bar

Used to display a top fixed bar in older IE browsers  to help them make their life easier.

<!--[if lte IE 8]>
  <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->

To Top button

Classic go to top button. Just make sure not to change the id as it holds the styling but also js click event.

<a href="#" id="totop"></a>

Back To Top

Sliders

Revolution Slider

Revolution slider is a premium jQuery plugin for animating elements within a slider. More about it here http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848 .

As the descrption on the main Revolution slider page says:

Turn simple HTML markup into a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines).
See the heaps of custom transitions/animations for each object on the page! Customize this slider with just a little HTML and CSS to your very needs.

There aren’t any special explanations for this slider, just try to read the documentation of it provided in the download pack.

Back To Top

Ios Slider

Iosslider is a Touch Enabled, Responsive jQuery Horizontal Content Slider/Carousel/Image Gallery Plugin. More info and documentation here: https://iosscripts.com/iosslider/

 

A slide image can be added as a background image which is responsively adapted to the resolution of the screen size. For example:

<div class="slide-image" style="background-image:url(images/sliders/iosslider_fullheight/slide3.jpg);"></div>

 

The captions have inside a container and simply bootstrap grid so you can basically do whatever you want inside.

<div class="iosslider-caption-wrapper">

  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div class="iosslider-caption ">
          <h3 class="capt fs-xxxxl ">SOME TITLE HERE</h3>
          <h3 class="capt fs-xxl ">AND A SUBTITLE AS WELL HERE</h3>
          <a href="#" class="capt btn btn-vs btn-custom ">GET STARTED</a>
        </div>

      </div>
    </div>
  </div>

</div>

 

Back To Top

Template Customization

Main menu

Kallyas menu doesn’t need to apply “active” class on each page, works automatically if the html page is named the same with name used in menu markup, example: index.html it’s used in page the same index.html

main-menu

Responsive menu it’s activate and duplicate your menu automatically from javascript and is visible under the 992px screen width.

Back To Top

Boxed Layout

The boxed layout is a layout that makes your site to be fixed-width.

To achieve a boxed layout simply add the class .boxed-layout to the body tag.

To style the background, simple add this line in custom.css stylesheet and change the hex color code:

body.boxed-layout { background-color: #FFFFFF; }

 

To add a background image, also open custom.css stylesheet and add your own bg image/pattern you want. for example:

body.boxed-layout { background-image: url(../images/bg_image.jpg);}

 

Back To Top

Footer Customisations

The footer’s markup is:
13

If you want to have a custom color for the footer, simply add this css line in custom.css and change the color with your own:

#footer { background: #color;}

Back To Top

Logo

Either just edit the kallyas-logo.svg from the folder images/ , or open each page and you should see the tag there:

logo

 

Infocard

This is a hover panel which appears upon hover mouse event over the logo. It contains anything you want, we though it should be nice to look like a business card with some important info.

Simply add your own content into .infocard div:

<div class="infocard">
...
</div>

Back To Top

Header & footer styles

There are 13 types of headers with different markup, choose one in the components mark-up/headers folder and use it in your project:

headers

For footers the same:

footers

Back To Top

Main Color Customisation

In this template you will notice there aren’t any predefined stylesheets with different colors. The fact it’s just too complicated to maintain multiple stylesheets and the easiest and most recommended way of changing the main predominant color of the template is to simply:

  1. Open template.css with your favorite editor
  2. Hit Search & Replace (if you don’t know, try Ctrl+H or Ctrl+F)
  3. In the search field add this hex color code which is used now #cd2122 and in the replace field add your own desired color code.

 

Back To Top