Increasing Error Message Visibility
This topic contains 5 replies, has 3 voices, and was last updated by jahusdtc 6 years, 9 months ago.
We have moved to a support ticketing system and our forums are now closed.
Open Support TicketTagged: Editing, Error messages, errors, readability, visibility, visible
-
AuthorPosts
-
February 4, 2018 at 1:21 am #415814
Places will only be edited by admins in backend of site.
Unfortunately, one of those admins is visually impaired, so we’re very conscious of the readability required for him.
I note there are two kinds of error messages.
One appears echoed into the page. I have enhanced the readability of it with CSS…otherwise one might try to move off the page without realizing info wasn’t saved.
Tried to put in red background, but the background extends all the way to the left margin and the field label itself! Seemed a little TOO visible.
Is there a way to limit that background?
Here’s CSS to increase visibility for regular message:
/* 2 kinds of error message on editing…
* 1 is the type shown on regular required fields…Category, Address, etc.
*//*Below makes a red box with 4 stars before error field…makes you notice it better*/
span.geodir_message_error::before,
span.geodir_message_error::after
{content: ‘****’!important;background:red!important; color: white!important;padding:2px!important;}
{content: ‘****’!important;background:red!important; color: white!important;padding:2px!important;}span.geodir_message_error::before{margin-right:5px!important;}
span.geodir_message_error::after{margin-left:5px!important;}/*Makes error message just bigger…if try to alter background, goes all way over to labels.*/
span.geodir_message_error{font-size:1.2em;}Second type of error messages I see are the ones seen when entering a website without http.
One gets the speech bubble effect. The website message says:
Please enter a valid URL including http://I see reference to this in custom_fields_input_functions.php and gedirectry-en_US.po,
But…how change the coloring of the bubble and letters within?
Is speech bubble created Using JS?What CSS can I use?
Tried to figure it out… but lost.
Can you tell me how?
Thanks in advance for any assistance.
February 4, 2018 at 1:44 pm #415885Hello,
can you give an example of the page and field where you see each of those types of errors?
thanks for helping us understand it more clearly.
February 5, 2018 at 12:01 am #415936Sure.
Above, I mention the php kind of messages are visible when you try to publish without putting in a category or an address. The normal kind of error message.The second “speech bubble” type of error message will pop up, say, when you enter a website as “Google.com” instead of “http://Google.com.”
You will see a very faint bubble with “Please enter a valid URL including http://”
Particularly the speech bubble version is faint and I’m not sure where to change color.
I can see fine and I didn’t really notice the speech bubble effect the first few times. It looks very classy, but is hard to see.
February 5, 2018 at 12:05 am #415937This reply has been marked as private.February 5, 2018 at 11:37 am #416007It looks like u solved the first part?
For the second ones, these are html5 validations and they are controlled by the browser, and they look slightly different in each browser, in most cases there is nothing you can do to style those.
Stiofan
February 8, 2018 at 7:49 pm #416784Thank you.
Once I knew the proper nomenclature for the “speech bubble thingies,” I wandered through web listings to learn about them.
The only helpful thing I ran across would be to create this functionality on my own. Not an exciting idea at present.
Hopefully, my visually impaired admin won’t need error messages because he will MAKE no errors! Here’s hoping!
Thanks for your explanation.
Possibly, he can use another browser. Some of them seem to display more visibly than others.
-
AuthorPosts
We have moved to a support ticketing system and our forums are now closed.
Open Support Ticket