• 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

Digital Pro header image background color

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 › Digital Pro header image background color

This topic is: not resolved

Tagged: background color, digital pro, header image

  • This topic has 3 replies, 2 voices, and was last updated 2 years, 9 months ago by rstyner.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 3, 2020 at 6:43 am #499122
    rstyner
    Participant

    I would like to try a black background at the top where the header image and main navigation are. Can someone point me in the right direction on doing this? Will I need to change the text color as well? Also I want to change the color of the buttons, text links etc. from red to more of an orange. I'm not a pro but follow instructions (if understood haha) really well.

    Thank you.

    https://scottlocal.marketing/
    June 3, 2020 at 10:09 am #499129
    andytc
    Participant

    Add the CSS below into the Additional CSS section of the customizer - Note: Digital pro has section in the customizer to change link color.

    /* Header Background Color */
    
    .site-header {
     background-color: #000;
    }
    
    /* Nav menu links Color */
    
    .genesis-nav-menu a {
     color: #fff;
    }
    
    /* Buttons Background Color */
      
    .button {
     background-color: #FF9800;
    }
    
    /* Links Hover Color */
    
    a:focus, a:hover {
     color: #FF9800;
    }
    
    /* Entry title hover Color */
    
    .content .entry-title a:focus, .content .entry-title a:hover {
     color: #FF9800;
    }
    
    /* Pagination links background Color */
    
    .archive-pagination li a:focus, .archive-pagination li a:hover, .archive-pagination .active a {
     background-color: #FF9800;
    }
    
    /* Tick marks Color */
    
    .front-page-2 ul.checkmark li:before {
     color: #FF9800;
    }
    June 3, 2020 at 10:47 am #499130
    rstyner
    Participant

    Thank you so much. I'll try this out. Much appreciated.

    June 4, 2020 at 5:39 am #499144
    rstyner
    Participant

    Hi Andytc,

    The button(s) did not change colors. They stayed red. Did I do anything incorrectly? Or am I calling those the right "name"?

    Also The nav menu links are red when they are active. How can I change those?

    I think that until I get my logo fixed I'll have to keep the header background white.

    I appreciate your help.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 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

© 2023 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