Established 2007, Italy
Gartendesign Hojsak

Styles

6 different theme styles for a good start.

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.

Theme Features

Theme Features

The Theme comes with some unqiue and cool features.

Framed Style

Framed Style

This theme provides a special option to display a slightly animated frame around the layout. You can decide between a frame that overlays your content and one that „hugs“ your content by adding padding around it. The width of the frame automatically adapts itself to save space on different viewport sizes.

Framed Blocks

Further you can switch on the frame block option, which will add the same spacing of the layout frame between each block section.

To edit the background color and width of the frame, use the Customizer in the Warp UI.

Bottom Offset

Bottom Offset

Dolce Vita comes with a special layout position called bottom-offset. It is perfect for banners or small teasers. The dimensions and spacings are calculated automatically according to the size of the published content, so that it always stays centered between the bottom and footer sections.

Footer’s block appearance

The style of this panel is bound to the footer block appearance settings. If you select the primary background and the primary contrast options for the footer, the same settings are applied to Bottom-Offset position. Otherwise it uses the default panel style.

Full UIkit Support

Full UIkit Support

This time we decided to fully style almost everything in the contrast component .uk-contrast. This means all kinds of UIkit components like alerts, buttons, panels, subnavs, panels, text elements and forms are completely styled. We recommend this usage for dark and colored images and for .uk-block-secondary modifier class/secondary background option in the block appearance section.

Contrast Primary

We’ve added a new component – Contrast Primary, which adapts the same components as .uk-contrast specifically for primary blocks. To manually apply this modifier, use the .uk-contrast-primary class.

Easy modifications

Please use the Customizer in the Warp UI, there you will find two labeled sections Primary and Secondary, these settings will completely manage both components.

Read more

Navbar

Navbar

The main navigation of Dolce Vita Theme supports the latest UIkit sticky navigation component features. You are able to choose from 4 different navigation layouts.

Navigation Layouts

  • Left – Logo on the left side and the menu stacked below the logo. Supports search and more module/widget positions. /layouts/header.default.php
  • Single Row – Logo on the left side and centered menu items. Supports search and more module/widget positions. /layouts/header.single.php
  • Centered – Logo and menu items are centered and stacked. Supports headerbar, search and more module/widget positions. /layouts/header.centered.php

Additonally, all these navbar layouts can be fixed to the browser window while scrolling.

Special Navbar Layout

  • Overlay – The logo will work as a hover trigger for the navigation to display. If you start scrolling down, the navigation will also appear. /layouts/header.overlay.php

Dropdown Overlay

    Enables a full width dropdown menu container which will be displayed on top of the content.

Block Appearance

Block Appearance

Dolce Vita supports some useful options for all block layout positions. All settings can be combined for a block position. If you need different block settings for different pages, you can use layout profiles and assign them to your menu items.

Options

  • Background – Choose from 4 different background colors.
  • Image – Enter a path to a background image for this position.
  • Image Blend – Define how the background image will mix/blend with the background color.
  • Image Opacity – Adds an overlay with the same background color of the block and an opacity value.
  • Contrast – Select between primary and secondary contrast component styles.
  • Padding – Select the spacing between the content and its block container.
  • Full Width – This removes the constraint of the content container so it will extend to full viewport width. Recommended for full width Widgetkit slideshows, for example.
  • Full Height – The block will take up full viewport height and the grid will centered within the container.
  • Grid Collapse – This option will reset the grid gutter and is recommended, if you want to use a full width Widgetkit slideshow or something similar.
  • Class – Use this input field for a custom CSS class which will be added to the block.

If you want to modify the background colors or paddings of the block elements, please use the Customizer and change the values.

Layout

Layout

The latest Warp themes come with a handful of additonal layout positions which let’s you add and publish pretty much content/modules and widgets.

Dolce Vita also supports some special layout positions like the fixed-bar position, which has a predefined width and will always stay above any other position. We published the featured dotnav follower in our demo content on this position but you can also add any other content of course.

If you want to modify the width of the fixed bar, please take a look at the „theme“ section in the Customizer.

Headerbar / Navbar

Dolce Vita supports 4 different headerbar/navbar layouts, please take a look at the Navbar section on this page for detailed information about the possible module/widget positions.

Read more

Theme Widgets

Dolce Vita includes 4 awesome and custom widgets.

Parallax

Parallax

We modified the Parallax widget this time to add some more customization options and really nice effects!.

Background + Image are working now

As you may already have noticed, we’ve already used CSS blend mode effects for the block appearance options of Dolce Vita and Avanti block appearance options. Now we’ve added this for the Widgetkit 2 Parallax widget, too. Now the images can blend into the 2 different background colors!

Background Blend Mode

You can select from 15 different background blend modes! They work very well with two background colors and the image opacity. Please check this link on MDN for example.

CSS background blend modes are not supported by any Microsoft Internet Explorer, yet. Please use the Image Opacity settings to recreate a similiar effect.

Image Opacity

It depends on the image itself how well the single blend modes will work and harmonize with the custom background colors. To give you more control over this, you can select an extra opacity value, too.

Contrast Color

Select the default, secondary or primary based colors for your item content style.

Blur

Another brand new option is to set two blur values for the title and for the content. This will blur in or blur out your item content.

Badge

This widget also supports a badge display option with vertical aligned text.

Slider

Slider

The slider widget comes width some useful little effects and tweaks.

Item scaling

This slider supports CSS scaling for the before and after items, you can choose from different value options in the widget settings. While scrolling through the single items you will experience a liquid like effect.

Overlay Changes

We have modified the overlay to allow some more flexibility.

  • Default Full background overlay and centered content.
  • Top, Bottom, Left, Right Content and overlay background will be aligned to the direction selected and the background’s width/height will adjust itself to the amount of content.

Other Options

  • Grid gutter large and extra large.
  • H5 and H6 options for the title size.
  • Supports Badge display option.
Gallery

Gallery

Dolce Vita provides a custom gallery widget which comes with a handful of new and unique features.

Sequence Grid

The gallery grid provides a pre-defined sequence which supports first- and last doubled item widths. This sequence is also fully responsive.

Overlay Settings

We took a look at the overlay settings and added new options to provide more flexibility.

Options
  • Background None, OnHover or Static.
  • Background Color Global (Body), Primary or Secondary.
  • Blend Mode Select from 15 different CSS background blend modes. Please check this link on MDN for examples.
  • Image Opacity 0% to 100% opacity of the item media.
  • Content Boxed This will add box around your content for better visibility.
  • Content Hover Content will only be displayed while hovering the item.
  • Overlay Position Select where your content will be displayed.
  • Overlay Text Align Select left, centered or right aligned text.

CSS background blend modes are not supported by any Microsoft Internet Explorer, yet. Please use the Image Opacity settings to recreate a similiar effect.

Other Options

  • Grid gutter large and extra large.
  • H5 and H6 options for the title size.
Grid

Grid

For Dolce Vita we have added a modified grid widget to customize our output, especially the one we can not control at all, like WordPress/Joomla system content. We have added a truncate option for the title and the content which makes it easier to control the data output and height.

Specials

  • Truncation option for the item title and content.
  • Grid divider option displays a border between the items.
  • Grid gutter large and extra large.
  • H5 and H6 options for the title size.
  • Option to display article/post tags as badges.

Additions

The Theme comes with some unqiue and cool features.

Font Variables and Modifiers

Font Variables and Modifiers

In Dolce Vita every style supports 3 possible font families. You can use three theme classes to overwrite the default font by adding those.

  • .tm-font Uses the @global-font-family which is the regular text font.
  • .tm-font-alt-1 Uses the @global-alt-1-font-family which is the regular font for headlines.
  • .tm-font-alt-2 Uses the @global-alt-2-font-family which is the regular font for navs, subnavs, tabs, buttons and all other UI elements.

Example Code

<p>Hello this is some regular text and <span class="tm-font-alt-2">this text with the button or nav like type of font</span>.</p>

If you want to switch the font families, please use the Customizer in the Warp UI.

Dotnav Follower

Dotnav Follower

If you want to use the dotnav follower on your pages, please create a module/widget and paste the following code to it. Please also use the correct link targets, for example if there’s nothing published on the position top-a do not link to it, it will not work. Only use active sections. After adding the code, please assign it to your favorite page and publish this on the layout position fixed-bar.

Example Code

<div class="uk-flex uk-flex-middle uk-flex-center uk-height-1-1 uk-position-relative uk-hidden-small" data-uk-nav-follower>
    <ul class="tm-dotnav uk-dotnav uk-flex-column" data-uk-scrollspy-nav="{smoothscroll: {offset: 90}, closest:'li'}">
        <li><a href="#tm-top-a"></a></li>
        <li><a href="#tm-top-b"></a></li>
        <li><a href="#tm-top-c"></a></li>
        <li><a href="#tm-top-d"></a></li>
        <li><a href="#tm-main"></a></li>
        <li><a href="#tm-bottom-a"></a></li>
        <li><a href="#tm-bottom-b"></a></li>
        <li><a href="#tm-bottom-c"></a></li>
        <li><a href="#tm-bottom-d"></a></li>
        <li><a href="#tm-footer"></a></li>
    </ul>
</div>

The dotnav follower will always show the active sections. If the sections’ heights are too low, it might show two active items.

Horizontal Address

Horizontal Address

We’ve added a tiny little special styling to style contact information. If you want to to use this element please copy and edit the snippet. If you want to edit the width, font size and color, please use the Customizer in the Warp UI. Please use the .tm-address-horizontal class for the parent element and .tm-label for label/description and .tm-data for the content.

Example Code

<address class="tm-address-horizontal uk-text-center-medium">
    <div class="tm-label tm-font-alt-2">Phone</div>
    <div class="tm-data">+39 555 59382</div>
    <div class="tm-label tm-font-alt-2">Email</div>
    <div class="tm-data">fashion(at)dolce.vita</div>
</address>

Content Boxed

Content Boxed

To add a panel box like style to your elements, you can add the the class .tm-content-boxed to a block element.

Example Code

<div class="tm-content-boxed uk-text-center">
  <h2 class="uk-h1 uk-margin-bottom-remove">Where to find us</h2>
  <p class="uk-margin-small-top uk-margin-bottom-remove">Open up the map and locate our local store in Milano, Italy.</p>
</div>

Contain Background

Contain Background

We’ve already used background images for every block section in our latest themes but they automatically cover the entire section, so we added 4 new modifier classes to add to the block sections to give you more flexibilliy positioning the background images.

Classes

  • .tm-contain-background-top-center Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the top center.
  • .tm-contain-background-top-left Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the top left.
  • .tm-contain-background-top-right Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the top right.
  • .tm-contain-background-center Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the center.
  • .tm-contain-background-left Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the left.
  • .tm-contain-background-right Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the right.
  • .tm-contain-background-bottom-center Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the bottom center.
  • .tm-contain-background-bottom-left Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the bottom left.
  • .tm-contain-background-bottom-right Scales the image to the largest possible amount whilst fitting its parent container and maintaining the image’s aspect ratio and aligns it to the bottom right.

Hide Background Images

If you want to hide a background image on smaller viewports, we’ve added two theme classes you can add to the class field in the block appearance section in the Warp UI.

  • .tm-background-hidden-small Background images will disappear on small viewports.
  • .tm-background-hidden-medium Background images will disappear on small to medium viewports.

Card Gallery

Card Gallery

To apply the same box shadow of the Dolce Vita hover panels to a Gallery widget, add the .tm-card-gallery class to the HTML class field of the General section in the widget’s administration.

Widgetkit Settings

Widgetkit Settings

Condensed

Condensed

We also added the .tm-margin-condensed class. It reduces the spacing between a widget title and the following content. Just add the class to a grid widget, for example in the HTML class field of the general tab in the widget administration.

Widgetkit Settings

Widgetkit Settings

Extra Large

Extra Large

Grid Extra large

We’ve added a new grid modifier class which uses the @global-grid-gutter-xlarge variable for more grid gutter spacing. Just add the the class .uk-grid-xlarge to your uk-grid container.

Example
<div class="uk-grid uk-grid-xlarge" data-uk-grid-margin>
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

Margin Extra large

Similiar to the UIkit core utility component, we added a new margin modifier class which uses the @global-margin-xlarge variable for more spacing.

Classes
  • .tm-margin-xlarge Adds the same top and bottom margins as a paragraph usually has.
  • .tm-margin-xlarge-top Adds top margin.
  • .tm-margin-xlarge-bottom Adds bottom margin.
  • .tm-margin-xlarge-left Adds left margin.
  • .tm-margin-xlarge-right Adds right margin.

Theme Icons

We have added a custom webfont which contains some useful icons which we also used in our Dolce Vita UIkit theme.

How to use

The theme icons are similar to UIkit icon component. To apply this component, add any .uk-theme-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

  • cog
  • heart
  • search
  • author
  • comment
  • share
  • tag
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • bag
  • plus
  • minus
  • check
  • cross
  • menu
  • ellipsis

About this theme

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.

This theme is available for JoomlaJoomla and WordpressWordPress including the same features on each system.