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

The Theme comes with some unqiue and cool features.

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

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.

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.

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

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.

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.

Theme Widgets

Dolce Vita includes 4 awesome and custom widgets.

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

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

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.

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

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

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

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.

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

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.

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

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

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

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

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 Joomla and WordPress including the same features on each system.