Spreadsheet to Form Widget: Change color of the valid/invalid code message

  • AgilityAssoc.Canada
    Asked on September 22, 2018 at 10:36 AM

    Hi,

    I am using custom code for the sheet 2 form widget one form 80704754652964.

    I have a problem with the text that appears when a value entered is valid or not, It is so dark against my red background that it is almost invisible. I want an invalid entry text to show up in yellow and a valid text in #00FF00. Below is my current custom code. Can you help me with this please.


    /*  Button Effects */

    #autofill

    {

    background-color:#035878;

    color:white;

    border: 2px outset ;

    border-radius: 6pt;

    width:150px;

    text-align:center;

    font-weight: 600;

    margin: auto 25% ;

    }

    #access-code

    {

    margin: auto 35% auto 38%;

     border: 1.5mm ridge #dddddd !important;

    color: #555 !important; 

    padding: 4px 1px 2px 1px !important;

    background-color: white !important;

    height: 32px !important;

    width: 90px !important;

    max-width: 320px !important;

    border-radius:6px;

    -moz-box-sizing: border-box !important;

    -webkit-box-sizing: border-box !important;

    box-sizing: border-box !important;

    text-align: center;

    }

    #autofill:hover

    {

       outline: none !IMPORTANT;

       color: #FFFFFF !IMPORTANT;

        border: #dddddd 2px solid !IMPORTANT;  

    background-color:#0398A9;

    font-weight: BOLD;

    } 

     Regards, Robert

  • Victoria_K
    Replied on September 22, 2018 at 2:01 PM

    Hello Robert,

    Can you please clarify if you want to style this warning message? 

    1537639264Trial Application 2018 09 22 2 Screenshot 10

  • AgilityAssoc.Canada
    Replied on September 22, 2018 at 4:43 PM

    Hi,

    Yes I want to make easier to read.

    Robert

  • Mike
    Replied on September 22, 2018 at 6:53 PM

    We can change the color, but it will be the same color for the valid and invalid messages.

    Example:

    #message {
    color: yellow;
    font-size: 1em;
    }

    Spreadsheet to Form Widget: Change color of the valid/invalid code message Image 1 Screenshot 20

    Thank you.

  • AgilityAssoc.Canada
    Replied on September 22, 2018 at 10:00 PM

    Hi,

    That works just fine thanks, although 1em was rather large, used 12pt and it looks like you show, may be my injected css interfering???

    Regards, Robert

  • David JotForm Support Manager
    Replied on September 22, 2018 at 10:37 PM

    Try using "!important", example:

    #message {
    color: yellow;
    font-size: 1em !Important;
    }

    Hope that helps.

  • AgilityAssoc.Canada
    Replied on September 23, 2018 at 9:48 AM

    Hi,

    I received this text on email from JotForm about this thread Sept. 22 2018, 11:22 PM

    Answered by aekapong1

    ขอบคุนที่ทำไห้รู้เเระเข้าใจในการทำงาน แทงบอลออนไลน์

    Translated means something like:


    Thank you for knowing I understand the work. Article.


    Strange it is not showing here though. Must have been deleted

    It is likely nothing but I just thought you might want to know about it. 

    Regards, Robert

  • Mike_G JotForm Support
    Replied on September 23, 2018 at 10:00 AM

    The username belongs to an account which was banned because of posting spam messages in the support forum. Apparently, the message you received is a spam which was automatically removed when the account was banned.

    If you have other questions or concerns, please feel free to let us know.

  • AgilityAssoc.Canada
    Replied on September 23, 2018 at 10:41 AM

    Hi Mike,

    I thought that might be the case.

    I found this css code that a colleague of yours created for me some time ago. It allows me to color my text based on results.

    Just thought it might be of some value.

    Best, Robert

    #message

    {font-size: 12pt;font-weight:700;}

    div[style*="accept"] 

    { color: #44FF66 !IMPORTANT;}

    div[style*="delete"]

     {color: yellow !IMPORTANT;}

  • Mike_G JotForm Support
    Replied on September 23, 2018 at 10:59 AM

    Thank you for sharing the CSS codes with us, we appreciate it. It could really be helpful if another user would ask for the same concern.