The govDelivery Advanced Bulletin Layout Editor gives you the flexibility to create your own custom layouts if the existing stock layouts do not meet the needs of your organization. Recommended for power users with deep knowledge of HTML and CSS, the Advanced Bulletin Layout Editor gives you complete control over the layout.

Note: This option is only available if your account has been enabled for creating bulletins from code. If you would like the option of creating custom layouts, submit a request at the bottom of this page.

To create a custom layout using the layout builder:

  1. On the Account Area toolbar, click Templates.
  2. On the Area Option toolbar, click Advanced Bulletin.
  3. Click the Custom Templates tab.
  4. Click Create Custom Layout.

Layout Overview

The Advanced Bulletin Editor Layouts are html files, with special markup to instruct the template in two ways: through container blocks and styleable sections.

A layout has the following components:

  • Layout name: Enter a unique name for your layout.
  • Header Style and Tags: Use this section to design a header and set keyword tags for the template.
  • Container Setup: This section will designate the basic layout of your design.
  • Inline CSS: This section contains the CSS for your layout.

See the following sections for guidance in customizing these components. When you have finished creating your layout, click Save layout.

Container Blocks

Container blocks are sections where content blocks can be dragged. Container Blocks are not wrapped in any DIV tag nor do they add any markup.

Containers are marked with {% container header: 'Header' %}

Where the first 'header' is a key (no spaces or special characters) to uniquely identify the container, and the 'Header' is a label for the user. The 'Header' label is only used to identify the containers when you are dragging content blocks around.

Styleable Sections

Styleable sections are HTML tags marked with special data attributes to indicate how the theme editor is able to add styles to the element. For example:

<td id="header" data-govdstyle="all" data-govdtitle="Header">
<td id="pad_row" data-govdstyle="block" data-govdtitle="Padding row">

The data-govdtitle element is a label that appears in the Theme editor, in the sidebar as you are editing a template.
 
The data-govdstyle element can be either "text", "block", or "all":

  • Elements marked with "text" can only be styled with text rules; this includes font size, font color, and font face, on various elements (paragraph text, h1, h2, h3).
  • Elements marked "block" can be styled with block rules; padding, borders, background color. Block elements can also define an image style for HR elements.
  • Elements with "all" can be styled with both "text" and "block" rules.

With the theme editor, users can edit CSS properties of the styleable sections; the CSS styles in a theme override any CSS that is supplied with the template.

Column Widths of Style Sections

Because adding padding on styleable sections can change the width of the style sections, we specify widths in the style block with anther data tag: data-govdwidth.

<td id="gd_ab_main_col" data-govdstyle="all" data-govdtitle="Main column" data-govdwidth="400">

When widths are specified this way, 400px is used as the total width, including padding, and specified in the theme CSS. For example, if you set padding to 10px on each side, the theme will set the actual width to 380px. When specifying data-govdwidth, you should not specify the width in CSS or HTML.