{"id":12,"date":"2026-05-03T15:52:30","date_gmt":"2026-05-03T15:52:30","guid":{"rendered":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/custom-css\/"},"modified":"2026-05-03T15:52:30","modified_gmt":"2026-05-03T15:52:30","slug":"custom-css","status":"publish","type":"post","link":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/custom-css\/","title":{"rendered":"Adding Custom CSS"},"content":{"rendered":"\n<p class=\"is-lede\">Override anything in the theme without editing files. Recommended techniques, the variables that drive the design, and a few worked examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where\">Where to add CSS<\/h2>\n\n\n\n<p>Use <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong>. Anything you add there:<\/p>\n\n\n\n\n<ul class=\"wp-block-list\">\n<li>Loads after the theme stylesheet (so it overrides without <code>!important<\/code>).<\/li>\n<li>Survives theme updates (it&#8217;s stored in your database, not in theme files).<\/li>\n<li>Has a live preview in the Customizer, so you can iterate quickly.<\/li>\n<\/ul>\n\n\n\n\n<p>For larger CSS additions or design overhauls, a child theme is more maintainable. See <a href=\"\/food-recipes-wordpress-theme\/child-theme\/\">Child Themes<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"variables\">CSS variables that drive the design<\/h2>\n\n\n\n<p>The theme uses CSS custom properties for colors, spacing, and typography. Override these to retune the design without touching individual selectors:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:root {\n    \/* Colors *\/\n    --paper: #faf7f0;          \/* main background *\/\n    --paper-deep: #f5f0e8;     \/* alt background *\/\n    --ink: #1a1a1a;            \/* main text *\/\n    --ink-soft: #444;          \/* body text *\/\n    --ink-faint: #777;         \/* meta, captions *\/\n    --rule: #e0d8c4;           \/* dividers *\/\n    --accent: #c8522a;         \/* primary accent *\/\n\n    \/* Typography *\/\n    --serif: 'Cormorant Garamond', Georgia, serif;\n    --sans: 'Jost', -apple-system, sans-serif;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Worked examples<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-fonts\">Change the body font to Inter<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&amp;display=swap');\n\n:root {\n    --sans: 'Inter', -apple-system, sans-serif;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-cards\">Tighter card grid (4 columns instead of 3)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (min-width: 1024px) {\n    .fr-card-grid {\n        grid-template-columns: repeat(4, 1fr);\n        gap: 24px;\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"example-headings\">Different heading style on single posts<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>.single-post .entry-title {\n    font-family: var(--sans);\n    font-weight: 800;\n    letter-spacing: -0.03em;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finding-selectors\">Finding the right selectors<\/h2>\n\n\n\n<p>Right-click any element on your site and choose <em>Inspect<\/em>. The browser shows the existing CSS \u2014 copy a class name and use it in your override. The theme uses BEM-ish naming: <code>.fr-card<\/code>, <code>.fr-card-title<\/code>, <code>.fr-card-meta<\/code>. Pro plugin elements are prefixed with <code>frpro-<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-group is-callout is-callout-tip\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><p><strong>Tip:<\/strong> If a selector isn&#8217;t taking effect, it&#8217;s almost always specificity. Add <code>html<\/code> in front of your selector to win the cascade \u2014 e.g. <code>html .fr-card-title { ... }<\/code> \u2014 without resorting to <code>!important<\/code>.<\/p><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Override anything in the theme without editing files. Recommended techniques, the variables that drive the design, and a few worked examples.<\/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-12","post","type-post","status-publish","format-standard","hentry","category-customization"],"_links":{"self":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":0,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/food-recipes-wordpress-theme\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}