Modify Parallax Pro buttons + a couple other things

[danstelter]

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

[Erika]

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!

[danstelter]

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

[Erika]

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.

[danstelter]

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}

[Erika]

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.

[Helene25]

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.

[Helene25]

All good! I found it 🙂

[Author]

Posts