CSS: Style for Buttons and textfield

lol – Windows 95 – that’s not good! It sounds like it’s missing out on your theme’s styles. Can you provide a link to your site?

The coming soon mode is active and I do not want to make the page already public. Here is a Screenshot:

https://www.dropbox.com/s/anplgp0b25g6x0h/9236246741.jpg?dl=0

Regards,
Wolf

Hi Wolf,

Looking at your screenshot I don’t see a problem. What exactly SHOULD those fields and buttons look like instead?

If the form is not inheriting your theme styles, it’s relatively simple to apply some custom CSS if you are familiar with CSS.

The “jetzt spenden Button” shoud look like the standard buttons on the stockholm template.
https://demo.select-themes.com/stockholm14/contact-us/

OK. Thanks for the link as an example. The reason the Give button is not styled like that is because the Theme is applying that style to a custom button class. So add this to your custom CSS and you’ll be all set:

`
form[id*=”give-form”] button.give-btn {
color: #ffffff;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border-color: #393939;
background-color: #393939;
}

form[id*=”give-form”] button.give-btn:hover {
color: #ffffff;
background-color: #e6ae48;
border-color: #e6ae48;
}`

If you need any tips on implementing Custom CSS styles, we have documentation on that here:
https://givewp.com/documentation/resources/handling-custom-css-in-wordpress/

Thanks!

thank u a lot. I′ll try it!

Best Regards, Wolfgang

Thank You,
It works, but just not with all buttons (second screenshot).
By the way, fortunately, I changed the payment fields to modal. On the first page it′s now ok, the second one not (second screenshot). How it′s called the button – give-purchase?

https://www.dropbox.com/s/an1auadgwpib72g/Bildschirmfoto%202015-07-29%20um%2011.50.49.png?dl=0

https://www.dropbox.com/s/idhz0pij909jvej/Bildschirmfoto%202015-07-29%20um%2011.50.59.png?dl=0

This are my modifications.

Regards, W.

form[id*=”give-form”] button.give-btn {
border: 2px solid #e6ae48;
background-color: #393939;
border-radius: 0;
box-sizing: initial !important;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 11px;
font-style: normal;
font-weight: 700;
height: 37px;
line-height: 37px;
margin: 0;
outline: 0 none;
padding: 0 22px;
position: relative;
text-align: left;
text-decoration: none;
text-shadow: none;
border-color: #393939;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
}

form[id*=”give-form”] button.give-btn:hover {
background-color: #e6ae48;
border: 2px solid #e6ae48;
border-radius: 0;
box-sizing: initial !important;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 11px;
font-style: normal;
font-weight: 800;
height: 37px;
letter-spacing: 2px;
line-height: 37px;
margin: 0;
outline: 0 none;
padding: 0 22px;
position: relative;
text-align: left;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
transition: color 0.3s ease-in-out 0s, background-color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s;
white-space: nowrap;
width: auto;
}

OK, that isn’t technically a button, but the submission input element. So here’s how to adjust that. Keep all the styles, but add the input as well:

form[id*=”give-form”] button.give-btn,
form[id*=”give-form”] input.give-submit
{ ..styles here ..}

form[id*=”give-form”] button.give-btn:hover,
form[id*=”give-form”] input.give-submit:hover
{ ..styles here ..}

Thanks!