Setup Emotions

Create a Showcase Gallery in your page content

This is tutorial will help you create an embedded Showcase Gallery in your page content. With a previous tutorial, we created a showcase gallery in the Showcase sidebars using widgets, but this one is going directly into your page content with the help of an unordered list. This also means that we will be more hands on with HTML code doing it this method because we need to work in the “Text (HTML)” tab of your editor.

An Introduction to the Showcase gallery

With the live demo of Emotions, you will have seen the Showcase galleries that gives you a creative way of displaying photos that can be used as a gallery or even a portfolio. You can have a showcase gallery in your page content or in one of the two Showcase sidebar group positions like you see below. You also have the option to display other types of content instead of photos, and even add individual background colours for each showcase sidebar position.

An introduction to custom widget styles

Emotions offers optional custom widget styles that changes the look to widgets when applied. When we say “optional”, we mean that they are available to you if the “Widget CSS Classes” plugin is installed and activated. Unfortunately, WordPress does not have this feature capability built into it, so we need a plugin to add this function. There are not a lot of plugins available that can do this, but the one I recommend is called “Widget CSS Classes” by¬†C.M. Kendrick.

Customize your theme colours

As it is a common feature with all of our themes here at Shaped Pixels, you can customize your colours for Emotions with ton of selectors that are found in the Customizer. Although most elements can be customized, there still may be a few that don’t have selectors, so creating some custom CSS might be required.

The colour selectors are easy to use by clicking on the button and using the sliders on the colour fields to adjust the colour and tone (light or darker) by using the right side vertical slider.

Wrap all content and widgets in blocks

Emotions comes with an option to wrap all content and widgets in a block (box). These blocks have a padding (inner spacing) and a background colour (light grey) to help them stand out from the content area background colour, which is white by default. Enabling the content blocks feature will affect the blog as well as pages. Here is an example showing the very suttle difference with the blog:

Adjust the top margin spacing for your main menu

This tutorial won’t take you through the setup of your menu because there is another TUTORIAL for that. However, what this tutorial will help you with is to adjust the top margin spacing of your main menu. Why would you need this? It depends on the header style you choose, but the idea is to give you the flexibility to adjust the menu positioning by adding/reducing the top space of your menu container.