Demo
  • Widget
    Any widget can be placed in the drop-down menu position.

Features

This theme is built on the Warp framework, a well-engineered theme framework for WordPress and Joomla, and utilizes all of its latest features. The user interface is powered by UIkit, a lightweight and modular front-end framework, which provides the theme’s styling. The theme also comes with a wide range of different layouts and widget variations.

Styles

We provide lovingly crafted style variations to give you a glimpse of what is possible with this theme. The built-in theme customizer allows you to modify colors, fonts, sizes and much more without any CSS knowledge. Just choose your colors with the color picker and adjust the theme with only a few clicks. Click on one of the images to see the style.

Parallax

To use our unique parallax effect, just add the .parallax class to a <div> element and modify it the way you want with the data-* attributes.

Syntax name Description Default value
data-sizeratio="" Defines the height in relation to the width. 0.38
data-ratio="" Defines the effect speed. The higher the value, the more slower the effect speed. "1" is the natural scroll speed. 8
data-maxdiff="" Defines a maximal scroll height. false
data-start="" Defines a starting position. 0
data-mode="" Defines, when the parallax effects begins. "inview" starts once the parallax is in view of the browser frame. "dock" starts when the browser frame top docks to the parallax. inview
data-childanimation="" Defines, if the child element is animated with "true" or "false". true
data-childdir="" Defines the direction of child elements. "-1" will scroll to top. "1" will scroll to bottom. 1
data-childratio="" Defines the speed of child elements. "-1" will scroll to top. "1" will scroll to bottom. 3
data-childopacity="" Adds or removes a fade-out effect from child elements by using the value "true" or "false". true

Parallax example

<div class="parallax" id="parallax-top-image" data-childopacity="false" data-sizeratio="0.12" data-childdir="1">
   <div>This is the child element</div>
</div>

Custom Widgetkit Styles

We created a custom style for our Widgetkit Slideset, perfectly fitting the theme. To apply this style, follow these steps:

Slideset

  1. Download and unzip the bonus styles package for Widgetkit available in the download area
  2. Copy the folder slideset/styles/capture
  3. Joomla: Paste it to media/widgetkit/widgets/slideset/styles
    WordPress: Paste it to wp-content/plugins/widgetkit/widgets/slideset/styles
  4. Now you can select the style “Capture” in the settings of your Widgetkit Slideset

Social Icons

Use the modifier .uk-icon-button class to create an icon button.









Here is a little code example how to add them:

  <a href="#" class="uk-icon-button uk-icon-twitter"></a>
  <a href="#" class="uk-icon-button uk-icon-facebook"></a>
  <a href="#" class="uk-icon-button uk-icon-google-plus"></a>

Here is an overview of all icons provided by Font Awesome.

Twitter Single

Twitter response: "Bad Authentication data."

Twitter Bubbles

Twitter response: "Bad Authentication data."

Premium Themes for

WordPress & Joomla

Widgetkit Slideset Frontpage

  • Fjord

    Fresh nordic style with
    blue color variants.

    Fjord Image
  • City

    Urban style with
    nice color contrasts.

    City Image
  • Trekking

    Nature style with earth-
    colored shades.

    Trekking Image
  • Office

    Agency style with
    modern colors.

    Office Image
  • Stadium

    Sportive style with strong
    blue and red colors.

    Stadium Image
  • Volcano

    Epic style with orange
    and brown colors.

    Volcano Image
  • Fashion

    Light and warm style with
    lilac-purple shades.

    Fashion Image
  • Forest

    Dreamy, cool style with
    green and blue colors.

    Forest Image

Built with HTML5 and CSS3
Copyright © 2013 YOOtheme