Theme Layouts and Layout Components – OpenCities

This task is for users with the OC Site Designer role.

Your theme's layout will determine where elements sit on your homepage and your site's header, which appears on every page. Themes can have multiple layouts, but only one can be active at a time, and a layout can only belong to one theme.

When creating a new theme, select one of four out-of-the-box layouts or create a new one. You cannot edit an existing CMS layout, but you can copy one as a base and edit from there.

If your theme was created before version 1.7.0.0 (released November 2016) of the CMS, you’ll have a Classic layout (in addition to the four standard layouts). The Classic layout won't be available once another layout is active and a new theme version is published.

Using the Layout Builder

Use the Layout Builder to create a layout from scratch or change a copied layout.

In the Layout tab of your new theme, select Create Layout or hover over an existing layout and select Copy.
You'll see a blank template and a list of components you can add, divided into Lists, Widgets, or All. To add a component, select Add row, click and drag the desired component into the row, or click and drag the element into the Add row area.
Select the settings for your component, then select Apply.
You can edit the component and row settings by selecting the edit icon.
Select the compass icon and drag the row into place to change the order of your rows. You can also use the arrow icons to move rows up or down.
To delete a row or component, select the bin icon.
Select Save Layout to save your progress, and Apply Layout when you're finished and want to use it.

When modifying your homepage rows, consider any styling you set in the Styles or CSS/JS tabs. Watch this video to understand the impacts of reordering or deleting homepage rows.

Before you apply a theme, you should see how it looks across different devices. Select each icon to view the layout for a desktop, tablet, or smartphone.

the icons to switch between device views

You can also edit the settings for a row itself. For example, you can choose whether the row is Fixed or Full width and give it an Optional row title.

Layout Components

You can choose various settings for all the layout components, including the header, which will influence how they look on your site.

Header Component

The site header contains a logo, a navigation menu, and a search box. It will also be where your announcements are situated. These are the settings you can choose for your header:

Select layout: Choose from eight layout options to display your header. The layout you select will affect your desktop navigation options, as some layouts have nested menus, and others have off-screen menus.
Header width: Select a Fixed width or Full width for your header.
Placement of announcements: Choose whether to display announcements Above or Below the header.
Search box: Choose whether to Show or Hide your search box. We recommend only hiding your search box on a small site with simple navigation, where users can easily find pages without a search.
Search box on mobile/tablet devices: Choose to Always show your search box on smaller devices or Show only when search is expanded.
Navigation: Select how many levels of navigation you want to show in your menu. These options will change depending on which layout you use. Mega menus are only available with options 1, 2, 7, and 8.
Top tasks: Choose whether to Show or Hide your top tasks in your navigation menu. Please note that these Top Tasks belong to the site navigation and are separate from Top Tasks on your homepage.

Address Picker

This widget lets your community search for their address in the My Area module. Choose from these settings:

Select layout: There are two options for the layout of your Address picker widget.
Widget title: Enter a title for your address widget, such as "What's happening."
Placeholder text: Enter text for the search box, like "Enter your address."
Search button text: Enter text for the search button, such as "Search."
URL of target page (internal or external): Copy and paste the URL of the page you want to direct users to once they search for an address. The page you select must have a map.
Map to show selected address on: If there's more than one map on the target page, select which map to show results on. Don't select anything if you want to show results on all the maps on the page.
Address source: Choose whether you want address searches to be limited to those you've uploaded into OpenCities, or if you want search results to be sourced from Google Places.

Consultation List

Lists the OC Consultation pages on your site. These are the settings you can choose:

Maximum number of items to display: Select how many OC Consultation or OC EngagementHQ Project pages you want to display on your homepage.
Show list items in: Display your consultation items in Rows or A carousel. If you have many items, a carousel may be the best choice.

Development Application List

Lists the OC Development Application pages on your site. These are the settings you can choose:

Maximum number of items to display: Select how many OC Development Application pages you want to display on your homepage.
Show list items in: Display your development application items in Rows or A carousel. If you have many items, a carousel may be the best choice.

Top Tasks

This widget displays the OC Top Task pages on your site. You can choose whether to display all of them or only those in a folder under your homepage.

Select layout: There are eleven options for the layout of your top tasks. These layouts can contain an icon, title, and short description.
Maximum number of items to display (enter 0 for unlimited): Choose how many items to display, or enter 0 to show all.
Name of parent page which contains these items: If you only want to display a subset of top task items, paste the Page name of the folder containing them into this field.
Note: The folder's Page name cannot have any spaces in it; spaces should be replaced with a hyphen.

Learn more about configuring homepage top task icons.

Elected Officials List

Lists the OC Elected Official pages on your site. These are the settings you can choose:

Select layout: There are three options for the layout of your elected officials listing, which can contain a title, short description, image, and featured item. The images in all three layouts are circular; if you want to use square images, you'll need to add custom CSS.
Maximum number of items to display: Select how many OC Elected Official pages you want to display on your homepage.
Show list items in: Display your elected officials in Rows or A carousel. If you have many items, a carousel may be the best choice.

Embeds

Insert an embed code on your homepage by selecting one from the Embed drop-down menu. You must create an embed code in your admin before you can insert it into your homepage.

Events List

Lists the OC Event pages on your site. These are the settings you can choose:

Select layout: There are nine options for the layout of your events listing, which can contain a title, short description, image, and featured item.
Maximum number of items to display: Select how many OC Event pages you want to display on your homepage.
Show list items in: Display your events in Rows or A carousel. If you have many items, a carousel may be the best choice.

Featured Content

Featured content allows you to highlight important content on your homepage, such as essential services, topical pages, or subsites.

Select layout: There are five options for the layout of your featured content. Featured content rows can display an image, title, short description, and a call-to-action. While the call-to-action is styled as a button, clicking anywhere on the featured item will take you to the same page.
Maximum number of items to display (enter 0 for unlimited): Choose how many items to display, or enter 0 to show all.
Show list items in: Display your featured content in Rows or A carousel. If you have many items, a carousel may be the best choice.
Name of the parent page which contains these items: Paste the Page name of the folder that holds your OC Featured Content items. If you leave this blank, all the featured content pages under your Home page will be selected.
Note: The folder's Page name cannot have any spaces in it; spaces should be replaced with a hyphen.

Message Board List

Intranets only.

Lists the OC Message pages on your site. The Message Board module is only available for Intranet sites. These are the settings you can choose:

Maximum number of items to display: Select how many OC Message pages you want to display on your homepage.
Show list items in: Display your message board items in Rows or A carousel. If you have many items, a carousel may be the best choice.

News List

Lists the OC News Article pages on your site. These are the settings you can choose:

Select layout: There are nine options for the layout of your news listing, which can contain a title, short description, image, and featured item.
Maximum number of items to display: Select how many OC News Article pages you want to display on your homepage.
Show list items in: Display your news items in Rows or A carousel. If you have many items, a carousel may be the best choice.

Public Notices List

Lists the OC Public Notice pages on your site. These are the settings you can choose:

Maximum number of items to display: Select how many OC Public Notice pages you want to display on your homepage.
Show list items in: Display your public notices in Rows or A carousel. If you have many items, a carousel may be the best choice.

Rotating Banner

This widget lets you insert a rotating banner onto your homepage using the OC Slide content type.

Select layout: There are two options for the layout of your homepage rotating banner. Both options contain an image, title, caption, and controls, and the images can be linked to pages.
Banner width: Choose to have your banner be Full width or Fixed width.
Maximum number of items to display (enter 0 for unlimited): Choose how many slides the banner will cycle through, or enter 0 to show all of them. We recommend a maximum of five images to ensure your community doesn't miss important information.
Name of the parent page which contains these items: Enter the Page name of the folder that contains your homepage slides.
Note: The folder's Page name cannot have any spaces in it; spaces should be replaced with a hyphen.
Banner animation: Choose if you want your images to Fade or Slide when moving to the following image.

Search

Use this widget to add a search box to your theme layout. For example, you could link it to an external library catalog so your community can search on your site and be taken to the catalog's results page.

Select layout: The search widget's layout has two options, both containing a title, label, search box, and search button.
Widget title: Enter a title for your search widget.
Input label: Enter a label for the search box. Check the Hide label from page box if you want to. Even when hidden, the label will be read aloud by screen readers.
Placeholder text: Enter text for the search box.
Search button text: Enter text for the search button, such as "Search."
URL of target page (internal or external): Copy and paste the URL of the page you want to direct users to once they search. Make sure your URL includes the placeholder {0} for the search value, for example, "http://www.example.com/?keyword={0}&dummy=value".

Tabs

Use this widget to add tabs to your homepage. Each panel in the container corresponds to an OC Tab Widget. The widget sources these pages from a folder that you specify.

Maximum number of tabs to display (enter 0 for unlimited): Choose the maximum number of tabs to show, or enter 0 to show all of them. We recommend using no more than four tabs, to assist with usability.
Name of the parent page which contains these items: Enter the Page name of the folder which contains your homepage tab pages.
Note: The folder's Page name cannot have any spaces in it; spaces should be replaced with a hyphen.

Welcome Message

Include the Welcome message widget if you're using an OC Featured Background page with a background message.

Row Vs Carousel Display

In all of our list components and in a Featured Content row, you can choose to show your content in a row or a carousel. There are advantages to both options; this video will take you through it:

What Else?