The themes were designed at a time when the customizer was being actively developed and maintained. Unfortunately, in 2020 this no longer appears to be the case. The customizer doesn't recognize modern HTML or CSS and frequently fails without explanation.
In addition, the customizer settings are saved to the theme settings, which means they're lost during updates. This discourages people from performing important updates, which is a safety and optimization concern.
Finally, all themes have different customizer settings, which creates an inconsistent experience and unnecessary confusion for people trying to decide which theme to use.
Because of this, we'll be dropping support for the customizer and instead recommending people use basic CSS to customize their theme.
This is a list of CSS code generated by the themes when using the customizer.
All of this goes in the "Additional CSS" screen in the Customizer.
Site-wide colors
We recommend using a consistent color scheme across the homepage, category pages and posts.
- Post title color
- h1.entry-title, .entry-title a, .widgettitle, .recipe-index-search .widgettitle, .footer-widgets .widgettitle{ color: #eeee22; }
- Text color
- body, .site-description, .sidebar a { color: #333333; }
- Link color
- a, .entry-meta a, .post-info a, .post-meta a, .site-footer a, .entry-content a { color: #6347e0; }
- Link hover color
(note: not useful on Mobile) - a:hover, .entry-meta a:hover, .post-info a:hover, .post-meta a:hover, .site-footer a:hover
Menu color
- Menu link color
- .genesis-nav-menu > li > a { color: #dd9933; }
- Menu link hover color
- .genesis-nav-menu > li > a:hover, .genesis-nav-menu > .current-menu-item > a { color: #dd9933; }
- Menu background color
- .genesis-nav-menu, .sub-menu .menu-item a { background: #333333 !important; }
Button color
- Button color
- .button, button, .enews-widget input[type="submit"], a.more-link, .more-from-category a, .sidebar .button, .sidebar .more-from-category a { background: #dd9933; }
- Button text color
- .button, button, .enews-widget input[type="submit"], a.more-link, .more-from-category a { color: #FFFFFF; }
- Button border color
- .button, button, .enews-widget input[type="submit"], a.more-link, .more-from-category a { border-color: #dd9933; }
- Button hover color
- .button:hover, button:hover, .enews-widget input[type="submit"]:hover, a.more-link:hover, .more-from-category a:hover { background: #dd9933; }
- Button hover text color
- .button:hover, button:hover, .enews-widget input[type="submit"]:hover, a.more-link:hover, .more-from-category a:hover { color: #CCCCCC; }
Font size
- Post title font size
(homepage + categories) - .content .entry-title { font-size: 1.2em; }
- Widget title font size
(homepage + categories) - .content .widget-title { font-size: 1.6em; }
Heading accents
- Widget title accent
(sidebar) - .sidebar-primary .widgettitle {position:relative;} .sidebar-primary .widgettitle::after { background: #FF000055; content: " "; height: 0.6em; top: 60%; position: absolute; right: 0; left: 0; }
- Widget title accent
(homepage) - .content .widget-wrap {position:relative;} .content .widget-wrap .widgettitle::after { background: #00550033; content: " "; height: 0.6em; top: 60%; position: absolute; right: 0; left: 0; }
Headings
Foodie Pro was designed to visually display headings as uppercase, before a time when heading guidelines were a concern. To undo this, you can either update all headings site-wide, or just in content:
- Site-wide
- h1, h2, h3, h4, h5, h6 { text-transform: none; }
- Post headings only
- .post .content h1, .post .content h2, .post .content h3, .post .content h4, .post .content h5, .post .content h6 { text-transform: none; }
Leave a Reply