Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Color of the unfilled mandatory fields

9 months 2 weeks ago #1

  • Sebastian's Avatar
  • Sebastian
  • Posts: 93
Hey Guys,

how can ich change the color of the unfilled mandatory fields in a form?

In my example it`s orange.
How can i change it?

Greets,
Sebastian
Attachments:

9 months 2 weeks ago #2

  • Dave's Avatar
  • Dave
  • Posts: 995
Great question, not sure why this is not an option? Why isn't this in a setting?

9 months 1 week ago #3

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
Hello,
Thank you for contacting us

You can find the answer to your question in this post.
support.balbooa.com/forum/joomla-forms/1...ndatory-fields#60929

Best Regards,
Vyacheslav, Balbooa Support Team

9 months 1 week ago #4

  • Sebastian's Avatar
  • Sebastian
  • Posts: 93
Hi Vyacheslav

I've added the code i found in your link:


.ba-forms-authorize-field-wrapper .ba-alert-tooltip,
.ba-form-field-item .ba-alert-tooltip {
background: #FC52A8 !important;
}

.ba-forms-authorize-field-wrapper .ba-alert-tooltip:before,
.ba-form-field-item .ba-alert-tooltip:before {
border-bottom: 5px solid #FC52A8!important;
}


.ba-alert .ba-checkbox-wrapper .ba-form-radio span:before,
.ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span,
.ba-alert .ba-checkbox-wrapper .ba-form-radio span:before,
.ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span,
.ba-form-acceptance-field .ba-alert label.ba-form-checkbox > span,
.ba-form-radio-field.ba-alert .ba-form-checkbox-wrapper .ba-form-radio span:before,
.ba-form-field-item.ba-alert .ba-form-checkbox-wrapper label.ba-form-checkbox > span {
border: 2px solid #FC52A8 !important;
}


But the Borders of the field are still orange.
(see attached)

Some errors in my code? :dry:

Greets,
Sebastian
Attachments:

9 months 1 week ago #5

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
Send us a link to page with problem.

Regards,
Vyacheslav, Balbooa.com

9 months 1 week ago #6

  • Sebastian's Avatar
  • Sebastian
  • Posts: 93
Here is the link to my project:

joomla.p601572.webspaceconfig.de/index.php/kontakt

Thank you,

regards,
Sebastian

9 months 1 week ago #7

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
You need to add this css code
.ba-alert.ba-forms-authorize-field-wrapper input[type="text"],
.ba-alert.calendar-field-wrapper input[type="text"],
.ba-alert .upload-file-input,
.ba-alert .ba-field-container select,
.ba-alert .ba-field-container textarea,
.ba-form-calendar-field:not(.ba-form-calendar-field) .ba-alert .ba-field-container input[type="text"],
.ba-alert .ba-field-container input[type="text"],
.ba-alert .ba-field-container input[type="number"],
.ba-alert .ba-field-container input[type="password"],
.ba-alert .ba-field-container input[type="email"]{
    box-shadow: inset 0px 0px 0px calc(2px - var(--field-border-width)*var(--field-border-right)*var(--field-border-left)*var(--field-border-bottom)*var(--field-border-top)) #fc52a8;
}

Best Regards,
Vyacheslav, Balbooa Support Team

9 months 1 week ago #8

  • Sebastian's Avatar
  • Sebastian
  • Posts: 93
Hi Vyacheslav,

unfortunately nothing changed.

Here my whole css code:

.ba-forms-authorize-field-wrapper .ba-alert-tooltip,
.ba-form-field-item .ba-alert-tooltip {
background: #FC52A8 !important;
}

.ba-forms-authorize-field-wrapper .ba-alert-tooltip:before,
.ba-form-field-item .ba-alert-tooltip:before {
border-bottom: 5px solid #FC52A8!important;
}


.ba-alert .ba-checkbox-wrapper .ba-form-radio span:before,
.ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span,
.ba-alert .ba-checkbox-wrapper .ba-form-radio span:before,
.ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span,
.ba-form-acceptance-field .ba-alert label.ba-form-checkbox > span,
.ba-form-radio-field.ba-alert .ba-form-checkbox-wrapper .ba-form-radio span:before,
.ba-form-field-item.ba-alert .ba-form-checkbox-wrapper label.ba-form-checkbox > span {
border: 2px solid #FC52A8 !important;
}

.ba-alert.ba-forms-authorize-field-wrapper input[type="text"],
.ba-alert.calendar-field-wrapper input[type="text"],
.ba-alert .upload-file-input,
.ba-alert .ba-field-container select,
.ba-alert .ba-field-container textarea,
.ba-form-calendar-field:not(.ba-form-calendar-field) .ba-alert .ba-field-container input[type="text"],
.ba-alert .ba-field-container input[type="text"],
.ba-alert .ba-field-container input[type="number"],
.ba-alert .ba-field-container input[type="password"],
.ba-alert .ba-field-container input[type="email"]{
box-shadow: inset 0px 0px 0px calc(2px - var(--field-border-width)*var(--field-border-right)*var(--field-border-left)*var(--field-border-bottom)*var(--field-border-top)) #fc52a8;
}



The Frames of the fields are still orange.

Regards,
Sebastian
Attachments:

9 months 1 week ago #9

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
You need to add !important
.ba-alert.ba-forms-authorize-field-wrapper input[type="text"], .ba-alert.calendar-field-wrapper input[type="text"], .ba-alert .upload-file-input, .ba-alert .ba-field-container select, .ba-alert .ba-field-container textarea, .ba-form-calendar-field:not(.ba-form-calendar-field) .ba-alert .ba-field-container input[type="text"], .ba-alert .ba-field-container input[type="text"], .ba-alert .ba-field-container input[type="number"], .ba-alert .ba-field-container input[type="password"], .ba-alert .ba-field-container input[type="email"] {
    box-shadow: inset 0px 0px 0px calc(2px - var(--field-border-width)*var(--field-border-right)*var(--field-border-left)*var(--field-border-bottom)*var(--field-border-top)) #fc52a8 !important;
}



Regards,
Vyacheslav, Balbooa.com

9 months 1 week ago #10

  • Sebastian's Avatar
  • Sebastian
  • Posts: 93
Works, thank you!
Is this also possible for the frames of the Radio Buttons?
These are still orange
Attachments:

9 months 1 week ago #11

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
You need to use this css code
.ba-form-page .ba-alert .ba-checkbox-wrapper .ba-form-radio span:before, 
.ba-form-page .ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span, 
.ba-form-page .ba-alert .ba-checkbox-wrapper .ba-form-radio span:before, 
.ba-form-page .ba-alert .ba-checkbox-wrapper .ba-form-checkbox > span, 
.ba-form-page .ba-form-acceptance-field .ba-alert label.ba-form-checkbox > span, 
.ba-form-page .ba-form-radio-field.ba-alert .ba-form-checkbox-wrapper .ba-form-radio span:before, 
.ba-form-page .ba-form-field-item.ba-alert .ba-form-checkbox-wrapper label.ba-form-checkbox > span {
    border: 2px solid #FC52A8 !important;
}

Best Regards,
Vyacheslav, Balbooa Support Team

9 months 1 week ago #12

  • Sebastian's Avatar
  • Sebastian
  • Posts: 93
THANKS!! :) :)

9 months 1 week ago #13

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
You are welcome ;)

9 months 1 week ago #14

  • Dave's Avatar
  • Dave
  • Posts: 995
Really? Does this need to be this complex of a solution? Why can't this be part of the design options?

6 months 3 weeks ago #15

  • Björn's Avatar
  • Björn
  • Posts: 46
It would be nice to have style options for this.

6 months 3 weeks ago #16

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 23440
Hello

We will consider your offer
Let us know if you need more assistance!

Best Regards,
Vyacheslav, Balbooa Support Team
Powered by Kunena Forum