Community Forums › Forums › Archived Forums › Design Tips and Tricks › Modify Parallax Pro buttons + a couple other things
Tagged: button backgrounds, hover color, menu colors
- This topic has 7 replies, 3 voices, and was last updated 6 years, 11 months ago by Helene25.
-
AuthorPosts
-
January 30, 2017 at 4:25 pm #200280danstelterMember
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.orgJanuary 30, 2017 at 4:45 pm #200281ErikaParticipantHi 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 #200284danstelterMemberThanks 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 #200443ErikaParticipantDan,
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 #200731danstelterMemberFound 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 #200735ErikaParticipantDan,
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 #206778Helene25MemberHi, 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 #206819Helene25MemberAll good! I found it 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.