CentralNotice/Banner guidelines

Tips for making CentralNotice banners! For the full technical manual, see Help:CentralNotice.

Creation

Banners are created using the Special:NoticeTemplate page. Banners are somehow related to campaigns. Read Help:CentralNotice for more information about this (including outdated screenshots).

Naming

Try to give banners an understandable name.
Do not start banner names with a digit (CSS selectors cannot begin with a digit, so you won't be able to use #{{{banner}}} to style the banner).

Template banner

"Clone" (button at the bottom) a template banner to make your own banner, then change the text and link (default is https://blog.wikimedia.org/) to whatever you want. This should be suitable for most uses, and works on the mobile site too provided your text isn't overly long.

templatev2 (preview, mobile preview; standard template)

Code

Banner code is largely HTML. Most wikitext will not work (with a few exceptions found below). The HTML is not run through HTMLTidy or any other program to check for its accuracy, so it's crucial that it be well-formed, otherwise pages can and will break horribly.

Media

Never, ever use unprotected images!: Media hosted on Commons or any other wiki (besides fishbowl wikis like foundation.wikimedia.org) must be protected to prevent vandalism.; This includes, but is not limited to, uses like "background:black url('//upload.wikimedia.org/wikipedia/commons/thumb/5/58/Gradient.png/20px-Gradient.png');"
Always use the smallest available image size: This is fairly self-explanatory. Browsers can resize images using width="" and height="", but that still means that full-sized image (whatever that is) will be transferred to users. Users already hate these banners. Don't add extra weight with bloated images. If you don't have an image editing program, Wikimedia's servers can create thumbnails for you. Usually JPEG for photos, and PNG/SVG for other graphics gives the smallest size.
Specify image dimensions: Specify the desired image size either using width="" height="" attributes, or in CSS. This will avoid any banner resizing when the image loads.

You can also directly embed small logos/icons as <svg> elements in the banner. This avoids some of the above pitfalls.

CSS

Use consistent naming!: This is crucial to sanity. If you're going to use hyphens as separators, always use hyphens. The magic message {{{banner}}} is automatically replaced with the name of the banner. Therefore it can (and should) be used as a prefix for classes and IDs so you can identify them easily.
Isolate CSS from the rest of the page: Make sure that CSS will not affect the rest of the page. Never use plain selectors like a - this would affect all the links on the page not just the banner! You can give the banner a wrapper div like <div id="{{{banner}}}">...</div>. Then use a selector like div#{{{banner}}} a.
When using <table>, be mindful of background color: Since the vector skin sets the background color of tables to white by default, you may need to explicitly declare the background-color of tables used within banners to transparent. Of course, you can avoid the problem by not using tables at all within banners.
Always use z-indexes less than 100: The z-index of the notifications flyout is set to 100 and the flyout should always appear on top of banners.
Don’t use fixed heights: Remember that on devices with less width (like smartphones) the banners have more lines than on the desktop. In banners with something like height=42px; not the whole text will be visible or it just looks ugly. Better use height=auto; and min-height=42px; together instead.

Templates

Close all templates properly: Open the two braces, close the two braces.
Use {{int:Centralnotice-foo}} for internationalized messages: These would be messages you want to change based on user language setting.
Use {{MediaWiki:Centralnotice-foo}} for shared CSS and JS: These would be messages you want to include, but don't care what the user's language setting is.

HTML

Open a tag, close a tag: And conversely, close a tag, be sure you opened one!; Note: As mentioned above, there is no "tidying" done to the HTML between input and output, so this is crucial to prevent breakage elsewhere.
Don't use <center>: It's deprecated and antiquated. Use CSS.

Whitespace

Don't use tabs in a <textarea>: It doesn't matter if you're working with CSS, JS, HTML, or anything else, tabs in a <textarea> are headache-inducing. Don't use them ever.
Indentation: CSS, JS, and HTML are not whitespace-sensitive. That said, making things line up can be nice, but only when there's an actual improvement in code readability and maintainability. Don't needlessly indent, but if there's a good reason to, do so (but with spaces, not tabs!)