This page is in process of being updated. Stay tuned!
Noir UI is a dark theme, built on top of CSS3 UI Kit framework and ImagePress.
Noir UI requires ImagePress 7+ and WordPress 4.7+ in order to function as intended. I recommend the latest version of ImagePress and WordPress. In addition to this, PHP 5.5+ is required for certain functions and modules. Check with your host before attempting to install Noir UI.
/wp-content/themes/. The theme should look like this:
The theme is now installed and ready to use.
The theme can be customized from Appearance -> Customize tab.
You can customize colours, add a nice, discreet background overlay texture and display a mosaic of news on homepage. You can also select the main section links.
Noir UI comes with several useful element shortcodes such as carousels, images, boxes columns and icons.
[noir-boilerplate] – this shortcode displays the site title and description. The format it uses is “Welcome to SITE TITLE + DESCRIPTION”. The “Welcome to” text can be removed by using:
[noir-hero] – this shortcode displays a hero featured image from a chosen category with title and a short description. It uses the latest post type from the selected category:
[noir-hero type="post" category="my-category-name"]
[noir-carousel] – this shortcode displays a carousel with three visible images and three sections. The number of categories should be three and the number of posts should be higher than three:
[noir-carousel categories="fiction, books, short-stories" count="9"]
[noir-box] – this shortcode displays various width boxes and columns. The shortcode uses several parameters:
[noir-box size="one_fourth" color="#03A9F4"]one_fourth[/noir-box] [noir-box size="one_fourth" color="#8BC34A"]one_fourth[/noir-box] [noir-box size="one_half_last" color="#FF5722"]one_half_last[/noir-box]
All parameters are optional. All sizes should fill the row (one half and one half or one half and two fourths – takes a bit of math):
color (box background color):
float (box float position):
align (box position – non-float):
text (box text alignment):
[icon] – this shortcode displays a FontAwesome icon. Check out some examples below:
[icon type="tags"] [icon type="wrench" size="3x" pull="left"] [icon type="camera-retro" size="4x"] [icon type="cog" animated="spin"]
page-home.phpcontent to a widget (“Homepage widget (main, content)“). Check out my sample code below and replace it as required.
<h1 class="homepage-header"><small><i class="fa fa-upload"></i></small> Recent Submissions</h1> [[imagepress-loop limit="14" count="14" size="imagepress_sq_std" sort="no"]] <h4><p class="right"><a href="https://example.com/gallery/">Browse all uploads</a> <i class="fa fa-arrow-circle-right"></i></p></h4> <h1 class="homepage-header"><small><i class="fa fa-folder"></i></small> Collections</h1> [[imagepress-collections count="4"]] <h4><p class="right"><a href="https://example.com/all-collections/">Browse all collections</a> <i class="fa fa-arrow-circle-right"></i></p></h4> <h1 class="homepage-header"><small><i class="fa fa-star yellow"></i></small> Favourites</h1> [[imagepress-loop category="featured" limit="14" count="14" type="random" size="imagepress_sq_std" sort="no"]] <h4><p class="right"><a href="https://example.com/staff-favourites/">Browse all favourites</a> <i class="fa fa-arrow-circle-right"></i></p></h4>
Note the image size parameter –
size="imagepress_sq_std" – and remove it if you want to use the global size set in ImagePress -> Configurator.
Note that some tutorials may use old/deprecated code. We try to maintain all tutorials up to date, but feel free to contact us if something doesn’t work.