Theme 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.

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

Six beautiful styles

Theme 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.

Default

Default

Minimal

Minimal

Noble

Noble

Colorful

Colorful

Urban

Urban

Modern

Modern

BIOGRAPHIE

1970 Konya

1996 Dokuz Eylül University,

Fakultät für Bildende Kunst, Malerei

Arbeitet und lebt in Istanbul und Berlin.

 

 

Custom widgets

Theme Widgets

Avanti comes with some exclusive widgets which slightly differ from regular Widgetkit widgets. We have added some custom markup and new features.

Slideshow Avanti

Slideshow Avanti

Avanti comes with a modified Slideshow widget which works perfectly inside the theme's header layout position.

Specials

  • Pure CSS Numnav option to navigate between the slides.
  • The overlay layout uses the same container width as the theme.
  • Overlay content width for medium to large view ports can be set to 50%, 66%, 75% and 100% of the container.
  • Overlay content position can be set to Center, Center left and Center right.
  • Animate Letters option for the slideshow item title.

Slideshow Panel Avanti

Slideshow Panel Avanti

With the Widgetkit 2.5 release we have added the Slideshow Panel. Avanti uses a slightly modified version perfectly fitting for any portfolio, case study or product presentation.

Specials

  • Content max width - Will set a maximum width for the content on large view ports.
  • The badge is separated from the content and is displayed above the media item.

Grid Avanti

Grid Avanti

For Avanti 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.
  • Panel Horizontal to add more spacing between items, recommend in combination with the grid divider.
  • Badge muted to display a badge with a subtle background color. (depends on the theme style)
  • Option to display article/post tags as badges.

CSS modifiers and additions

Theme Additions

Avanti has some helper classes and modifiers to slightly upgrade and control the content display. You can use them to to modify your content. Just remove them, if you prefer the regular UIKit rendering.

Widgetkit Gallery modifier

Widgetkit Gallery modifier

To give the gallery a chessboard like pattern we have added the .tm-gallery-avanti class. Just add the the class to the general HTML class field in your gallery widget. This class will work best for a 3 item per column setting.

This class also adds a special gradient overlay style to the gallery items. If you want to modify these gradients and backgrounds, please take a look at the theme variables in the Customizer.


Widgetkit Grid modifier

Widgetkit Grid modifier

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.

Theme Icons

We have added a custom webfont which contains some usefull icons which we also used in our Avanti UIkit theme.

How to use

The theme icons are similiar 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.

  • slider-left
  • slider-right
  • slider-top
  • more
  • search
  • author
  • comment
  • tag
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • plus
  • minus
  • check
  • cross
  • menu

Featured Technologies

UIkit Framework

UIkit Framework

A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Read more

Warp Framework

Warp Framework

A fast and slick theme framework which is built on the latest web techniques.

Read more