Occasionally we need to use custom html to obtain the layouts shown on our demos in specific widgets. The code below is what was used on this theme. It is best to use the "Text" mode of the page/post editor when entering any of this code.

Image and Content Fader Code:

Simply enter the images and into the default fields in the backend of the widget. This demo uses 2000x1030 images, but you can use any image size; just make sure they are all the same size. Features like size, zoom, slide effects, and others are controlled in the widget's backend. The widget is published to the "Custom 3" position



Code used for title area: Code used for description area:

Menu Overlay:

Custom 4 is a position that will show on top of the Custom 3 position. It will only show when there is a Custom 3 widget published. For the demo we published our Image and Content Fader to the Custom 3 position. The Custom 4 position is designed to show a menu as we have demoed and the scroll bar will only show if the content extends past the vertical height of the position. Just simply publish a standard custom menu widget to the Custom 4 position:

Tab Show Icon Mode:

The Tab Show is published to the "Below Columns 1" position and has a custom class of "-icons" and a widget style of "Bottom Padding"


The below code is what is placed in each "button text" area for the Tab Show:

Social Icons:

This is one text widget that is published to the Custom 1 position. Ion Icons must be enabled in the theme configuration for these to show.

Upcoming Events Dates:

This is a text widget published to the "s5_tab1" position.

Quick Link Boxes:

This code is published to a text widget published to the Bottom Row 1.1 position.

Quick link box text:

This code is published to a text widget published to the Bottom Row 1.2 position.

Latest News Text:

This code is published to a text widget published to the Bottom Row 2.1 position.

Upcoming Meetings and Alerts:

This is a text widget published to the Left position. We used the widget style "Highlight2line" and "Highlight1line":

S5 Masonry:

This widget is published to Above Body 1 and does not use any custom HTML. The images and defined as the featured image in the post settings. We have set the display type to "overlay" and selected the item width to "first item only":


Example shown with full width items:

Township Office:

This is a text widget published to the Custom 6 position.

Centered Logo

In this design we have for the first time included a centered logo within the main menu. To do so we had to add some JavaScript and custom CSS. Below is a screenshot of the logo as seen on the site and following it is a small tutorial to guide you on how to set this up.



1. The first step to create the centered logo is to create a menu item and publish it between all your other menu items. To get it centered at a good spot you may have to reword or add/remove a menu item since the logo is just another menu item itself. It works best when you have an even amount of menu items so that you can just stick the logo right in the middle of them.

2. The next step is to enter in the CSS class for the logo so the design knows where to position your logo. So enter in the class "s5_logo_spacer" as shown below (You may need to enable the "CSS Classes" field in the "Screen Options" dropdown, accessible in the top-right corner of the menu editor):



3. Next you may need to edit the vertical position of your logo here: