Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to change text color for form input

Featured Lock Resolved
Hallo,

I need to change the text color in input box of the form in Lightbox template.

I changed the backgorun color in white but i'm not abel to change the color of the text in box

I put an image to explaine better.

thank you so much

Stefano

Attachments (1)

  • lightbox-color.png
    lightbox-color.png 82.5 KB

9 Answers

Stefano

More than a month ago #Permalink
Hi Paul,

thank you i did it but the font color is yet white

http://buonisani.webiness.it/index.php/contattaci

I tried to set it fron pagebuilder but it doesn't work

whato could I do?

thank you

Stefano

Paul Frankowski - Staff

More than a month ago #Permalink
Thanks for URL, it was very helpful.
Improved code (old one you can delete) :


#sp-page-builder input.sppb-form-control,
#sp-page-builder textarea.sppb-form-control
{border:2px solid #76C270; border-radius:4px !important; color:#333 !important;}

.sppb-btn:hover {
background: #084730;
border-color: #084730;
}

Stefano

More than a month ago #Permalink
Ok, :) now is working good,

Another question:

How could I put in 'input form' text like:

' input your name'
'input your email'

so people are able to understand what they have to do

thank you so much

Stefano

Paul Frankowski - Staff

More than a month ago #Permalink
You have it already,

<input name="name" class="sppb-form-control" placeholder="Name" required="required" type="text">

Only white color is a problem, try CSS code from attachment.
Tip taken from: https://css-tricks.com/almanac/selectors/p/placeholder/

So to change color of placeholders font inside input fields use:

input.sppb-form-control::placeholder,
input::placeholder {
color: red !important;
}


Remember to install SPPB translation or override those:
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_NAME
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_MESSAGE

Attachments (3)

  • Languages_Overrides.png
    Languages_Overrides.png 15.6 KB
  • css.zip 0.2 KB
  • custom_css_field_helix3.png
    custom_css_field_helix3.png 9.9 KB

Stefano

More than a month ago #Permalink
Yes, I've done the ovverride and I put the css code like you suggest, but the font is still thiny and white, It doesn't work with dark background also, because is too thiny.

But i need to write somethig, near that box.

whato could I do?

thank you for your patience


Stefano

Paul Frankowski - Staff

More than a month ago #Permalink
Are you sure? I see grey font. You can alone change font color from #888 to #000 and add font-weight:bold - this is CSS basic. Sorry but I am not here to teach CSS, only to give tips.
BTW
You don't have any dark background there

Attachments (1)

  • firefox-view.png
    firefox-view.png 7.2 KB

Paul Frankowski - Staff

More than a month ago #Permalink
About textarea field add also this:

Attachments (1)

  • add-also-this.zip 0.2 KB

Stefano

More than a month ago #Permalink
Ok now working good,

thank you

Stefano

Paul Frankowski - Staff

More than a month ago #Permalink
You're welcome / Sei il benvenuto


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Limited Support

Due to holidays, general forum support will be delayed or unavailable from June 14, 2018 to June 21, 2018.

Regular operations will be resumed on June 22, 2018.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 174
Sifat

Sifat

Total Accepted Answers: 102
Toufiq

Toufiq

Total Accepted Answers: 35
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 10
Al Mamun

Al Mamun

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us