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

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 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.

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:

Click Background color picker
Choose color or enter hex code
Banner background updates

Background image:

How to add a background image to a banner.

Find Background image field
Enter image URL (e.g., //upload.wikimedia.org/...)
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

Working with images

How to edit images.

Changing image source

Select the image element
In the inputs sidebar, find the image section below the margin control
Choose image type by toggling the embed SVG code checkbox:

For SVG: Check embed SVG code checkbox and upload your SVG image
For URL: Uncheck the embed SVG code checkbox and enter the image source. For this, protocol relative URLs are preferred. See https://meta.wikimedia.org/wiki/Help:CentralNotice#Images for more details

Tip: Use Wikimedia Commons for hosted images.

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: See https://webaim.org/techniques/alttext/#intro 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.

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.

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

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