Docs

[Sara H.]

Hello!

I am using Estimation & Payment Forms plugin on dark backgrounds (dark blue), So I need the text to be white to have good contrast, the thing is that I cant set the color inside of the fields (placeholders and also the text that the user type). Can I change the color that is in light grey manually? How?

Thank you

[Sara H.]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

body #estimation_popup.wpe_bootstraped[data-form="4"] .form-control {
    color: #000 !important;
}
#estimation_popup.wpe_bootstraped label, .bootstrap-datetimepicker-widget label {
    color: #fff !important;
}
#estimation_popup.wpe_bootstraped[data-form="4"] #mainPanel #lfb_summary table th.sfb_summaryStep {
    background-color: #fff !important;
    color: #000 !important;
}

Let is know how this goes!

[Sara H.]

Goes great!

Just realize that in the final step I still have the description text in light grey (summary table) and also the fields for email and cupons.

For multiple forms how do I do it? in the code you have [data-form=”4″] but I also have [data-form=”7″], [data-form=”8″], [data-form=”10″] Should I just repeat it?

– – – –

Btw how do I make the button in the bottom (next step button and the last one in the final step) bigger and different color, ex. orange.

Your amazing!

[Christopher]

Hi there,

Update previous code to :

body .form-group input {
    color: #000 !important;
}
body .form-group label, .bootstrap-datetimepicker-widget label {
    color: #fff !important;
}

Please add this :

::-webkit-input-placeholder {
   color: #000 !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: #000 !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #000 !important;  
}

:-ms-input-placeholder {  
   color: #000 !important;  
}
#estimation_popup.wpe_bootstraped #mainPanel #lfb_summary td:first-child, #estimation_popup.wpe_bootstraped #mainPanel #lfb_summary th:first-child, #estimation_popup.wpe_bootstraped #mainPanel #lfb_summary td:nth-child(2), #estimation_popup.wpe_bootstraped #mainPanel #lfb_summary th:nth-child(2) {
    text-align: left;
    color: #000;
}
body .btn {
    color: #000 !important;
    background-color: orange !important;
    width: 60%;
}

Hope it helps.

[Sara H.]

Yeah it does the job very well, but sorry, there is a couple things:

– the first step still the light grey dont know why it didnt applied, because the other steps are cool!
– About the button, is there a way to make it bigger but proportionally, I mean this way it will stretch, and unfortunately also affects the cupons button (its nicer small just how it is on the original).

thank you..

[Sara H.]

any help?

[Nabeel A]

Hi again,

1. It seems like you’ve removed the following code:

body #estimation_popup.wpe_bootstraped[data-form="4"] .form-control {
    color: #000 !important;
}
#estimation_popup.wpe_bootstraped label, .bootstrap-datetimepicker-widget label {
    color: #fff !important;
}

Please add it back to change the colors.

2. To re-size the button, add this code in your Customizer:

body .btn.btn-next {
    width: 31%;
    padding: 20px !important;
}

Adjust the width and padding to re-size the button.

[Sara H.]

Hi Nabeel, this is what I have now:

body #estimation_popup.wpe_bootstraped[data-form="4"] .form-control {
    color: #000 !important;
}
#estimation_popup.wpe_bootstraped label, .bootstrap-datetimepicker-widget label {
    color: #fff !important;
}

body .form-group input {
    color: #000 !important;
}
body .form-group label, .bootstrap-datetimepicker-widget label {
    color: #fff !important;
}

::-webkit-input-placeholder {
   color: #000 !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: #000 !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #000 !important;  
}

:-ms-input-placeholder {  
   color: #000 !important;  
}
#estimation_popup.wpe_bootstraped #mainPanel #lfb_summary td:first-child,
#estimation_popup.wpe_bootstraped #mainPanel #lfb_summary th:first-child,
#estimation_popup.wpe_bootstraped #mainPanel #lfb_summary td:nth-child(2),
#estimation_popup.wpe_bootstraped #mainPanel #lfb_summary th:nth-child(2) {
    text-align: left;
    color: #000;
}

body .btn.btn-next {
    width: 31%;
    padding: 20px !important;
}

I already included the code you told me to add, but should I delete what Christopher said to add? And again your code only does changes on [data-form=”4″] but I also have these forms: [data-form=”7″], [data-form=”8″], [data-form=”10″]

About the buttons: smashing!

Cheers

[Nabeel A]

Hi again,

To use the above code generically, you can replace this code:

body #estimation_popup.wpe_bootstraped[data-form="4"] .form-control {
    color: #000 !important;
}

With this:

body #estimation_popup.wpe_bootstraped .form-control {
    color: #000 !important;
}

And you can keep Christopher’s code as well.

Let us know how this goes!

[Sara H.]

amazing, done!

about the button just realize that the code doesnt apply on the final btn that is for send the booking details.

body .btn.btn-next {
    width: 31%;
    padding: 20px !important;
}

but hei I’m happy 🙂

[Friech]

We’re delighted to assist you with this.

Happy New Year, Cheers!

[Sara H.]

Is there a way to make those changes on width and padding on the final button as well?

thanks, and happy new year to you too 🙂

[Joao]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

#estimation_popup.wpe_bootstraped[data-form="4"] .btn-primary {
padding: 20px !important;
}

Thanks

Joao

[Sara H.]

Hi João, thank you for your help.
I managed to add the code the problem is that it seems the button of the coupons also belongs to the .btn-primary
this means when I add the code (you just gave me) it will also make changes to that button of the coupon.
I really wanted to do this tweak only on the ‘send request’ button. If its not possible, thats ok I can live with that 🙂

thank you!

[Author]

Posts