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

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.

Features

This theme comes with some unique and cool features.

Split layout

Nic & Em is based on a split layout for large screens, which makes the overall appearance of the theme so special. To achieve this, we have added the custom Aside position. Modules published there will appear on one side of the vertically divided screen while the rest of the content remains on the right side. Both can be animated, so that they slide into view on pageload.

Optionally, you can also render an article's title and meta data in the Aside position. In single view, the featured image will automatically appear there.

Available settings

Color: enter a color value
Image: enter an image path for the background image
Overlay: Default, Muted, Primary, Secondary
Blend Mode: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity
Opacity: 100%, 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, 10%
Width: 50%, 33%, 25%
Alignment: Left, Right

Block Appearance

To enhance flexibility, Nic & Em Theme provides a number of settings for all module positions, like background colors, blend modes, paddings, different width and much more.

Available settings

Color: enter a color value
Image: enter an image path for the background image
Blend Mode: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity
Opacity: 100%, 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, 10%
Padding: Default, None
Content Width: Default, Small, Full
Full height: Position will extend to full viewport height, if checked
Class: Enter a custom class for this block

Overlay Search

Instead of a simple input inside the main navigation, we have decided to provide a special fullscreen search. Hit the magnifier icon and an overlay with a large search field will cover your entire site.

Pageloader

This theme includes a custom Pageloader module position. Add your own markup and publish the module on any page you like, so it will be displayed while the site is loading.

Dropcap

As a little typographical feature, you are able to apply a dropcap to articles. Just check the option in the Layouts tab of the Warp administration.

Scroll message

To encourage users to scroll down the site from a fullscreen position, we added a scroller with a little animated mouse icon. Apply the following markup to add this scroller.

<div class="tm-scroll-message">
	<a href="#my-id" data-uk-smooth-scroll>
		<img class="tm-icon-mouse" src="/12/my-image-path" alt="">
	</a>
</div>

Widgetkit

Four custom Widgetkit plugins included.

Of course, Nic & Em comes with Widgetkit 2, our content creator toolkit for Joomla and WordPress. In addition to the 15 default widget renderers, we provide four custom plugins whose style and functionality perfectly fit this theme: a Grid Stack with a watermark option, Slideshow Nav, another custom Slideshow and an Event widget.

Grid Stack

This custom Grid Stack widget provides all usual options of this renderer. Additionally, it comes with a Watermark custom field in the content tab of each item. Enter any text in this field and it will be displayed discreetly in the background of your item as a nice typographical detail.

Slideshow Nav

This plugin renders each item's content inside a panel that overlays the media. A custom style can be applied to the link through the content tab in the widget's administration. A tabbed navigation with each item's title being placed above the Slideshow.

Additional settings

Content > Link > Style: Link Underline

Slideshow

This custom Slideshow features a counter displaying the number of items as well as the active item. The conjoint slidenav can be positioned at the top left, top right, bottom left or bottom right of the Slideshow.

Additional settings

Slideshow > Navigation > Slidenav: Top/Left, Top/Right, Bottom/Left, Bottom/Right

Event

This custom List widget that was modified specifically to display items by date. Select a date and time and choose a location in the content tab of the widget administration. Items will then be filtered by date and the event location will be displayed in a link that opens a map on a new tab.

Additional settings

Content > Date: Day/Month, Day/Month/Year
General > Caption: Enter a title that will be displayed in the top left hand corner of your widget
General > Navigation Caption: Enter a description for the sorting parameter of your list, e.g. day

Class	Description
`.tm-aside-fullheight`	Add this class to a module, if you want it to extend to full viewport height when published in the Aside position.
`.tm-visible-aside`	Add this class to an element inside the Aside position, if you only want it to be visible when the Splitscreen layout is active.
`.tm-link-line`	Add this class to an `<a>` element to place a line on its left and apply a hover animation.
`.tm-link-underline`	Add this class to a text element to apply a custom style to it and add an animated underline on hover.
`.tm-title-dash`	Add this class to a heading to apply a bottom border to it.
`.tm-footer-nav`	This class styles navs specially for the footer, turning their text uppercase and applying a muted color.