Increasing Error Message Visibility

This topic contains 5 replies, has 3 voices, and was last updated by  jahusdtc 6 years, 10 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #415814

    jahusdtc
    Expired Member
    Post count: 162

    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.

    #415885

    Alex Rollin
    Moderator
    Post count: 27815

    Hello,

    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.

    #415936

    jahusdtc
    Expired Member
    Post count: 162

    Sure.
    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.

    #415937

    jahusdtc
    Expired Member
    Post count: 162
    This reply has been marked as private.
    #416007

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    It 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

    #416784

    jahusdtc
    Expired Member
    Post count: 162

    Thank 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.

Viewing 6 posts - 1 through 6 (of 6 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount