CentralNotice/BannerEditorUserGuide

Introduction

The CentralNotice Banner Editor is a visual tool for creating and editing banners. It allows you to:

Create banners visually without writing code
Design responsive banners for mobile, tablet, and desktop
Use pre-built templates for quick banner creation
Export production-ready code for deployment to CentralNotice
Manage multiple banners with favorites

What you'll need

A modern web browser
Basic understanding of banner design concepts
No coding experience required

Getting started

Accessing the editor

Open the CentralNotice Banner Editor in your web browser and you'll see a home page.

Home page overview

A screenshot of the CentralNotice Banner Editor's homepage

The home page is your central hub for managing banners:

Navigation sidebar: Home, Favorites, Documentation links
Recent Edits: Shows your most recently edited banners
Banner Templates: Browse and select templates to start creating

Editor appearance

The editor supports light, dark, and auto appearance modes. Toggling between modes lets you test how your banner will appear in different modes.

How to switch between light, dark, and auto mode in the CentralNotice Banner Editor

Changing the editor appearance

Click the "Appearance" icon in the header at the top right corner (or the "Appearance" item in the mobile menu)
Choose an option:
- Light: Light mode
- Dark: Dark mode
- Auto: Matches your system preference

Your choice is remembered across sessions.

Note: To make a banner adapt to light and dark mode, use Codex colour tokens. Learn more about Codex colour tokens.

Creating your first banner

There are two ways to create a banner:

Method 1: Start from a template in the home page

How to create a new banner with a template.

On the home page, scroll to the templates section
Click on a template that matches your design needs
The editor will open with the template pre-loaded
Customize the template (see Editing Banner Elements)
Your changes are saved automatically

Method 2: Start from blank

How to create a banner from blank.

Click the "Create new banner" button in the navigation bar
The editor opens with a blank canvas
Open the templates sidebar (left panel)
Select a template to start customizing

Understanding the editor

Editor interface layout

A brief overview of the editor.

The editor provides a visual interface with four main areas:

Header: Navigation and export tools
Templates sidebar: Browse and select starting designs
Canvas: Live preview of your banner
Inputs sidebar: Context-sensitive controls for selected elements

Working with templates

Browsing templates

How to select a template from the templates sidebar.

Click the Templates button in the header
Use the search bar to find templates by name or scroll to template
Click a template to apply it to your banner

Understanding templates

Templates provide:

Pre-designed layouts optimized for different screen sizes
Default content (text and images) that you can customize

Switching templates

Warning: Switching templates will replace any existing banner design.

Tip: Create a new banner instead of switching templates if you want to keep your current work.

Editing banner elements

Element types

A banner contains four main types of elements:

Banner container: The main banner box with an editable link
Images: Logo, graphics, or decorative images
Text: Headings, body text, or calls-to-action
Close button: Allows users to dismiss the banner

Selecting banner elements to edit

How to select banner elements.

To edit any element:

Click the element in the canvas preview
The inputs sidebar opens with editing options
Make your changes
Changes appear instantly in the preview
Click elsewhere or close the sidebar when done

Visual indicator: Selected elements have an outline.

Positioning elements

Elements can be positioned using two methods:

Alignment mode (Recommended)

How to position banner elements using the editor's alignment buttons.

Alignment mode uses CSS grid to ensure banner responsiveness. Banner elements are aware of one another and text wraps or unwraps to fit the available space. To implement this:

Select an element
In the inputs sidebar, find the alignment property in the top section
Set a Horizontal Alignment (left, center, right) and a Vertical Alignment (top, middle, bottom)

Examples:

Image aligned top left using alignment buttons.
Logo in top-left: `Horizontal: Left, Vertical: Top`

Text centered with alignment buttons.
Text in center: `Horizontal: Center, Vertical: Middle`

Advantages:

Simple to use
Works well with responsive design

Absolute position mode

Absolute positioning gives precise pixel-perfect control. The elements are set to position absolute under the hood and are relative to the banner container.

Select an element
Locate the position form control in the top section of the inputs sidebar
Set Horizontal (positions from the left of the banner) and Vertical (positions from the top of the banner) values

Note: Absolutely positioned elements are not aware of other elements and may overlap when the banner shrinks or scales across viewports. Precise positioning is required at each breakpoint.

Example:

Image absolutely positioned 10px from the top and 20px from the left.

Adding colours

Colour inputs accept either a custom colour (hex code) or a Codex colour token. Tokens are named colours that adapt automatically to light and dark mode.

Choosing a token

Select an element with a colour property (text, background, border, etc.)
In the inputs sidebar, find the colour input
Uncheck Use custom colour
Click the dropdown and pick a token from the list

A colour swatch shows how the current value looks in the current mode of each token.

Note: Switching between light and dark mode in the editor lets you see how the token renders in both modes. See the editor appearance section. Learn more about Codex colour tokens.

Switching to a custom colour

Check Use custom colour
Pick a colour from the colour picker or enter a hex code

Note: Custom colours currently have no dark mode support. They render the same in both modes.

Working with images

When designing a banner using the editor, you are required to use images already available on Wikimedia Commons. This ensures that images used are open-licensed. There are three options for adding an image to a banner:

Pasting a link directly from Wikimedia Commons

Open the page for the image you want to use on Wikimedia Commons
Click Use this file (the option with the globe icon)
Copy the File URL to paste into the Image URL field in the editor

Note:

The protocol and UTM parameter are automatically stripped from the URL and a clean protocol-relative URL is added to the banner. See Help:CentralNotice#Images for more details.
You will get an error message if an invalid URL or an unsupported URL format is pasted.

Searching Wikimedia Commons directly from the editor

How to open the search dialog:

Select an image element
In the Image URL field, click the search icon (or open the menu and choose Search Wikimedia Commons)
The Commons lookup dialog opens

Searching:

Click the search field to reveal the type dropdown
Choose "Keyword" to search by words or full sentences, or "Username" to list images uploaded by a specific username
Type your query and press the search button
Click "Load more" to see additional results if available

Using a result:

Click an image thumbnail to set it as the source of the selected image element
Click the info icon on a thumbnail to open the file's Commons page in a new tab

Note:

Supported file types: PNG, JPG, JPEG, SVG, WEBP.
Unsupported file types like PDFs, videos, etc., are filtered out.

Embedding an SVG directly into the banner

Check the Embed SVG Image checkbox
Upload a valid SVG image

Improving image accessibility

Select the image and find:

Alt text field for regular images
Aria label text field for SVGs
Enter descriptive text

Why this matters: Check this page for more details

Styling images

Size controls: Adjust image dimensions (width, height) and constraints (min/max width, min/max height) using px or % values.

Fit & position: Control how images fill their container with Object Fit (Contain shows full image, Cover fills and may crop, Fill stretches) and alignment with Object Position.

Visual effects: Apply opacity, borders, rounded corners (border radius), and box shadows.

Editing text

How to edit text.

Changing text content

Select the text element by clicking it
In the inputs sidebar, find the Update text field
Type your new text
The preview updates immediately

Styling text

Typography controls: Customize text appearance with standard options like font family, size, weight, style, color, alignment, line height, and letter spacing.

Text effects: Apply decorations (underline, strikethrough), transform case, add shadows, or adjust opacity.

Layout controls: Adjust size (width and height), spacing (padding/margin), and positioning.

Per-character text styling

You can apply styles (font, weight, size, colour, decoration, etc.) to a selected portion of text inside a text element (text, CTA, etc.) instead of the whole element.

Applying styles to a selection

Drag over a text or CTA element to select it (left-click and drag your cursor over the text). This highlights the characters you want to style.
The inputs sidebar switches to show available styling controls for the selection
Adjust any of the available properties
Click outside the selection to return to whole-element editing

Note:

Per-character styles are viewport-specific if you opt out of designing for one size. This means that styles set in mobile do not carry over to desktop, and vice versa.
Per-character styles are not available on elements marked as translatable.

Translatable messages

Text elements (plain text, call-to-action button, etc.) can be marked as translatable, so CentralNotice replaces them with localised content at display time.

How to mark a text element as translatable

Select a text or call-to-action element
In the inputs sidebar, check Translatable message
Enter a Message name (must start with a letter and contain no whitespace, e.g. headline_text)

The text rendered in the designed banner becomes the default for that message name. In the exported code, the text is replaced with {{{message_name}}}.

Note: A translations page URL for your campaign is required when using translatable messages. Code generation is blocked until the URL is added in the Translations page URL field. In the exported banner, this URL is rendered as a "Help with translations" link.

Warning: Enabling a translatable message on text with per-character styles will remove those styles. They cannot be preserved across translations.

Copying translatable message defaults

When you generate the banner code, a Translatable message defaults section lists each message name and its default text.

Click Generate code in the header
Scroll below the code preview to the message list
Click the copy icon beside a message to copy its default text, or "Copy all" to copy every default message with its message name
In CentralNotice, paste each default into its matching field under "Translatable banner messages"

Learn more about banner translations:

Spacing with margin and padding

Each has four sides: left, right, top, bottom

Margin: Space outside the element (pushes other elements away)

Padding: Space inside the element (pushes content inward)

Updating banner link

How to update banner link.

To update the clickable banner link:

Locate the banner link field in the inputs sidebar
Enter your desired link

Styling the banner container

The banner container is the main box that holds all elements. To edit the banner container click anywhere on the banner canvas outside other child elements.

Editable banner properties

Background color:

Find the Background color input
See the adding colours section for details on how to change the background color

Background image:

Find the Background image field
Enter the image URL (e.g., //upload.wikimedia.org/...) or search Wikimedia Commons. See the following sections for more details: Pasting a link directly from Wikimedia Commons and Searching Wikimedia Commons directly from the editor.
Set Image size:
1. Cover: Image fills banner, may be cropped
2. Contain: Entire image visible
Set Image position: Center, top, left, bottom, right, etc.
Set Image repeat:
1. No repeat: Image appears once
2. Repeat: Repeats image both horizontally and vertically
3. Repeat-x: Repeats horizontally only
4. Repeat-y: Repeats vertically only
5. Space: Adds gaps between repeated images (no clipping)
6. Round: Scales repeated images to fill space (no gaps)

Banner size

Width: Banners automatically fill available width (100%)

Height: Set banner height in pixels

Border & effects

Border:

Border width: Thickness on each side (top, right, bottom, left)
Border color: Border color
Border style: Solid, dashed, dotted, inset, none
Border radius: Round corners (px)

Box shadow:

Enable Box shadow
Set the horizontal offset (X): Shadow distance left/right
Set the vertical offset (Y): Shadow distance up/down
Set the blur radius (Blur): Shadow softness
Choose color

Customizing the close button

The close button allows users to dismiss the banner.

To edit close button

Click the close button (X icon) in the banner preview
The close button is split into two elements under the hood for editing purposes:
1. Button box: Container around the icon
2. Icon: The X icon itself

Button box styling

Position: Where close button appears
Background: Button background color
Border: Border around button
Padding: Space around icon inside button
Opacity: Transparency
Box shadow: Drop shadow effect around button

Icon styling

Size: Icon width/height
Color: Icon stroke color
Stroke Width: Thickness of X lines (1-2px)

Example (editor settings, not CSS):

Applying the styles below to the close button

Button box:

 Position: top right
 padding: 6px 8px
 Background: #000000
 Border Radius: 2px

Icon:

 Size: 12px
 Color: #ffffff
 Stroke Width: 2px

Note: The close button uses absolute positioning, so it doesn't affect other elements and may overlap with them if not positioned carefully.

Styling a template with a sliding image gallery

The following properties are editable:

The gallery container

This holds the images in place and the scrolling animation is applied to it.

How to edit it:

Click on the gallery in the canvas
The inputs sidebar shows the same alignment, position, size, padding, margin, border, opacity, and background controls available on other elements

Styling the images as a group

Under Gallery Images in the inputs sidebar:

Click "Add image" to add another image to the gallery
For each image, enter the image URL
Click the trash icon on the image menu to remove it
Set Image gap to control the spacing between images

Styling an individual image

Under Gallery Image in the sidebar, set the size, Object fit, and Object position. These styles apply to every image in the gallery at once.

Note: The width and height of the image gallery is fixed to auto to ensure a seamless scrolling animation without breaks or blank spaces.

Styling a template with a call-to-action

Some templates include a call-to-action (CTA), which is a styled button with text.

Editing CTA text

Click the CTA button in the canvas
In the inputs sidebar, edit Button text

To make the CTA text translatable, see Translatable messages.

Styling the CTA

The CTA has two layers, both edited in the same sidebar:

Button:

Alignment and position
Size, padding, margin
Background colour, opacity
Border, border radius, box shadow

Text:

Font family, size, weight, style
Line height, letter spacing
Colour, alignment, decoration, transform

Responsive design

Responsive banners adapt their design for different screen sizes.

Viewport modes

The editor supports four viewport modes:
Viewport	Screen Width	Typical Devices
Mobile	< 640px	Phones
Tablet	640px - 1024px	Tablets, small laptops
Desktop	≥ 1024px	Laptops, desktops
One size	All sizes	Same design for all devices

Switching viewports

How to design a responsive banner.

Click the Viewport menu button in the header
Choose: Mobile, Tablet, Desktop, or One size
Canvas preview updates to show that viewport
Edit styles for the selected viewport

Responsive vs one size

Responsive design (default)

Different styles for mobile, tablet, desktop
More work to implement different styles for each screen size

One size design

Single design for all screen sizes
Faster to create

Undo and redo

The editor tracks your changes so you can step backward and forward.

To undo: Click the undo icon in the top-right of the inputs sidebar
To redo: Click the redo icon beside undo

Managing your banners

Viewing your saved banners

Saved banner management.

Your banners appear in two places:

Home page > Recent Edits: Shows recently modified banners
Favorites page: Shows banners you've marked as favorites

Favoriting banners

Favorites help you quickly access important banners.

To favorite a banner

On the home page or favorites page
Find the banner card
Hovering over a banner thumbnail reveals a star icon
Click the star icon
Star fills in to indicate it's favorited
Banner now appears on the favorites page

To unfavorite

Click the filled star icon
Star becomes empty
Banner removed from favorites page
Banner still accessible from home page

Possible use cases for favorites:

Mark production banners
Save template variations you use frequently
Quick access to work-in-progress banners

Renaming banners

How to rename banners.

From the editor

Open your banner in the editor
Click the banner name field in the header (top center)
Type the new name
Click outside the field
Name is saved automatically

Default name: "Untitled Banner" when there is no name set.

Deleting banners

How to delete a banner.

To delete a banner

On the home page or favorites page
Find the banner card, and hover over the thumbnail
Click the delete icon

Warning: Deletion is permanent and cannot be undone. Export important banners before deleting.

Exporting to CentralNotice

How to export designed banner code to the existing CentralNotice extension.

Generating banner code

Open your banner in the editor
Make final adjustments and verify design
Choose viewport mode:
1. One size: Generates single design for all devices
2. Responsive (Mobile, Tablet, and Desktop): Generates responsive CSS with media queries
Click the "Generate Code" button in the header
A dialog appears with the generated HTML/CSS code

Understanding the generated code

The generated code typically contains two parts:

1. CSS styles

<style>
  /* Banner-specific styles */
  #cn-banner-id.cnotice { ... }

  /* Element styles */
  #cn-banner-id .cnotice-text-1 { ... }

  /* Responsive (if not one-size) */
  @media screen and (min-width: 640px) { ... }
</style>

2. HTML structure

<div class="cnotice" id="cn-banner-id">
  <a class="cnotice-full-banner-click" href="...">
    <img class="cnotice-image-1" src="..." alt="..." />
    <p class="cnotice-text-1">Your text</p>
  </a>
  <button class="cnotice-toggle-box" onclick="mw.centralNotice.hideBanner();">
    <svg class="cnotice-toggle-box-icon">...</svg>
  </button>
</div>

Copying the code

In the Generate Code dialog
Click the "Copy" button
The generated code is now in your clipboard

Deploying to CentralNotice

Go to the CentralNotice interface for creating banners (Special:CentralNoticeBanners)
Create a new banner or edit existing one
Paste the code into the "Edit banner" textarea
Preview the banner in CentralNotice

Accessibility considerations

Color contrast

Text on background: 4.5:1 ratio minimum
Use tools like WebAIM Contrast Checker

Alt text

Describe image content, not just "logo" or "image"
Be concise but descriptive
Skip decorative images or use empty alt=""

Close button

Keep close button visible and accessible
Meet the minimum touch target for devices

Additional resources

CentralNotice documentation

Design resources

Getting help

Report issues: Phabricator