Use custom CSS to fine-tune how your help centre looks beyond the built-in settings. PinkDocs uses CSS variables for its colours, so you can restyle the whole help centre with a few lines.
Where to add custom CSS
- Go to Appearance → Editor.
- Click Styles, then the three-dot menu, then Additional CSS.
- Paste your CSS and click Save.
📷 Image placeholder: the Additional CSS panel in the Site Editor.
- Go to Appearance → Customize.
- Click Additional CSS.
- Paste your CSS and click Publish.
📷 Image placeholder: the Additional CSS panel in the Customizer.
PinkDocs CSS variables
Override these variables to change colours across every PinkDocs page and block.
| Variable | Controls | Default |
|---|---|---|
--brand-color | Links, buttons, icons and highlights | #ff26b9 |
--brand-rgb | Brand colour as RGB, used for tinted backgrounds | 255, 38, 185 |
--text-primary | Headings and main text | #111827 |
--text-secondary | Descriptions and muted text | #6b7280 |
--bg-primary | Cards and main backgrounds | #ffffff |
--bg-secondary | Section backgrounds | #f9fafb |
--border-color | Borders on cards and blocks | #e5e7eb |
Examples
Change the brand colour to blue:
Make icon cards square:
Change the style of success alerts:
--brand-color, also change --brand-rgb to the same colour in RGB format. Otherwise tinted backgrounds keep the old colour.Find the class you need
Inspect the element
Open a doc on your site, right-click the element you want to change and choose Inspect.
Find the PinkDocs class
Look for a class starting with pinkdocs- or wp-block-pinkdocs- in the highlighted HTML.
📷 Image placeholder: browser developer tools highlighting a PinkDocs alert block and its classes.
Write and test your CSS
Add a rule for that class in Additional CSS and preview the change before saving.