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

IS THIS THEME WORKING WITH WPML ?

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.5

What's new

Changelog 2.4

What's new

Changelog 2.3

What's new

Changelog 2.2

What's new

Changelog 2.1

What's new

Changelog 2.0

What's new

Changelog 1.9

What's new

Changelog 1.8

What's new

Changelog 1.7

What's new

Changelog 1.6

What's new

Changelog 1.5

What's new

Changelog 1.4

What's new

Changelog 1.3

What's new

Changelog 1.2

What's new

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 :

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>

<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>

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.

HTML Structure

<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>

CSS Files and Structure

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 :)

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.

• 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. 

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/

• 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