Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Theme layouts and layout components

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

This task is for users with the following roles: OC Site Designer.

Your theme's layout will determine where different 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, choose to select one of four OpenCities layouts or create a new layout. You cannot edit an existing OpenCities layout, but you can copy one as a base and make edits from there.

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

Using the Layout Builder

If you're creating a layout from scratch or making changes to a copied OpenCities layout, you'll need to use the Layout Builder.

  1. In the Layout tab of your new theme, select Create Layout or hover over an existing OpenCities layout and select Copy.
  2. You'll see a blank template and a list of components you can add, divided into Lists, Widgets, or All of them. 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.
    The layout builder
  3. Select the settings for your component, then select Apply
  4. You can edit the settings for the component and the row by selecting the edit icon.
    editing icons in a row in a layout
  5. 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.
  6. To delete a row or component, select the bin icon.
  7. Select Save Layout to save your progress, and Apply Layout when you're finished and want to use it.

When modifying your homepage rows, you need to consider any styling you set in the Styles or CSS/JS tabs. Watch this video to understand the impacts when 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 in landscape or portrait.

the icons to switch between device views

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

Layout components

All the layout components, including the header, have various settings you choose, influencing how the component will look on your site.

Component Settings
Header

The site header contains a logo, 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. Please note that 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.
Lists
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 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.
Elected official 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.
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.

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.
Widgets
Address picker

This widget allows your community to 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, "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. There must be a map on the page you select.
  • Map to show selected address on: if there's more than one map on the target page, select which map to show results on. If you want to show results on all the maps on the page, don't select anything.
  • 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.
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 of them.
  • 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.

Embeds Insert an embed code on your homepage by selecting one from the Embed dropdown menu. You'll need to create an embed code in your admin before you can insert it into your homepage.
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 of them.
  • 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 which 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.
Rotating banner

This widget allows you to 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 which 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 results page of your catalog.

  • Select layout: there are two options for the layout of the search widget, 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".
Social media feed Use this widget to display a social media feed on your homepage, by selecting a feed from the dropdown menu. You'll need to create the social media feed in your admin before you can add it to the homepage.
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.

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?

Was this article helpful?
0 out of 2 found this helpful