{"id":13,"date":"2026-05-04T07:56:22","date_gmt":"2026-05-04T07:56:22","guid":{"rendered":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/custom-css\/"},"modified":"2026-05-04T07:56:22","modified_gmt":"2026-05-04T07:56:22","slug":"custom-css","status":"publish","type":"post","link":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/custom-css\/","title":{"rendered":"Adding Custom CSS"},"content":{"rendered":"\n<p class=\"is-lede\">When the Customizer doesn&#8217;t go far enough, custom CSS picks up. Here&#8217;s how to add it without breaking updates.<\/p>\n\n\n\n<p>MyWiki uses CSS custom properties (variables) for every color, font, and spacing token. That makes targeted overrides clean and update-safe.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"customizer\">Use the Customizer<\/h2>\n\n\n\n<p>The simplest path for small tweaks: <strong>Appearance u2192 Customize u2192 Additional CSS<\/strong>. Anything you write here is stored in your database, survives theme updates, and applies site-wide.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Make article body text larger *\/\n.mw-article {\n    font-size: 1.1rem;\n    line-height: 1.85;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"variables\">Override a CSS variable<\/h2>\n\n\n\n<p>MyWiki&#8217;s variables are defined on <code>:root<\/code>. Override them globally:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n    --mw-accent: #2563eb;        \/* swap to a blue accent *\/\n    --mw-bg: #ffffff;            \/* pure white background *\/\n    --mw-text: #18181b;          \/* slightly different ink *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"common\">Common variables<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><code>--mw-bg<\/code>, <code>--mw-bg-card<\/code>, <code>--mw-bg-soft<\/code> u2014 backgrounds<\/li><li><code>--mw-text<\/code>, <code>--mw-text-muted<\/code> u2014 typography<\/li><li><code>--mw-accent<\/code> u2014 the highlight color (links, italics, focus rings)<\/li><li><code>--mw-border<\/code>, <code>--mw-border-soft<\/code> u2014 divider lines<\/li><li><code>--mw-serif<\/code>, <code>--mw-sans<\/code>, <code>--mw-mono<\/code> u2014 font stacks<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"child\">When to use a child theme instead<\/h2>\n\n\n\n<p>If you&#8217;re adding 20+ lines of CSS or modifying templates, build a child theme. The next article walks through that.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When the Customizer doesn&#8217;t go far enough, custom CSS picks up. Here&#8217;s how to add it without breaking updates.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","hentry","category-customization"],"_links":{"self":[{"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":0,"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/mywiki-wordpress-theme\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}