[SOLVED] overlib and validation Colors in Registration Form

13 years 4 months ago #148103 by josevelas
Well, to be honest, I had let it be just as it came... I had stopped worrying about that.

@Krileon: Sorry, dude, I hadn't thanked you for your help.

@Startup: I'm just playing with it, changing the lines Krileon suggested... It's a little pain in the 4$$

So, this is what I'm doing:

1. Go to components/com_comprofiler/comprofiler.html.php

2. Krileon said

"(go) to the very beginning"

. As a matter of fact, there are several bunches of code scattered throughout the entire php file that need to be changed. So, be patient and DEFINE A PHP VARIABLE with the color you want (I defined [code:1]"$ErrorColor='#FFCCCC'"[/code:1])

3. Due to var context issues, put the php where you define that a variable ahead in the file. I put it around line ~1400, but I guess it's not the ideal place.

4. Change EVERYTHING that deals with [code:1]'.background = "red"'[/code:1] or similar pieces of code, to [code:1]'.background = "<?php echo $ErroColor; ?>"'[/code:1]

5. Regarding your specific problem: I'm having it too. But I know where the problem is.

Around line ~1400, you will find a code similar to this:
[code:1]"} else if (typeof(me)!='undefined' && me.style.backgroundColor.slice(0,3)=="red"«») { me.style.backgroundColor = cbDefaultFieldBackground;"[/code:1]

This is what turns your color back to the default.
But it has to check that it's not set on the default value. So I gave it a little turn, and changed it to check exactly that, so something like:
[code:1]"} else if (typeof(me)!='undefined' && me.style.backgroundColor!=cbDefaultFieldBackground) { me.style.backgroundColor = cbDefaultFieldBackground;"[/code:1] should do good.

Remember to change it not just for the 'username', but for all the fields.

Hope this helps you out.

Please Log in to join the conversation.

13 years 4 months ago #148153 by krileon
There's no need to make core edits. To override an inline style just add more weight by adding more classes or using the !important tag (won't work in older releases of IE!). Example as follows.

Weight:
[code:1]
html body #content div .error {
background-color: blue;
}
[/code:1]

Tagged:
[code:1]
.error {
background-color: blue !important;
}
[/code:1]

You can use either/or (whichever works, I prefer !important, but IE5 and maybe 6 doesn't like it). Of course change the class name or to an ID as necessary or add more classes with commas link the following example.

[code:1]
.cb_result_error,
.fieldError,
.cbValidationError input,
.cbValidationError .titleCell,
.error {
background-color: blue !important;
}
[/code:1]


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

13 years 4 months ago #148162 by josevelas
Thank you Krileon,

Well, actually that's how I think I's supposed to be. Nonetheless, when I take a look at my .../com_comprofiler/plugin/templates/MY_TEMPLATE/template.css file, It doesn't seem to work.

Why? Because the class qualifiers of the input boxes are: "required inputbox". They are not changed to "error" once they are invalidated.

It seems the styles ae changed by the javascript directly (not the class, but the colors).

Maybe there's a small update of CB that I missed, but until my version (CB: 1.2.3) It doesn't work as you say.

Cya.

Please Log in to join the conversation.

13 years 4 months ago #148261 by krileon
I see, yes I believe the style is applied directly by JS. You should still be able to target it and override it with something like the following.

[code:1]
.inputbox[style="background-color: red;"] {
background-color: blue !important;
}
[/code:1]

Haven't confirmed this, but it's worth a shot as you can target elements with specific attributes.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

13 years 4 months ago #148320 by startup
Hi Krileon,

that would be a nice and clever way to override this behaviour but it seems not to work.

This is my line:

.fieldCell input[style=background-color: red;] {background-color:blue !important;}

Any ideas why the above line is not working?

With this line:

.fieldCell input {background-color:blue !important;}

I can override the style but in all cases. So the inputbox has always a blue background.

Thanks
Frank

Please Log in to join the conversation.

13 years 4 months ago #148322 by startup
Hi!

Just found out how to do the trick:

.fieldCell input[style*="background-color: red;"] {background-color:blue !important;}

The attribute selector was wrong ...

Thanks for your great support and pointing to the right selection.

Cheers
Frank

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.218 seconds

Facebook Twitter LinkedIn