• 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

Modify Parallax Pro buttons + a couple other things

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 › Modify Parallax Pro buttons + a couple other things

This topic is: not resolved

Tagged: button backgrounds, hover color, menu colors

  • This topic has 7 replies, 3 voices, and was last updated 8 years, 1 month ago by Helene25.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 30, 2017 at 4:25 pm #200280
    danstelter
    Member

    Hey everyone -

    While I love the changes to the default Parallax Pro theme, I'm having trouble making a few changes.

    URL for my demo site: http://www.anxietysupportnetwork.org

    What I want to do:

    1) Round the corners on the blue button there

    2) The color on hover should be a darker shade of blue: 3d9ad0

    3) I'd like to change the top and bottom black bars (the header menu) and the bottom one to this shade of green: 35c379

    Did all these things fine in previous Parallax Pro versions, so things must have changed since. Not a designer. Don't speak programmer. Just a practical guy.

    So, can you help?

    Appreciate it a ton,

    Dan

    http://www.anxietysupportnetwork.org
    January 30, 2017 at 4:45 pm #200281
    Erika
    Participant

    Hi Dan,

    To round the button, find this code:

    button, input[type="button"], input[type="reset"], input[type="submit"], .button

    and add border-radius: 32px; at the end of the code line beneath it. Play with that number until you find the degree of roundness you like. Also, see if this code has another one near by with "hover" included in it. Then delete the HTML color number and add your own.

    To change the top navigation bar color, find the code below and insert your HTMl color number, as I already did.

    .site-header {
    background-color: #35c379;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    }

    To change the bottom footer bar, same instructions as above.

    .site-footer {
    padding: 40px 0;
    text-align: center;
    background: #35c379;
    }

    Hope this helps!

    January 30, 2017 at 5:29 pm #200284
    danstelter
    Member

    Thanks Erika. Those worked perfectly - and easily.

    When you go to: anxietysupportnetwork.org...

    Hover over the button. I don't want that green color when you hover over it. I'd like to change to a darker shade of blue like 3d9ad0

    Where would I find that?

    Thanks for all your excellent help,

    Dan

    February 2, 2017 at 8:19 am #200443
    Erika
    Participant

    Dan,

    Find the first code in bold I gave you, and right beneath it in your code sheet should be the same code but with hover included in it. That is where you will delete the color number you don't like and add your own. I can't pull up the exact code unfortunately.

    February 7, 2017 at 5:12 pm #200731
    danstelter
    Member

    Found that code. Tried playing around with putting in the border-radius, but couldn't figure out where. Here's the code:

    legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

    February 7, 2017 at 8:14 pm #200735
    Erika
    Participant

    Dan,

    The code I gave you will stand alone in the CSS sheet. It won't be surrounded by that garble. Here is the code you need to change the hover color:

    button:hover,
    input:hover[type="button"],
    input:hover[type="reset"],
    input:hover[type="submit"],
    .button:hover {
    background-color: #fff;
    }

    Change #fff to whatever you like. Put the border radius in the first line of bolded code I gave you in my first response. Remember, it will stand alone.

    May 21, 2017 at 3:52 am #206778
    Helene25
    Member

    Hi, I'm so glad I found this post! I'm also trying to edit the colour of the top and bottom black bars, and I have a question (can you tell I'm definitely not tech-savvy!)...

    Which file is it you're editing? I've tried searching for the code you said to look for, Erika, but to no avail. I'm probably looking in the wrong files though.

    Do I go to edit themes?

    Thanks so much for your help. The address is Move Well AT.

    May 22, 2017 at 12:11 am #206819
    Helene25
    Member

    All good! I found it 🙂

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

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