Styling your install with custom CSS

Custom CSS lets you restyle your site's public pages (home page, discussions, knowledge base, search and login) with your own colours, fonts and layout tweaks. It doesn't change the support dashboard.

You'll need to know some CSS. For a logo or colours alone you may not need any: see Adding a graphic or logo to your Tender site header and Using Tender Themes.

Where to add it

1. Go to Account & Settings › Settings and click Appearance & Text in the sidebar.
   
2. Paste your CSS into Custom CSS, in the Design box.
   
3. Click Save your changes.

Your CSS is loaded after Tender's own, so your rules win when they're as specific as Tender's. Tender doesn't restrict what you write. Custom CSS depends on your plan; if your plan doesn't include it, the Design box only has the logo fields.

The same box has Custom Widget CSS for the support widget on your own website and, for sites on the classic design, Custom Mobile CSS (see Your site's design).

Modern or classic design?

The two designs have different page structures, so CSS written for one rarely works on the other. New sites use the modern design; the rest of this article is about it. If your site still uses the classic design, ask us to move it: we'll port your look for you.

Colours, fonts and corners: the variables

The modern design takes its colours from CSS variables, so changing one variable changes it everywhere it's used. Set them on :root:

:root {
  --tn-brand: #2f6f5e;        /* the top bar, buttons */
  --tn-brand-hover: #245647;
  --tn-brand-text: #fff;      /* text on the brand colour */
  --tn-link: #2f6f5e;
  --tn-font: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tn-radius: 4px;
}

The ones you're most likely to want:

Using these variables in your own rules also keeps your CSS readable in dark mode, where they switch to dark colours (the brand colours stay the same). If you set fixed light colours instead, either add dark-mode rules (the Dark mode article shows how) or untick Allow dark mode.

To use a font from a font service, add its stylesheet in Custom HTML Header or a Typekit code in Typekit code, then name the font in --tn-font.

The page's main parts

Targeting one page or section

Every page's <body> has classes saying which page it is, so you can style one page without affecting the rest. A knowledge base article, for example, has:

<body class="tn-frontend page-faqs_show section-faqs logged-out kb-article-welcome-to-juniper kb-section-getting-started desktop">

• page-faqs_show is just this kind of page; section-faqs is the whole knowledge base.
• logged-in or logged-out says whether the visitor is logged in.
• Knowledge base articles also get kb-article-<article> and kb-section-<section>, from their addresses.
• Pages in a discussion category get category-<permalink>, such as category-billing.

For example, to hide the search box in the header on the home page only:

.page-dashboard_home #header #search { display: none; }

To find a page's classes, open it in your browser and look at the <body> tag (right-click, Inspect).

Styling knowledge base articles by keyword

Each article's keywords (the Keywords field in the article editor) become classes on the article's entry in lists (the knowledge base pages, the article lists at the foot of an article, and the recent articles on the home page): an article with the keywords video setup gets kb-keyword-video kb-keyword-setup. You can use these to mark some articles out. For example, to put a star before every article with the keyword start:

.kb-article-list li.kb-keyword-start h2 a::before,
.kb-links li.kb-keyword-start a::before,
.footerbox li.kb-keyword-start a::before {
  content: "★ ";
}

Checking your changes

Save, then reload a page of your site. If a rule doesn't seem to apply, inspect the element in your browser to see which rule wins; making your selector more specific (for example starting it with .tn-frontend) usually fixes it. !important works too, but use it sparingly.