{"id":33,"date":"2011-05-02T11:45:48","date_gmt":"2011-05-02T11:45:48","guid":{"rendered":"http:\/\/192.168.1.50\/Themes\/2012\/Nano2\/Website_WP\/?page_id=33"},"modified":"2013-10-09T16:39:53","modified_gmt":"2013-10-09T16:39:53","slug":"features","status":"publish","type":"page","link":"https:\/\/www.pathway.ru\/?page_id=33","title":{"rendered":"Features"},"content":{"rendered":"

This theme is built on the Warp framework<\/a>, a well-engineered theme framework for WordPress and Joomla, and utilizes all of its latest features. The user interface is powered by UIkit<\/a>, 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<\/a>.<\/p>\r\n\r\n

Styles<\/h2>\r\n

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.<\/p>\r\n\r\n

\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Default<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
City<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Fashion<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Forest<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Office<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Trekking<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n
\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Volcano<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n
\r\n
\r\n \r\n
\r\n \"Load\r\n
<\/div>\r\n <\/div>\r\n
Stadium<\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n

Parallax<\/h2>\r\n

To use our unique parallax effect, just add the .parallax<\/code> class to a <div><\/code> element and modify it the way you want with the data-*<\/code> attributes. <\/p>\r\n\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
Syntax name<\/th>\r\n Description<\/th>\r\n Default value<\/th>\r\n <\/tr>\r\n <\/thead>\r\n
data-sizeratio=\"\"<\/code><\/td>\r\n Defines the height in relation to the width.<\/td>\r\n 0.38<\/code><\/td>\r\n <\/tr>\r\n
data-ratio=\"\"<\/code><\/td>\r\n Defines the effect speed. The higher the value, the more slower the effect speed. \"1\"<\/code> is the natural scroll speed.<\/td>\r\n 8<\/code><\/td>\r\n <\/tr>\r\n
data-maxdiff=\"\"<\/code><\/td>\r\n Defines a maximal scroll height.<\/td>\r\n false<\/code><\/td>\r\n <\/tr>\r\n
data-start=\"\"<\/code><\/td>\r\n Defines a starting position.<\/td>\r\n 0<\/code><\/td>\r\n <\/tr>\r\n
data-mode=\"\"<\/code><\/td>\r\n Defines, when the parallax effects begins. \"inview\"<\/code> starts once the parallax is in view of the browser frame. \"dock\"<\/code> starts when the browser frame top docks to the parallax.<\/td>\r\n inview<\/code><\/td>\r\n <\/tr>\r\n
data-childanimation=\"\"<\/code><\/td>\r\n Defines, if the child element is animated with \"true\"<\/code> or \"false\"<\/code>.<\/td>\r\n true<\/code><\/td>\r\n <\/tr>\r\n
data-childdir=\"\"<\/code><\/td>\r\n Defines the direction of child elements. \"-1\"<\/code> will scroll to top. \"1\"<\/code> will scroll to bottom.<\/td>\r\n 1<\/code><\/td>\r\n <\/tr>\r\n
data-childratio=\"\"<\/code><\/td>\r\n Defines the speed of child elements. \"-1\"<\/code> will scroll to top. \"1\"<\/code> will scroll to bottom.<\/td>\r\n 3<\/code><\/td>\r\n <\/tr>\r\n
data-childopacity=\"\"<\/code><\/td>\r\n Adds or removes a fade-out effect from child elements by using the value \"true\"<\/code> or \"false\"<\/code>.<\/td>\r\n true<\/code><\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n\r\n

Parallax example<\/h3>\r\n
\r\n<div class=\"parallax\" id=\"parallax-top-image\" data-childopacity=\"false\" data-sizeratio=\"0.12\" data-childdir=\"1\">\r\n   <div>This is the child element<\/div>\r\n<\/div>\r\n<\/pre>\r\n\r\n\r\n
Custom Widgetkit Styles<\/h2>\r\n
We created a custom style for our Widgetkit Slideset<\/a>, perfectly fitting the theme. To apply this style, follow these steps:<\/p>\r\n\r\n
Slideset<\/h3>\r\n
    \r\n  
  1. Download and unzip the bonus styles package for Widgetkit available in the download area<\/li>\r\n  
  2. Copy the folder slideset\/styles\/capture<\/strong><\/li>\r\n  
  3. Joomla: Paste it to media\/widgetkit\/widgets\/slideset\/styles<\/strong>
     WordPress: Paste it to wp-content\/plugins\/widgetkit\/widgets\/slideset\/styles<\/strong><\/li>\r\n  
  4. Now you can select the style “Capture” in the settings of your Widgetkit Slideset<\/li>\r\n<\/ol>\r\n\r\n
    Social Icons<\/h2>\r\n\r\n
    Use the modifier .uk-icon-button class to create an icon button.<\/p>\r\n\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n<\/a>\r\n
    Here is a little code example how to add them:<\/p>\r\n
    \r\n  <a href="#" class="uk-icon-button uk-icon-twitter"><\/a>\r\n  <a href="#" class="uk-icon-button uk-icon-facebook"><\/a>\r\n  <a href="#" class="uk-icon-button uk-icon-google-plus"><\/a>\r\n<\/pre>\r\n\r\n
    Here<\/a> is an overview of all icons provided by Font Awesome<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
    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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.pathway.ru\/index.php?rest_route=\/wp\/v2\/pages\/33"}],"collection":[{"href":"https:\/\/www.pathway.ru\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pathway.ru\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pathway.ru\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pathway.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":7,"href":"https:\/\/www.pathway.ru\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/www.pathway.ru\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions\/727"}],"wp:attachment":[{"href":"https:\/\/www.pathway.ru\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}