• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » Uncategorized

    Change Button Styling

    Published: Dec 18, 2019 by Skylar · Leave a Comment

    Some of the themes contain built-in customizer settings for button styling. However, these are saved to the theme settings, which means they're lost between updates.

    Instead, we recommend copying this to your Code Snippets Plugin (using their embed CSS example), or the "Additional CSS":

    
    .button, button,  a.more-link, input[type="submit"], input[type="button"], .more-from-category a{
    border-color: #CCCCCC !important;
    color: #ffffff !important;
    background: #CCCCCC !important;
    }
    
    .button:hover, button:hover, a.more-link:hover, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,  input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active, .more-from-category a:hover , .more-from-category a:active , .more-from-category a:focus {
    color: #CCCCCC !important;
    background: #ffffff !important;
    }

    You'll replace the #CCCCCC with whatever you want your primary color to be. Simply Google "css color picker" and copy the HEX code you get:

    Notes

    • This will override all buttons on all pages - homepage, category page and posts (recipes) - this is good, you want consistency for your brand
    • It will also override all buttons in the header, sidebar and footer - this is good, you want consistency for your brand
    • If pasting into "Additional CSS", you'll still need to manually copy+paste during theme updates, which is simpler than using the customizer

    Why not use the customizer?

    The customizer is a buggy feature that has conflicts with a number of plugins, and sometimes hosting environments. We've seen it break a dozen different ways in the last year. Some times in very difficult to troubleshoot ways.

    These are not theme-related issues, but we're still left supporting it. Despite being a "mature" feature, we've seen an increase in bugs and issues over the years, rather than a decrease. This is because WordPress/Automattic has focused their development on migrating to the block editor, which is intended to replace the customizer.

    Additionally, the customizer creates performance issues, which can cause poor server response times. This is because the customizer has to fetch settings from the database and perform calculations on each page load in order to generate the necessary CSS output.

    This is entirely unnecessary and not a best practice for basic CSS output.

    Moving to regular CSS will allow us to provide support for changing the block editor styling to more closely match the front-end, at some point in 2020.

    Compatibility

    Tested for compatibility with:

    • Foodie Pro 4.3.0+
    • Brunch Pro 4.2.0+
    • Cook'd Pro 4.2.0+
    • Cravings Pro 4.3.0+
      • Prior to version 4.3.0, there's styling missing from the "read more" button that links to the categories
    • Seasoned Pro 4.2.0+

    More

    • Troubleshooting Featured Images
    • What are "content archives"
    • Demo Site Updates
    • Link Parties

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template
    • Tools
    • Site Info

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed
    • Analytics
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.