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.

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.

Default
Ocean
Minimal
Blue
Rainbow
Lightblue

Backgrounds

This Theme includes a unique background effect or animation for each style.

Fireflies
Particles
Geometries
Shapes
Circles

Specials

We've added a snazzy typo teaser and a Smoothscroll position to Luna theme.

Teaser

Teaser

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.

<div class="tm-teaser-container">
    <h1 class="tm-heading-teaser" data-heading="my text">My Text</h1>
    <img src="/" alt="">
</div>

Smoothscroll

Smoothscroll

As a feature to help users navigate through long pages, we've added the smoothscroll position. Just add the following markup to a custom module published to the Smoothscroll position. Don't forget to link to the IDs of the sections that you want to navigate to.

<ul class="uk-dotnav uk-flex-column" data-uk-scrollspy-nav="{smoothscroll: {offset: 90}, closest:'li'}">
    <li><a href="#my-id-01"></a></li>
    <li><a href="#my-id-02"></a></li>
</ul>

Navigation

Luna theme comes with three different layouts for the main menu.

Centered Stacked Left

Layouts

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.

Sticky and transparent

Sticky and absolute

Of course, the navbar also comes with a sticky option, so that it remains fixed at the top of the window.

This can be combined with the Transparent option that removes the menu'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.


Block Appearance

To add flexibility, Luna theme provides settings for each module position.

Background

Background

You can apply a different background color to each block.

Colors

Default, Muted, Secondary, Primary

Padding

Padding

Add different paddings to each section or remove the padding altogether.

Padding

Default, Small, Large, xLarge, None

Content width

Content width

You can apply different content widths or enable full width

Widths

Default, Small, Fullwidth

Full height

Full height

Each section contains a full height option. If combined with full width, this is great for teaser layouts or a fullscreen slideshow.

Additionally, you can apply your own class to add custom styles to a block.


Widgetkit

In addition to the default Widgetkit plugins, Luna provides 4 custom widgets.

Gallery

Gallery

The custom Gallery 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.

Grid

Grid

This custom Grid widget displays content inside a hover panel, meaning that the panel displays a background on hover. On the left of your content there'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.

Grid Button

Grid Button

To create a grid with spinning buttons that appear on hover, as seen on the frontpage, add the .tm-grid-button class to a regular Grid widget.

List

List

Luna theme includes a custom List 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 Subtitle field allows you to display additional information below each item's title.

Slideshow

Slideshow

This Slideshow 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 Watermark to each item by typing your own text into the custom field in the Content section of the widget administration.

Custom Classes

Luna includes a number of custom classes that extend the functionality of UIkit and Warp or help customize the styling of certain Widgetkit plugins. This table gives you an overview of the purpose of each of these classes.

Class Description
.tm-block-gradient Type this class into the Class field of the Block Appearance section in the Warp administration, to add a background gradient to a module position. You can see this in the Ocean and Blue styles. In other styles you might need to set the gradient colors through the Customizer first.
.tm-teaser-container
.tm-heading-teaser
Use these classes to create the typographic teaser we are using on the frontpage. For a code example, see Specials.
.tm-heading-line Add this class to a heading element to display a short underline with some spacing.
.tm-text-lead Add this class to a text element to apply a special styling, for example heading font family, uppercase and different font-size, depending on the style.
.tm-grid-button Add this class to the HTML field of the General tab in the Settings section of a regular Grid widget. Each item will then display a spinning arrow button on hover.
.tm-grid-shadow Add this class to the HTML field of the General tab in the Settings section of a regular Grid widget to apply a box shadow to images inside that grid.
.tm-subnav-bullet Add this class to a Subnav, so it will display a bullet icon as a separator between nav items.
.tm-margin-large
.tm-margin-large-top
.tm-margin-large-bottom
Add one of these classes to block elements to apply 60px top and/or bottom margin.
.tm-margin-xlarge
.tm-margin-xlarge-top
.tm-margin-xlarge-top
Add one of these classes to block elements to apply 120px top and/or bottom margin.
.tm-padding-large Add this class to block elements to apply 60px padding.

Our themes are using modern technologies.

UIkit Framework

UIkit Framework

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

Visit Website

Warp Framework

Warp Framework

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

Visit Website

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