{"id":40,"date":"2016-01-05T13:55:53","date_gmt":"2016-01-05T13:55:53","guid":{"rendered":"https:\/\/luna.imkereibedarf.net\/index.php\/theme\/"},"modified":"2016-08-01T07:41:29","modified_gmt":"2016-08-01T07:41:29","slug":"theme","status":"publish","type":"page","link":"https:\/\/luna.imkereibedarf.net\/?page_id=40","title":{"rendered":"Theme"},"content":{"rendered":"<hr class=\"uk-article-divider tm-margin-xlarge uk-margin-top-remove\">\r\n\r\n<div class=\"uk-text-center\">\r\n    <h2 id=\"tm-theme-backgrounds\" class=\"uk-margin-small-bottom\">Backgrounds<\/h2>\r\n    <p class=\"uk-article-lead uk-margin-top-remove\">This Theme includes a unique background effect or animation for each style.<\/p>\r\n<\/div>\r\n\r\n<div class=\"tm-margin-large\">\r\n\n\n<div id=\"wk-grid1cd\" class=\"uk-grid-width-1-1 uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5 uk-grid uk-grid-match uk-text-left \" data-uk-grid-match=\"{target:'> div > .uk-panel', row:true}\" data-uk-grid-margin >\n\n\n    <div>\n        <div class=\"uk-panel\">\n\n            \n            \n                        <div class=\"uk-text-center uk-panel-teaser\"><img src=\"\/wp-content\/uploads\/yootheme\/theme-background-01.jpg\" class=\" uk-overlay-scale\" alt=\"Fireflies\" width=\"717\" height=\"717\"><\/div>\n            \n            \n            \n            \n            \n            \n            \n            \n            \n        <\/div>\n    <\/div>\n\n\n    <div>\n        <div class=\"uk-panel\">\n\n            \n            \n                        <div class=\"uk-text-center uk-panel-teaser\"><img src=\"\/wp-content\/uploads\/yootheme\/theme-background-02.jpg\" class=\" uk-overlay-scale\" alt=\"Particles\" width=\"717\" height=\"717\"><\/div>\n            \n            \n            \n            \n            \n            \n            \n            \n            \n        <\/div>\n    <\/div>\n\n\n    <div>\n        <div class=\"uk-panel\">\n\n            \n            \n                        <div class=\"uk-text-center uk-panel-teaser\"><img src=\"\/wp-content\/uploads\/yootheme\/theme-background-03.jpg\" class=\" uk-overlay-scale\" alt=\"Geometries\" width=\"717\" height=\"717\"><\/div>\n            \n            \n            \n            \n            \n            \n            \n            \n            \n        <\/div>\n    <\/div>\n\n\n    <div>\n        <div class=\"uk-panel\">\n\n            \n            \n                        <div class=\"uk-text-center uk-panel-teaser\"><img src=\"\/wp-content\/uploads\/yootheme\/theme-background-04.jpg\" class=\" uk-overlay-scale\" alt=\"Shapes\" width=\"717\" height=\"717\"><\/div>\n            \n            \n            \n            \n            \n            \n            \n            \n            \n        <\/div>\n    <\/div>\n\n\n    <div>\n        <div class=\"uk-panel\">\n\n            \n            \n                        <div class=\"uk-text-center uk-panel-teaser\"><img src=\"\/wp-content\/uploads\/yootheme\/theme-background-05.jpg\" class=\" uk-overlay-scale\" alt=\"Circles\" width=\"717\" height=\"717\"><\/div>\n            \n            \n            \n            \n            \n            \n            \n            \n            \n        <\/div>\n    <\/div>\n\n\n<\/div>\n\n<script>\n(function($){\n\n    \/\/ get the images of the gallery and replace it by a canvas of the same size to fix the problem with overlapping images on load.\n    $('img[width][height]:not(.uk-overlay-panel)', $('#wk-grid1cd')).each(function() {\n\n        var $img = $(this);\n\n        if (this.width == 'auto' || this.height == 'auto' || !$img.is(':visible')) {\n            return;\n        }\n\n        var $canvas = $('<canvas class=\"uk-responsive-width\"><\/canvas>').attr({width:$img.attr('width'), height:$img.attr('height')}),\n            img = new Image,\n            release = function() {\n                $canvas.remove();\n                $img.css('display', '');\n                release = function(){};\n            };\n\n        $img.css('display', 'none').after($canvas);\n\n        $(img).on('load', function(){ release(); });\n        setTimeout(function(){ release(); }, 1000);\n\n        img.src = this.src;\n\n    });\n\n})(jQuery);\n<\/script>\n\r\n<\/div>\r\n\r\n<hr class=\"uk-article-divider tm-margin-xlarge\">\r\n\r\n<div class=\"uk-text-center\">\r\n  <h2 id=\"tm-theme-specials\" class=\"uk-margin-small-bottom\">Specials<\/h2>\r\n  <p class=\"uk-article-lead uk-margin-top-remove\">We&#8217;ve added a snazzy typo teaser and a Smoothscroll position to Luna theme.<\/p>\r\n<\/div>\r\n\r\n<div class=\"tm-margin-large\">\r\n  \n<div class=\"tm-grid-shadow\" >\n\n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-2-5 uk-text-center\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-teaser.jpg\" class=\" uk-overlay-scale\" alt=\"Teaser\">        <\/div>\n        \n                <div class=\"uk-width-medium-3-5\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Teaser                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>The frontpage of Luna theme opens with a catchy typographic teaser that adapts to each style. It consists of HTML text and an overlaying image, which you can replace with your own. The main heading can be styled in detail through the customizer.<\/p>\n\n<pre><code>&lt;div class=\"tm-teaser-container\"&gt;\n    &lt;h1 class=\"tm-heading-teaser\" data-heading=\"my text\"&gt;My Text&lt;\/h1&gt;\n    &lt;img src=\"\" alt=\"\"&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    <hr class=\"uk-grid-divider  uk-margin-large\">\n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-2-5 uk-text-center\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-smoothscroll.jpg\" class=\" uk-overlay-scale\" alt=\"Smoothscroll\">        <\/div>\n        \n                <div class=\"uk-width-medium-3-5\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Smoothscroll                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>As a feature to help users navigate through long pages, we&#8217;ve added the smoothscroll position. Just add the following markup to a text widget published to the <em>Smoothscroll<\/em> position. Don&#8217;t forget to link to the IDs of the sections that you want to navigate to.<\/p>\n\n<pre><code>&lt;ul class=\"uk-dotnav uk-flex-column\" data-uk-scrollspy-nav=\"{smoothscroll: {offset: 90}, closest:'li'}\"&gt;\n    &lt;li&gt;&lt;a href=\"#my-id-01\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#my-id-02\"&gt;&lt;\/a&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n<\/div>\n\r\n<\/div>\r\n\r\n<hr class=\"uk-article-divider tm-margin-xlarge\">\r\n\r\n<div class=\"uk-text-center\">\r\n  <h2 id=\"tm-theme-navigations\" class=\"uk-margin-small-bottom\">Navigation<\/h2>\r\n  <p class=\"uk-article-lead uk-margin-top-remove\">Luna theme comes with three different layouts for the main menu.<\/p>\r\n<\/div>\r\n\r\n<div class=\"tm-margin-large\">\r\n  \n<div class=\"tm-grid-shadow\" >\n\n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n        \n                <div class=\"uk-width-1-1\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                \n                                <div class=\"uk-margin\"><div class=\"uk-grid\" data-uk-grid-match data-uk-margin>\n    <div class=\"uk-width-medium-2-5 uk-text-center uk-float-right uk-flex-order-last-medium\">\n        <img decoding=\"async\" class=\"uk-margin-bottom\" src=\"\/wp-content\/uploads\/yootheme\/theme-nav-centered.jpg\" alt=\"Centered\">\n        <img decoding=\"async\" class=\"uk-margin-bottom\" src=\"\/wp-content\/uploads\/yootheme\/theme-nav-stacked.jpg\" alt=\"Stacked\">\n        <img decoding=\"async\" src=\"\/wp-content\/uploads\/yootheme\/theme-nav-left.jpg\" alt=\"Left\">\n    <\/div>\n    <div class=\"uk-width-medium-3-5\">\n        <h3 class=\"uk-h4\">Layouts<\/h3>\n        <p>The centered navigation places the logo in the middle and distributes menu items equally on both sides. If your site has a big logo, you will probably want to use the stacked layout that places the logo above the navigation, so it has enough space. A traditional, left-aligned layout is also available. You select these options in the Warp administration.<\/p>\n    <\/div>\n<\/div><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-2-5 uk-text-center uk-float-right uk-flex-order-last-medium\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-nav-sticky.gif\" class=\" uk-overlay-scale\" alt=\"Sticky and transparent\">        <\/div>\n        \n                <div class=\"uk-width-medium-3-5\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                \n                                <div class=\"uk-margin\"><h3 class=\"uk-h4\">Sticky and absolute<\/h3>\n<p>Of course, the navbar also comes with a <em>sticky<\/em> option, so that it remains fixed at the top of the window.<\/p>\n<p>This can be combined with the <em>Transparent<\/em> option that removes the menu&#8217;s background and places it on top of the content. The menu color adapts automatically to all block styles. Upon scrolling down the page the navigation will reappear with its background, if it is set to sticky mode.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n<\/div>\n\r\n<\/div>\r\n\r\n<hr class=\"uk-article-divider tm-margin-xlarge\">\r\n\r\n<div class=\"uk-text-center\">\r\n  <h2 id=\"tm-theme-blocks\" class=\"uk-margin-small-bottom\">Block Appearance<\/h2>\r\n  <p class=\"uk-article-lead uk-margin-top-remove\">To add flexibility, Luna theme provides settings for each widget position.<\/p>\r\n<\/div>\r\n\r\n<div class=\"tm-margin-large\">\r\n  \n<div class=\"tm-grid-shadow\" >\n\n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-block-background.jpg\" class=\" uk-overlay-scale\" alt=\"Background\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Background                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>You can apply a different background color to each block.<\/p>\n<p class=\"tm-text-lead uk-margin-bottom-remove\">Colors<\/p>\n<p class=\"uk-margin-top-remove\">Default, Muted, Secondary, Primary<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-block-padding.jpg\" class=\" uk-overlay-scale\" alt=\"Padding\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Padding                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>Add different paddings to each section or remove the padding altogether.<\/p>\n<p class=\"tm-text-lead uk-margin-bottom-remove\">Padding<\/p>\n<p class=\"uk-margin-top-remove\">Default, Small, Large, xLarge, None<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-block-width.jpg\" class=\" uk-overlay-scale\" alt=\"Content width\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Content width                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>You can apply different content widths or enable full width<\/p>\n<p class=\"tm-text-lead uk-margin-bottom-remove\">Widths<\/p>\n<p class=\"uk-margin-top-remove\">Default, Small, Fullwidth<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-block-full.jpg\" class=\" uk-overlay-scale\" alt=\"Full height\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Full height                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>Each section contains a full height option. If combined with full width, this is great for teaser layouts or a fullscreen slideshow.<\/p>\n\n<p>Additionally, you can apply your own class to add custom styles to a block.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n<\/div>\n\r\n<\/div>\r\n\r\n<hr class=\"uk-article-divider tm-margin-xlarge\">\r\n\r\n<div class=\"uk-text-center\">\r\n    <h2 id=\"tm-theme-widgetkit\" class=\"uk-margin-small-bottom\">Widgetkit<\/h2>\r\n    <p class=\"uk-article-lead uk-margin-top-remove\">In addition to the default Widgetkit plugins, Luna provides 4 custom widgets.<\/p>\r\n<\/div>\r\n\r\n<div class=\"tm-margin-large\">\r\n\n<div class=\"tm-grid-shadow\" >\n\n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center uk-float-right uk-flex-order-last-medium\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-widgetkit-gallery.jpg\" class=\" uk-overlay-scale\" alt=\"Gallery\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Gallery                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>The custom <em>Gallery<\/em> widget allows you to add tags to your content that will be displayed inside a list below the title. This works with all overlay style. The default gallery options are still available as well.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center uk-float-right uk-flex-order-last-medium\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-widgetkit-grid.jpg\" class=\" uk-overlay-scale\" alt=\"Grid\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Grid                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>This custom <em>Grid<\/em> widget displays content inside a hover panel, meaning that the panel displays a background on hover. On the left of your content there&#8217;s a check icon. This widget is great to publish a list of information in a grid layout. Note that media items will not be displayed inside this grid.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center uk-float-right uk-flex-order-last-medium\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-widgetkit-grid-button.jpg\" class=\" uk-overlay-scale\" alt=\"Grid Button\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Grid Button                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>To create a grid with spinning buttons that appear on hover, as seen on the frontpage, add the <code>.tm-grid-button<\/code> class to a <em>regular Grid<\/em> widget.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center uk-float-right uk-flex-order-last-medium\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-widgetkit-list.jpg\" class=\" uk-overlay-scale\" alt=\"List\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            List                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>Luna theme includes a custom <em>List<\/em> widget. It allows you to publish content inside a layout that resembles a description list. Items can be separated by borders, through background colors or space. The <em>Subtitle<\/em> field allows you to display additional information below each item&#8217;s title.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n    \n    <div class=\"uk-grid uk-margin-large uk-text-left \" data-uk-grid-match data-uk-margin=\"{cls:'uk-margin-top'}\">\n\n                <div class=\"uk-width-medium-1-2 uk-text-center uk-float-right uk-flex-order-last-medium\" >\n            <img src=\"\/wp-content\/uploads\/yootheme\/theme-widgetkit-slideshow.jpg\" class=\" uk-overlay-scale\" alt=\"Slideshow\">        <\/div>\n        \n                <div class=\"uk-width-medium-1-2\" >\n            <div class=\"uk-panel uk-width-1-1\">\n\n                \n                                <h3 class=\"uk-h4\">\n\n                                            Slideshow                    \n                    \n                <\/h3>\n                \n                                <div class=\"uk-margin\"><p>This <em>Slideshow<\/em> widget is made to display quotes or similar content. Media items are published as avatars on top of the content panel. You can select different panel styles and add a <em>Watermark<\/em> to each item by typing your own text into the custom field in the <em>Content<\/em> section of the widget administration.<\/p><\/div>\n                \n                \n                \n            <\/div>\n        <\/div>\n        \n    <\/div>\n\n    \n\n<\/div>\n\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Backgrounds This Theme includes a unique background effect or animation for each style. Specials We&#8217;ve added a snazzy typo teaser and a Smoothscroll position to Luna theme. Navigation Luna theme comes with three different layouts for the main menu. Block Appearance To add flexibility, Luna theme provides settings for each widget position. Widgetkit In addition [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=\/wp\/v2\/pages\/40"}],"collection":[{"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":0,"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"wp:attachment":[{"href":"https:\/\/luna.imkereibedarf.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}