# KALLYAS - Responsive Multipurpose Wordpress Theme

## Subline

- Created: 03/10/2011
- latest Update: 02/20/2013
- By: Hogash
- themeforest.net/user/hogash
- Email: hogash.themeforest@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 or to my support forum at http://www.hogash.com/support/ . Thanks so much!

### TIPS

USE FIREBUG or Chrome DEVELOPER TOOLS!

I'm not going to tell you about when i discovered this great tool, or necessarily why i like it and so on. I'm actually going to push you into using it :) I mean it, you can't be a serious developer unless you're using it.

Scenarios:

- You want to change the size/color/etc of a certain font and search into 3 stylesheets with 1000 lines each and you can find that damn rule which contains the property
- You want to get rid of an ugly space somewhere
- Some block has some absolute position and overlays another block
- You want to inspect an element to see if it has some sort of margin padding etc.
- And etc. etc.

Mainly (for me), Firebug is about tracking the css code and to debug a website seeing the actual final (generated code). This tool is about productivity, you want to make things quicker - you should have it; you want to make things better - you should have it; you want to learn more and more - YOU SHOULD HAVE IT.

Trust me i wouldn't make any premium joomla templates if i haven't knew this tool!

Now, Firebug is made for Mozilla Firefox, you can find it here

For those of you who are using different browsers you already have some builtin tools: Chrome / Safari / Opera / Internet Explorer

Instead of making huge tutorials about Firebug here, i will point you some great links so you can easily learn it:

- Introduction to CSS editing using Firebug
- Firebug tutorial - Inspect HTML and CSS
- Firebug: White to Black Belt (just $4)
- 10 Reasons Why You Should Be Using Firebug

Please ENJOY!

### FAQ

### HOW TO GET SUPPORT

Please subscribe to the my support board here http://support.hogash.com and start a new thread if you need support.
Note: I don't offer customizations included in support! Thank you for understanding!
Before posting, try to open the JS Console (hit F12 ) and click on Console. The errors appear in red color. If you can solve the problem on your own it's good, however if you're planning to ask us, try sending a screenshot of the console and a link to your website.

### IS THIS THEME WORKING WITH WPML ?

Yes. The theme has been tested with the latest WPML version and everything is working fine. If you want to translate the text set in the theme option pannel for "Archive Page Title" and "Archive Page Subitle" you will need to install WPML string translation plugin.

### HOW IS THE SHOP CREATED ?

The shop was created with the powerfull wordpress plugin called WooCommerce. If you do not have this plugin installed, don't worrry, the theme will check for the installation of this plugin and will hide all related shop features if you don't want to use them.

### WHAT IS THIS "SMART LOAD FEATURE" ?

We created the theme with the page loading speed in mind. Following this guideling, we have optimized the Javascript/CSS files to load only if they are necessarry for the page you are viewing. This has a lot of benefits for you, including better SEO.

### Installation

Theme was made for Wordpress 3 and newer versions. Make sure that you're not using version below 3, otherwise upgrade your Wordpress version if it is possible ( http://codex.wordpress.org/Updating_WordPress ).

OPTIONS 1 :

Upload "kallyas" folder from our archive to your hosting into wp-content/themes directory (wp-content/themes/kallyas that's how it should be look like).

OPTION 2 :

Use "Install theme" function from dashboard and choose for upload "kallyas.zip" that located at root of our archive. After that activate Theme from Wordpress admin panel by clicking " Themes" in "Appearance" section, which is located on the left side.

After you install the theme, you will be promted to install additionall plugins :

- Revolution Slider : This slider is already included in the theme so you can install it by following the on screen instructions

- Woocommerce : If you plan to use the Woocomerce shop plugin , you can install it whe prompted so or you can install it later on.

The theme has a "One Click install" option that will help you get started with working with the theme.

WARNING! DO NOT INSTALL the dummy data on your live website. It may be possible that your current data get's corupted. We strongly recommend installing the dummy data on a clean Wordpress install.

### Updating

Please make sure you backup your existing theme folder before updating. Additionally we recommend performing the update on a development site before making it on your live site.

In order to update the theme please follow these steps :

- Backup your existing theme folder
- Copy the files inside "kallyas" folder from the zip file downloaded from themeforest to the theme folder
- Enter the theme's admin panel and save your options.

### Changelog 2.2

##### What's new

+ Added : New option for increasing the site loading speed in the Advanced panel.By enabling the "Enable Menu Caching ?" option your site speed should grately improve.
+ Added : Option for the iOS slider to choose the slider height
+ Added : Additional options for the default header style
+ Added : Confirmation box for installing the Dummy Data
+ Tweak : Redirect page for the login.
+ Tweak : WPML language chooser displays the native language now
+ Tweak : The slider navigations will not be shown when having only one image in the iOS slider.
+ Fixed : Facebook Open Graph title
+ Fixed : Columns layout shortcode
+ Fixed : Sidebar layout on Blog pages
+ Fixed : Team box layout when using 960px layout
+ Fixed : PreetyPhoto not showing corectly in IE10
+ Fixed : Circular Content being responsive even with the responsive options off
+ Fixed : Product Loupe image dimension in 960px layout
+ Fixed : Portfolio not working when creating a page with the "portfolio" slug
+ Fixed : Additional plugins doesn't install from child theme
+ Fixed : Header animation for 404 page.

### Changelog 2.1

##### What's new

+ Resolved unlimited headers and sidebars not appearing in options.

### Changelog 2.0

##### What's new

+ Overall speed/memory optimizations : The theme is now faster than "Twenty Twelve" default theme. Please find bellow all the files modified :
http://pastie.org/7697193
+ Fixed Portfolio slug.

### Changelog 1.9

##### What's new

+ Added new Static header element for displaying a text and video
+ Fixed Google Fonts subsets
+ Added responsive features for the register modals
+ Added a timeout option for the iOS slider
+ Fixed issues when multiple partners logos were displayed on a page
+ Fixed image resizing not working when the wp-content folder was moved
+ Removed all extra text domains from language files
+ Tweak the non-responsive features of the theme
+ Added page title compatibility with Yoast plugin
+ Added missing words to translation files
+ Resolved the Contact form not sending all texts when punctuations were used in field names

### Changelog 1.8

##### What's new

+ Added : Option to link portfolio images directly to portfolio items
+ Added : Option to configure the typography options for the main menu
+ Added : Option to show subheader after the main header
+ Added : New page builder element "Action box text"
+ Added : General options to configure the Google web fonts used troughout the theme
+ Added : Missing words to translation functions
+ Added : Option to hide the search button in header
+ Added : Option to show footer widgets rows or not
+ Resolved : Contact form not sending all content
+ Resolved : Favicon not showing in IE9
+ Resolved : Various visual issues in IE8
+ Resolved : Theme options not saving on several web hostings
+ Resolved : Several display issues when using Russian text
+ Resolved : Ios Slider conflict with latest posts
+ Resolved : Various small fixes

### Changelog 1.7

##### What's new

+ Added : New page builder element to display a sidebar position
+ Added : A "Documentation" custom post type system
+ Added : Color options for various texts
+ Added : Option to select the typography for various texts
+ Added : Missing words to translation function
+ Added : The buttons shortcode now accepts a link url
+ Added : A new option for Google fonts to select the font subset
+ Added : Added styles for Woocommerce subcategories
+ Added : Description for the content and sidebar page builder element
+ Added : When creating a new account, you can set up your password directly rather than Wordpress generating a random password
+ Enhancement : Rewritten some of the header login system in order to make the login system more compatible with various plugins
+ Enhancement : The theme is now 100% Wordpress multisite/network compatible
+ Fixed : Bug on contact form not sending all the fields when the field names contains spaces
+ Fixed : Problem when setting the footer rows to contain only one sidebar position
+ Fixed : You can now use as many Recent Works elements on the same page as you want
+ Fixed : Problem when having multiple verical tabs on the same page
+ Fixed : Cart over the search button when using header style 1/4
+ Fixed : Problem when not adding a link to the iCarousel items
+ Fixed : Strange characters when using cyrilic fonts
+ Fixed : Limited offers responsive display
+ Fixed : Error message on coming soon page when using various plugins
+ Fixed : Image box link when no url was set in the options
+ Fixed : Bottom mask style on dark style
+ Fixed : Erorr displayed when no image was inserted in a post

### Changelog 1.6

##### What's new

+ Added a new Blog Layout based on Columns
+ Added option to choose the colors for the top navigation links
+ Added option to use the first attached image from inside a post on blog Archive and categories pages
+ Customized the product search box from WooCommerce
+ Added the "All" word to the translation functions
+ Further optimized the page loading speed/score
+ Added header date to translation functions
+ Further optized WooCommerce compatibility for product variations
+ Fixed Google fonts for SSL enabled hosts
+ The unlimited sidebars names are used instead of default name
+ The unlimited headers names are used instead of default name
+ Added additional options for map element for dragging and mouse zooming
+ Fixed limited offers "division by zero error" and also reduce price calculation
+ Fixed header background image in IE8
+ Fixed Contact form not working in IE
+ Fixed Spelling error in admin panel
+ Fixed map type selector
+ Added windows phone compatibility

### Changelog 1.5

##### What's new

+ Page builder la posts si portfolio
+ Added more google web fonts
+ Fixed product variation modal image
+ Linked the product images togheter
+ Fixed page header default style in Unlimited headers
+ Added option to change the content color / add image
+ Added option to change the grey area color / add image
+ Added option to globally disable page comments
+ Added missing translation strings - TO DO - regenerate po files
+ Fixed Skills shortcode not appearing correctly
+ Fixed Sortable portfolio multiple item categories bug
+ Extended WooCommerce compatibility for images in single product page
+ Fixed Laptop Slider navigation buttons not appearing
+ Fixed logo dimension on coming soon page
+ Tweaked the position of logo on coming soon page
+ Fixed social icons overlapping issue on Safari
+ Fixed social icon that appeared even if no one was selected
+ Made error message friendlier :)

### Changelog 1.4

##### What's new

+ Added ability to customize the blog page with page builder element
+ Extented the compatibility with Woocommerce 2.02
+ Added option for logo to be contained in header
+ Fixed compatibility between latest Cute Slider verion and theme
+ Fixed Logo size on Coming Soon page
+ Additional style fixes

### Changelog 1.3

##### What's new

+ Fixed Shop display issues on some Firefox versions
+ Created 100% compatibility with latest Woocomerce plugin
+ Overall shop pages display enhancements

### Changelog 1.2

##### What's new

+ Added new responsive menu style - You can select it from theme's options page + The page builder elements are now sorted alphabetically + Improved child theme support + Improved image resizing function + Improved countdown timer on IE and safari + Fixed left sidebar displaying on right side

##### Bug Fixes

- Resolved the color of the latest post widget post titles

### Changelog 1.1.1

##### What's new

- Added shortcode support for vertical and horizontal tabs
- Added option to select boxed or full layout for homepage
- Added option to select the default color for menu links
- Added option to remove the logo
- Added option to remove the footer
- Added child theme in package
- Updated Revolution slider to latest version
- Updated Cute 3D slider to latest version

##### Bug Fixes

- Resolved the color of the latest post widget post titles

### Changelog 1.1

##### What's new

- Integrated Envato Toolkit - From now on you can update the theme from inside the admin panel
- Added option to select a background image/color for header
- Added option to select a background image/color for footer
- Added option to use a boxed layout
- Added option to upload a background image/color if boxed layour is selected
- Added top header menu
- Added top header social icons options
- Added Custom CSS box inside the admin panel

##### Bug Fixes

- Resolved Responsive display for several elements
- Resolved the contact form not sending emails
- Resolved coming soon page on Internet Explorer
- Resolved the display issues when using the 960 width style
- Increased the child theme support

### Theme's Options Page

#### General Options > General Options :

- Show Follow menu? : If you enable this option, you will see that the menu will follow you on the page when you scroll down
- Use page preloader? : If you enable this option, a page preloader will appear until the page is fully loaded. Please note that the preloader will wait until all external resources are loaded. In case you notice that your page takes to long to load, please check what external resources you are loading for that page and consider removing them
- Show Login in header : If you enable this option, a link to REGISTER/LOGIN will appear in the header. Please note that you will need to enable the registration for your blog prior activating this option.

#### General Options > LOGO Options :

- Logo Upload : In this option you can upload your desired logo image. Please note that if this option is left blank, the theme will display your blog title using the appropiate font choosen at the "Logo Link Options"
- Logo Size : If you select to use the logo auto-resize, the logo will automatically take the uploaded image size.
- Logo manual sizes : If you select to mannyally set the logo size, you will notice that this option will appear. You will need to specify both the width and height of your logo in pixels (without the "px").
- Logo Link Options : Here you can define the typography options for you logo . IMPORTANT : these settings will only take effect if you do not upload a logo image.
- Logo Link Hover Color : Here you can choose the desired color to be used when you hover over the link> IMPORTANT : the color will only be visible if you do not upload a logo image.

#### General Options > Favicon options :

- Favicon Image : Here you can upload your desired Favicon image.

#### General Options > Font options :

- Here you can select what fonts you want to use for the headings.

#### General Options > WPML Options :

- Show WPML flags ? : if set to "Show" , the WPML flags will appear in your header.
  - Please note that you need WPML installed for the flags to show
  - Please note that you need to set at least two languages in WPML for the flags to show.

#### General Options > Footer Options :

- Copyright text : Here you can enter your own copyright text. Please note that you can use the © to add a copyright icon.
- Footer row 1 Widget Positions : Here you can define two things
  - The number of columns : You can select how many columns will be displayed on your first footer row
  - Widgets styles : Here you can select the desired layout for the first row of the footer widgets.
- Footer row 2 Widget Positions : Here you can define two things
  - The number of columns : You can select how many columns will be displayed on your first footer row
  - Widgets styles : Here you can select the desired layout for the first row of the footer widgets.

Please note that if you use 4 columns , and then decide to use fewer columns, you widgets from the forth widget position will be kept in the inactive sidebars widgets until you choose to use 4 columns again

- Copyright Logo image : Here you can upload an alternative image for the footer logo.
- Social Icons : Here you can add your social icons to the right side of the footer.

#### General Options > Default Header options :

These options will be used for the pages were you do not select a specific custom header and also on your archive pages and pages created by 3rd party plugins where you do not have the option to select a custom header.

- Header Background image : Here you can upload an image to use as a background
- Header Background color : Here you can select a desired color to use as a background.
- Use animated header : If you choose yes, the header will animate
- Show Breadcrumbs : If you choose "Show" the breadcrumbs will appear on the left side of the header
- Show Date : if you choose "Show" the current date will appear under the breadcrumbs
- Show Page Title : If you choose "Show" the page title will appear on the right side.
- Show Page Subtitle : If you choose "Show" the page subtitle will appear under the page title

#### General Options > Google Analytics :

- Google Analytics Code : Here you can paste your google analytics code. This code will be embeded on all pages of your site.

#### General Options > Mailchimp :

- Mailchimp API key : Here you can enter your mailchimp API key.

Please note that if you don't enter an API key , you won't be able to use the features that requires Mailchimp :
- Mailchimp widget
- The newseletter signUp in Coming Soon page
- The newseletter signup in Event Countdown page builder element

#### General Options > Facebook :

- Add Facebook OpenGraph Tags : If set to "Show" the Facebook Open Graph code will be embeded in every page. This is recomended if you want to use the theme's social features for facebook
- Facebook Application ID : Here you can enter your facebook Application ID. Please note that this is mandatory if you want your facebook Open Graph to work properly. More details on how you can get a Facebook Application ID can be found here : http://rieglerova.net/how-to-get-a-facebook-app-id/

#### Blog Options > Archive options :

- Archive Page Title : Here you can enter a page title that will appear in the header of your archive page.
- Archive Page Subtitle : Here you can enter a page subtitle that will appear in the header of your archive pages
- Archive Sidebar Position : Here you can choose to use a left, right or no sidebar on the archive pages.
- Archive Default Sidebar : Here you can choose what sidebar to use on the archive pages.You can create unlimited sidebars from the "Unlimited Sidebars" options inside the theme's admin page.

#### Blog Options > Single blog item options :

- Default Sidebar Position : Here you can choose a default sidebar position that will be used by all your blog items when viewed as a single. Please note that for each blog item you can choose to use a different sidebar set-up that will override this settting.
- Single Post Default Sidebar : Here you can choose a default sidebar that will be used by all your blog items when viewed as a single. Please note that for each blog item you can choose to use a different sidebar set-up that will override this settting.Also , You can create unlimited sidebars from the "Unlimited Sidebars" options inside the theme's admin page.
- Show Social Share Buttons ? : With this options you can choose to add the social buttons on all single blog items or not. Please note that this setting can be overrided from each item edit page.

#### Page Options :

- Page Sidebar Position : Here you can choose a global sidebar position for your pages. It is recommended that you leave this option set as "No sidebar" and use the sidebar options from each edit page screen.
- Page Default Sidebar : Here you can choose a global sidebar for your pages. Please note that you can override this settings from each page edit screen.

#### Portfolio Options :

- Portfolio Archive Style : Here you can select the desired style to use as a portfolio archive and portfolio main page. Please note that you can create unlimited portfolio pages using the "Portfolio Items" page builder
- Portfolio Items to show : Here you can inesrt the desired number of portfolio items that will be loaded. Please note that if you want to display all portfolio items you can enter "-1" in this option.
- Portfolio items per page : Here you can enter the desired number of portfolio items that will be loaded on a page.
- Number of Columns : This options is taken in consideration only if you choose to use the "Portfolio Category" as an archive style.

#### Layout Options :

- Responsive options : Here you can enable the responsiveness of the theme.
- Content Size : Here you can select your desired content size .
- Header Layout : The theme supports 4 header layouts. You can use this options to select which one to use for your blog.

#### Color Options :

- Main Color : Here you can select a main color that will be used on the entire site.
- Color theme : Here you can choose between the light and dark version of the theme.

#### Unlimited Headers :

With the unlimited headers options, you can create ...well.. unlimited headers :) that can be used all over the site.

Please note that i recommend creating an simple header that will be used for sliders. This means not selecting a background image and animation. Using this header, your page should load faster.

- Header Style Name : This is the style name. Please note that this name must be unique between the other headers names and also that you cannot change it after you save the options and reload the page.
- Background image : Here you can select a background image to use as a header background
- Header Background Color : Here you can select what color to use as background for your header
- Add gradient over color: if set to "Yes" a gradient effect will be created based on your desired color set on the above option
- Animate Background : If set to "Yes" your header will have an animated effect
- Add Glare Effect : If set to "Yes" , a glare effect will be added over the image/background color
- Bottom Style : Here you can select how the header bottom will be displayed . You can choose between 4 styles. Please note that some styles won't look good if you choose to use an "Action Box" element under the header

#### Unlimited Sidebars:

- Sidebar name : Here you need to enter the desired sidebar name . Please note that all names must be unique. Also, if you rename one of the already created sidebars, you will find the widgets associated to that sidebar in the inactive widgets section of the widget page.

#### Coming soon Options:

- Enable coming soon? : If you enable this option, your site will be set as offline. Only registered people will have access to your site.
- Description : Here you can enter a text that will appear on the coming soon page
- Launch date : Here you can select the desired date until the counter will count
- Mailchimp List ID : Here you can select a mailchimp list id to use for the newsletter signup form. Please note that you need to add your mailchimp API key in the designated field inside the theme options panel before being able to select your mailchimp lists.
- Social Icons : Here you can define your social icons that will appear on the coming soon page

#### 404 Page Options :

- Header Style : Here you can select your desired header style from the headers created in the Unlimited Headers page.

#### Woocommerce Options > General Options :

- Show MY CART in header : If you enable this option, a shoping cart will be added in the header. Please note that this cart is fully working with woocomerce and it's using AJAX technology for adding the items to cart without page reloading.
- Show new items badge ? : If you enable this option, you will have the posibility to show a badge (NEW) for all new items .
- Days to show badge : Here you can enter the desired number of days until the NEW item badge will be displayed on your shop items.

#### Woocommerce Options > Categories Page :

- Shop Archive Page Tite : Here you can enter a page title for the shop archive page
- Shop Archive page Subtitle : Here you can enter a subtitle for the shop archive page
- Shop Archive sidebar : Here you can choose where the sidebar will appear on the shop pages
- Shop Archive Default Sidebar : Here you can choose what sidebar will be displayed on the Shop Archive Page

#### Woocommerce Options > Single Page :

- Shop Single sidebar Position : Here you can choose where the sidebar will appear on the shop single item page
- Shop Sinlge Default Sidebar : Here you can choose what sidebar will be displayed on the Shop Single page.

#### Advanced :

- Install Dummy Data : By pressing this options, your site will be populated with sample data that will help you getting started working with this theme.

It is strongly recommended that you only install the sample data on a fresh wordpress installation. It is possible that you may mess up your site if you install this on a blog that already has content.
The sample data contains :
- All pages seen in the demo site
- All menus seen in the demo site
- All theme options set as seen in the demo site
The sample data doesn't contain :
- Widgets set-up . You will have to manuually add your widgets to the desired sidebars
- Featured images on posts/pages/shop
- Copyrighted images
- Revolution Slider Settings
- Cute Slider Settings

If you already isntalled the sample data and the button is greyed out, you can enter the admin page and add the following string to the URL to re-enable the install button :
&enable_dummy_install

### POST PAGE

Post Page Options :

- Post Layout Optiont : Here you can select how the sidebar will be showed. This theme has also a powerfull option to leave the setting as default and set all the sidebars globally from the theme's options.
- Select Sidebar : Here you can select what sidebar you want to use for this specific post. Please note that the theme has a powerfull option to leave the settings as default and select the sidebar globally for all post pages.
- Show Social Share Buttons ? : If you enable this option, social share will appear on the single post page.Please note that you can leave this setting as Default - Set from theme options and the post page will use the global setting from the admin panel

Please note that in order for your blog item to display an image with the red border you see in the demo site , you will need to set a featured image to your post.

### PAGE OPTIONS

Page options :

- Show Page Title : If set to YES, the page title will appear above the content.
- Alternative page title : Here you can define a page title that will appear in the header. If no page title is set here the normal page title will be used.
- Page subtitle : Here you can enter a subtitle that will appear in the header
- Page Layout Options : Here you can choose the sidebar position that you want to use for this page.
- Page Sidebar : Here you can select the desired sidebar that you want to use for the page
- Page Builder : Here you can create your page using the powerfull page builder. Please see the PAGE BUILDER section of this documentation for more informations on how to use the page builder elements.

The PAGE BUILDER is a powerfull feature of this theme so that we have created a special section in this documenation for it. Please refer to the PAGE BUILDER section to see how you can create your unlimited page designs using the page builder.

### PAGE BUILDER

The PAGE BUILDER is the most powerfull feature implemented in this theme. With this page builder you can create unlimited page designs very easily .

Please find bellow it's features :

- Add unlimited page builder elements to the content
- Create pages using one of the 24 heder/sliders options each one with multiple styles
- Create your pages using any element from the 44 content elements ( some elements have multiple display styles so that you can create really unique pages )
- You have the option to DRAG/DROP/REORDER the page builder elements
- You have the option to select the elements width
- Each page builder element has it's own customization options
- You can create really unique pages by combining page builder elements with shortcodes

PAGE BUILDER ELEMENTS PER SECTION :

#### HEADER AREA :

Please note that you can only set one header element. The button will be grayed out if you already have an element set for this area and you will have to delete that element before being able to add a new one.

All page builder elements have tooltips for helping you to configure them . If you still have a question regarding this slider please don't hesitate to contact us on the support forum.

Custom Heder Layout :

Using this element you can add your unique header to a page. You can create unlimited headers from the theme's admin page by combining,images, colors , animations and bottom masks. Additionally, the page builder element let's you choose the header features that will be displayed like page title, subtitle, breadcrumbs and date.

IOS Slider :

Using this element you can create a slider as seen at : http://hogash-demo.com/kallyas_wp/

Please find bellow the link in the demo site that were created with this slider element :

- Homepage
- Slider > Main Slider ( including the main slider submenus )

It is recomended to create a simple header that you use for all the sliders in order for the page to load faster.

FLEX SLIDER :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/fixed-slider/

NIVO SLIDER :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/style-2-nivo-slider/

WOW SLIDER :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/style-3-wow-slider/

FANCY SLIDER :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/fancy-slider/

Circular Content Style 1 :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/circular-content/

Speacial notes about this element :

- The content that you see when you press the read more button on this slider is created using HTML.Please find bellow the code that we have used in the demo site :

CODE 1 :

    <p>
    <img src="http://www.placehold.it/280x168" class="img-polaroid pull-left" style="margin:0 20px 10px 0" alt=""> Donec adipiscing diam non augue suscipit in vulputate ligula vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula vulputate scelerisque. Sed nec sodales sem.
    </p>
    <p>
    Morbi pharetra viverra congue. Donec imperdiet eleifend varius. Quisque turpis tellus, imperdiet vel mollis quis, adipiscing sit amet est. Sed suscipit urna non felis mollis aliquam quis id lacus. Curabitur ut est vitae ante rutrum mollis id vitae nisi.
    </p>
    <p>
    Mauris malesuada erat a magna egestas rutrum id at diam. Nulla pharetra lacinia est, at rhoncus dui dapibus eu. Aliquam sit amet diam libero. Integer urna dui, ultricies ac suscipit vitae, convallis ut tellus. Etiam ut justo nibh.
    </p>
    <p>
    Donec adipiscing diam non augue suscipit in vulputate ligula vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula vulputate scelerisque. Sed nec sodales sem.
    </p>

Code 2 :

    <ul class="other_images">
    <li><a href="http://www.placehold.it/500x500/CB3733/ffffff" data-rel="prettyPhoto"><img src="http://www.placehold.it/131x98/CB3733/ffffff" alt=""></a></li>
    <li><a href="http://www.placehold.it/500x500/22AABC/ffffff" data-rel="prettyPhoto"><img src="http://www.placehold.it/131x98/22AABC/ffffff" alt=""></a></li>
    <li><a href="http://www.placehold.it/500x500" data-rel="prettyPhoto"><img src="http://www.placehold.it/131x98" alt=""></a></li>
    </ul>

    <div class="ca-content-text">
    <p>
    Donec adipiscing diam non augue suscipit in vulputate ligula vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vehicula vulputate scelerisque. Sed nec sodales sem.
    </p>
    <p>
    Morbi pharetra viverra congue. Donec imperdiet eleifend varius. Quisque turpis tellus, imperdiet vel mollis quis, adipiscing sit amet est. Sed suscipit urna non felis mollis aliquam quis id lacus. Curabitur ut est vitae ante rutrum mollis id vitae nisi.
    </p>
    <p>
    Mauris malesuada erat a magna egestas rutrum id at diam. Nulla pharetra lacinia est, at rhoncus dui dapibus eu. Aliquam sit amet diam libero. Integer urna dui, ultricies ac suscipit vitae, convallis ut tellus. Etiam ut justo nibh.
    </p>
    </div>
    <ul class="links">
    <li class="price"><a><span class="icon-tag icon-white"></span>$399</a></li>
    <li><a href="#"><span class="icon-shopping-cart icon-white"></span>add to cart</a></li>
    <li><a href="#"><span class="icon-plus-sign icon-white"></span>more details</a></li>
    </ul>

CIRCULAR CONTENT STYLE 2 :
Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/circular-content-default-style/

As same as the above slider, you can add your slide description by using HTML code.

CSS3 PANELS :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/css3-panels/

For best viewing experience, we recommend you use 4 images in this slider.

ICAROUSEL :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/icarousel/

LAPTOP SLIDER :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/laptop-slider/

Fore best experience using this slider we recommend using images larger than 607 x 380 . The slider automatically resizes the images to fit the laptop cover.

PORTFOLIO SLDIER :

Using this element you can create a slider like seen in : http://hogash-demo.com/kallyas_wp/portfolio-slider-frames/

Please note that for best experience we recommend using images larger than : 460 x 320. The slider will automatically resize the images.

3D CUTE SLDIER :

This element let's you select the desired CUTE SLIDER to use in the page from the CUTE SLIDERS created by the CUTE SLIDER PLUGIN. Please refer to the CUTE SLIDER documenation to see how you can create your slides.

REVOLUTION SLDIER :

This element let's you select the desired REVOLUTION SLIDER to use in the page from the REVOLUTION SLIDERS created by the REVOLUTION SLIDER PLUGIN. Please refer to the REVOLUTION SLIDER documenation to see how you can create your slides.

The following pages were created using the revolution slider :

- http://hogash-demo.com/kallyas_wp/creative-slider/
- http://hogash-demo.com/kallyas_wp/portfolio-slider-devices/

STATIC CONTENT - Default :

With this element you can create an appealing heaeder as seen in the demo site at : http://hogash-demo.com/kallyas_wp/static-content/

STATIC CONTENT - Event Countdown:

Using this element you can add an event countdown header. Please note that in order to use the signup form , you will need to enter your MAILCHIMP API key inside the theme's admin page.

#### ACTION BOX AREA :

ACTION BOX :

Using this element you can add an action box ( the red part under the sliders on some demo pages ).

#### CONTENT AREA :

The same elements can be found in all content areas :

- Main Area
- Grey Area
- Bottom Area

Please refer to the video bellow to see how each element works and what you can create with it :

### PORFOLIO SETUP

Using this theme, you will find out that is very easy to setup your portfolio.

All portfolio items and categories can be created from the Portfolio Items menu on the right side of your admin page.

The first thing you need to do is create your portfolio categories, which you can do from the Portfolio Items > Portfolio Categoies menu.

After you have created at least one category , you can open the portfolio items page and press the "Add new portfolio Item" button.This will open your portfolio item edit page.

Options :

- Project Link : This link will appear on the portfolio single page and on the Carousel Layout portfolio category
- Colaborators : Here you can enter your colaborators for this project
- Show Social Icons : If set to yes, several social buttons will be integrated in the single portfolio page
- Portfolio Item Media : Here you can add your images/videos for your portfolio item

If you only select an image, the modal opened when you will click that image in the frontend will contain the full size image used.
If you select both an image and a video, The video will appear when you click on the selected image
If you select only a video, this will appear in the same location as the image ussually appear.

### WOOCOMMERCE

The theme has built in woocommerce templates that can be found inside : kallyas/woocommerce .

If you have already worked with Woocommerce until now, you will notice that the theme adds several features to your shop :

- New items badge - Can be configured from the theme's admin page
- Reduced price ammount in percentage for the "on sale" page builder element. This badge will show the price ammount reduced for all items currently on sale.

If this is the first time you work with WooCommerce, we recommend you read the documentation found here :http://wcdocs.woothemes.com/

Theme additions to the product edit page :

The theme added a media gallery for each product item that is very easy to use. You can configure your product media by first adding a featured image to that item ( this image will be the main product image ).

As you can see in the demo site, you can set additional images to one product. This can be easily done by using the "Image Gallery" function that you see under the editor.

How to create the SHOP page as seen in the demo :

The whole SHOP page seen at : http://hogash-demo.com/kallyas_wp/shop-page/ is created using the PAGE BUILDER.

In order to replicate this page, you will have to :

- Make sure that you have created several products and categories
- Create a new blank page that will be used as the SHOP page

Using this created page, you will need to add the following page builder elements :

HEADER AREA

- IOS SLIDER

ACTION BOX AREA

- Action box element

CONTENT MAIN AREA

- Images Box element. Using this element, the images will be displayed based on their dimensions.
- Shop Product Presentation : You will need to select your desired categories to display from this element options
- Shpo Limited options ( size 2/3 ) : You will need to select your desired categories to display from this element options
- Video Box ( size 1/3 ) : You will need to add your own image and video link
- Partners logos : You will need to configure this element by adding your partners images and text

CONTENT GREY AREA :

- Shop Features : Here you can configure your shop featuers as seen in the demo site.

### SHORTCODES

The theme has several shortcodes built-in :

The theme has a built in button for you to easily add your shortcodes. Using this button you will not have to mannually write your shortcodes so i will only list them in this documentation file.

Headings

Subtitle

    [subtitle] Content [/subtitle]

Alternative heading

    [h1a] Content [/h1a]

Lists

    [list type="list-style1"]
    LIST HERE
    [/list]

    [list type="list-style2"]
    LIST HERE
    [/list]

Tables

    [table type="table-striped"]TABLE HERE [/table]

Blockquotes

    [blockquote author="" align=""] Content [/blockquote]

Misc

QR code :

    [qr align="right" size="140"] MECARD:N:Marius Hogas;ADR:MyStreet 22, Bucuresti;TEL:+ (50) 555 89 89;TEL:+ (50) 555 88 88;TEL:+ (50) 555 87 87;TEL:+ (50) 555 86 86;EMAIL:mhogas@gmail.com;URL:http://www.hogash.com/; [/qr]

Code

    [code] Content [/code]

Skills

    [skills main_text="skills" main_color="#193340" text_color="#ffffff"]
    [skill main_color="#97BE0D" percentage="95"] JavaScript [/skill]
    [skill main_color="#D84F5F" percentage="90"] CSS3[/skill]
    [skill main_color="#88B8E6" percentage="80"] HTML5[/skill]
    [skill main_color="#BEDBE9" percentage="53"] PHP[/skill]
    [skill main_color="#EDEBEE" percentage="45"] MySQL[/skill]
    [/skills]

Tooltip

    [tooltip placement="" border="yes" title=""] Content [/tooltip]

Icon

    [icon white="false" ] icon-glass [/icon]

Layouts

Every layout must be wrapped in the row shortcode :

    [row] [one_half_column] Content [/one_half_column] [/row]

Buttons

    [button style="" size="" block="false"] BUTTON TEXT [/button]

Pricing tables

    [pricing_table color="red" columns="4" space="no" rounded="no"]

    [pricing_column name="Starter" highlight="no" price="$6.99" price_value="per month" button_link="#" button_text="ORDER NOW"]
    LIST HERE
    [/pricing_column]

    [pricing_column name="Standard" highlight="yes" price="$9.99" price_value="per month" button_link="#" button_text="ORDER NOW"]
    LIST HERE
    [/pricing_column]

    [pricing_column name="Professional" highlight="no" price="$13.99" price_value="per month" button_link="#" button_text="ORDER NOW"]
    LIST HERE
    [/pricing_column]

    [pricing_column name="Ultra" highlight="no" price="$99.99" price_value="per month" button_link="#" button_text="ORDER NOW"]
    LIST HERE
    [/pricing_column]

    [/pricing_table]

Accordions

    [accordion title="" style="default-style"] Content [/accordion]

Tabs

    [tabs style="style1"]
    [tab title="TAB_NAME"] CONTENT [/tab]
    [tab title="TAB_NAME"] CONTENT [/tab]
    [tab title="TAB_NAME"] CONTENT [/tab]
    [/tabs]

### CUSTOM WIDGETS

The theme adds the following custom widgets created esspecially for this theme :

- [Kallyas] Contact Widget : This widgets is just like a normal text widget with the exception that it adds a bubble image on it's background
- [Kallyas] Flickr Widget : With this widget you can add your Flickr images in a sidebar
- [Kallyas] Mailchimp Widget : With this widget you can add a Mailchimp subscribe form on your sidebars
- [Kallyas] Side by Side menu : This is a menu widget that display the menu items side by side. It was used as the footer menu in the demo site
- [Kallyas] Social Buttons Widget : This widget let's you add several social buttons in a sidebar
- [Kallyas] Twitter Widget : This widget adds a twitter timeline . Please note that this widget is meant to be used in the footer.

### THEME TRANSLATION

The theme fully supports WPML for managing a multilanguage website. Additionally , the theme is translation ready.

You can translate it to any language or even set multiple languages.
Good article with resources about how to translate WordPress into your language is http://codex.wordpress.org/Translating_WordPress
Our .PO file located in languges/ folder inside the theme's folder.

### HTML Structure

In this template i used as a framework, the BOOTSTRAP Framework. You can take a look here http://twitter.github.com/bootstrap/ and see it's awesome feature in action
I mostly kept the generic styles, resets & grid.
So as a short description, the grid is composed by 12 columns, named like "span1", "span2", "span3"...."span12". The span div's should be placed in rows and the rows in a container.
A basic layout of the grids look like:

    <div class="container">
        <div class="row">
            <div class="span5"> 5 Columns </div>
            <div class="span3"> 3 Columns </div>
            <div class="span4"> 4 Columns </div>
            <div class="span12">
              <div class="row">
                <div class="span6"> 6 columns  </div>
                <div class="span6"> 6 columns  </div>
              </div>
            </div>
        </div>
    </div>

Also, remember that there's no need to add "alpha" & "omega" classes to every row's first & last columns. The framworks knows on it's own when to apply.

### CSS Files and Structure

I'm using several CSS files in this theme:

As you can see , there are several css files used by the theme. Please note that the theme only loads some of them , depending on your settings in the theme's options panel

- css/bootstrap.css - these are generic styles, resets & normalization;
- css/bootstrap-1170.css - this file is used when you select the 1170 width layout from theme options
- css/bootstrap-960.css - this file is used when you select the 960 width layout from theme options
- css/bootstrap-responsive.css - this file is used when you select to use the reponsive options of the theme
- css/responsive-devices.css - this file is used when you select to use the reponsive options of the theme
- css/dark-theme.css - this stylesheet contains the classes for dark theme. Uncomment it from each page.
- css/template.css - this is the main css file, it contains all the styles of the website
- css/template-960.css - this is the main css file that will be used if you select the 960px width layout, it contains all the styles of the website
- css/fixes.css - this stylesheet contains the fixes for other browsers and when i say other browsers i just mean IE browsers :)
- css/options.css - this file is autogenerated when you save the theme options. if you change something in this file, the changes will be lost the next time you save the options.

- css/custom.css - to be safe, i recommend you writing your rules and style declarations here and just override the previous rules. So in case i make an update you can just replace the stylesheet.
- css/fixes.css - this stylesheet contains the fixes for other browsers and when i say other browsers i just mean IE browsers :)

- css/responsive.css - this stylesheet contains responsive rules for adapting the template to any resolution. Remember, this is not a stylesheet for mobiles. There isn;t a mobile responsive layout for this template, instead, there's a better solution - separate, mobile specific theme.

### Javascript Files

This template imports several JS files.

The theme is created with the smart load feature. This means that the js files are only loaded if they are used on the current page visited.

Some of the JS code is automatically created and added to the footer from the functions.php file.

The js (scripts) files are loaded both in head and footer. I just loaded several files in head but many of them are loaded in the bottom because it will increase the site speed and rendering.
The JS files used in this template are:

- Jquery Library
- Modernizr
- Kalypso custom scripts - js/kalypso_script.js :This one contains multiple scripts, you can try having a look to know what it's there, i've commented mostly everything so i'm sure you will understand.

Other JS plugins (check them out in the Source & Credits section)

### SOURCES & CREDITS

- Several images are from deviantart.com
- Icons - http://www.iconfinder.com/
- Images used in preview properly licensed from www.photodune.net or www.depositphotos.com (not included in the template)
- Placeholder images - www.lorempixum.com
- Subtle Patterns http://subtlepatterns.com/

SCRIPTS:

- Bootstrap Framework http://twitter.github.com/bootstrap/
- IOS Slider - http://iosscripts.com/iosslider/
- Revolution Slider http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848
- Icarousel http://codecanyon.net/item/icarousel/2527180
- 3d Cute Slider - http://codecanyon.net/item/cute-slider-3d-2d-html5-image-slider/3046001
- Isotope Jquery plugin (properly licensed) http://isotope.metafizzy.co
- Nivo Slider http://nivo.dev7studios.com/
- WowSlider - http://wowslider.com/
- Modernizr - http://modernizr.com/
- Jquery Map marker plugin - http://www.welancers.com/jquery-map-marker-plugin/
- Flex Slider - http://www.woothemes.com/flexslider/
- CarouFredSel PrettyPhoto
- PrettyPhoto http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
- Jquery Countdown http://keith-wood.name/countdown.html
- Superfish Menu http://users.tpg.com.au/j_birch/plugins/superfish/
- Respond.js https://github.com/scottjehl/Respond
- Twitter JS Api http://code.google.com/p/twitterjs/
- Jquery Flickr Plugin http://www.newmediacampaigns.com/page/jquery-flickr-plugin
- Jquery Easing http://gsgd.co.uk/sandbox/jquery/easing/
- Jquery Placeholder http://mths.be/placeholder
- SWF Object http://code.google.com/p/swfobject/
- Raphael Diagram http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/
- Jquery Mobile jquerymobile.com
- Redirection Mobile http://github.com/sebarmeli/JS-Redirection-Mobile-Site