Writing the CSS

Override inline styles with !important

Front-end addons embed inline <style> blocks in their views. Your stylesheet is injected before those blocks, so you must use !important on any property you want to win. This is not a hack — it is the correct tool when you are intentionally overriding a lower-priority stylesheet that you do not control.

Cover all standard HTML elements

Do not limit yourself to the classes your addons happen to use. A proper theme styles every standard HTML element so that any addon — including ones you have not seen yet — renders consistently. This includes:

• Typography: h1–h6, p, strong, em, small, mark, abbr, cite, q, dfn, address, time, sup, sub, s, del, ins
• Code: code, pre, kbd, samp, var
• Structure: header, footer, main, nav, aside, article, section
• Lists: ul, ol, li, dl, dt, dd
• Tables: table, thead, tbody, tfoot, th, td, caption
• Forms: form, fieldset, legend, label, all input types, textarea, select, option, button
• Media: img, figure, figcaption, video, audio, iframe
• Interactive: details, summary, dialog
• Progress: progress, meter

Catch-all for unlisted elements

Even after styling individual elements, some addon markup may have text colour set by an inline style on an arbitrary wrapper. Add a catch-all at the end of your stylesheet to handle this:

body * { color: #c6d4df !important; }
body h1, body h2, body h3,
body h4, body h5, body h6 { color: #ffffff !important; }
body strong, body b      { color: #ffffff !important; }
body a                   { color: #1a9fff !important; }

nav is an element, not just a class

Style the nav HTML element directly, not only the .nav-menu class. The element needs its own background, and its descendant ul, li, and a elements need their list markers hidden and their colours set explicitly.

nav { background: #16202d !important; }
nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
nav ul li::marker { content: none !important; }
nav a { color: #c6d4df !important; display: block !important; padding: 6px 12px !important; }
nav a:hover { background: #253447 !important; color: #ffffff !important; }