• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Genesis Sample Theme Default Button

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Sample Theme Default Button

This topic is: not resolved

Tagged: genesis sample default button css change colors

  • This topic has 2 replies, 3 voices, and was last updated 9 years, 6 months ago by Konspaul.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 24, 2017 at 5:32 pm #199962
    eremis
    Member

    Hi,

    I was wondering how to change the default theme button colors. I've tried to look for a solution the past few days but cannot find one. I've been trying to make modifications to the theme's style.css but nothing I do changes anything. My site's background is black and its secondary color is orange, so it doesn't fare well with the default black and hover red.

    Any help will be greatly appreciated.

    Thank You,
    Eremis

    January 24, 2017 at 8:53 pm #199973
    Victor Font
    Moderator

    The button colors start at line 520:

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button {
    	background-color: #333;
    	border: 0;
    	color: #fff;
    	cursor: pointer;
    	font-size: 16px;
    	font-size: 1.6rem;
    	font-weight: 700;
    	padding: 16px 24px;
    	text-decoration: none;
    	white-space: normal;
    	width: auto;
    }
    
    button:hover,
    input:hover[type="button"],
    input:hover[type="reset"],
    input:hover[type="submit"],
    .button:hover,
    button:focus,
    input:focus[type="button"],
    input:focus[type="reset"],
    input:focus[type="submit"],
    .button:focus  {
    	background-color: #c3251d;
    	color: #fff;
    }

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    January 25, 2017 at 9:58 am #200008
    Konspaul
    Member
    • You need to edit child theme's style.css. If you don't know how to do that then read this https://codex.wordpress.org/Child_Themes
    • Learn Google Chrome developer tools to see what element is effected with a CSS style
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2026 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble