Changing color matrix field areas

  • Profile Image
    YummyGarden
    Asked on August 30, 2012 at 08:31 PM

    How do you change the color of just the matrix and not the other form fields? I would also prefer that the color not be behind the rows and columns text either. How do I align the columns text to line up with the fields? See how it looks weird?

     


  • Profile Image
    jonathan
    Answered on August 30, 2012 at 10:49 PM

    Hi,

    There was already some CSS code injected on your form that makes it appear as such.

    Since you probably needed the current styling applied on the form, you may want to create a clone of it first, then start modifying the CSS codes. On the cloned form, you can start clean on the CSS, then gradually put back the styling you need.

    As it is now, the class .form-all was included in the CSS of the original form. This means that everything was being overidden by the code on that class.

    Anyway, I did test using your form. I remove first all the CSS code, and only applied this.

    .form-matrix-column-headers {

    background:

    url(http://fc00.deviantart.net/fs9/i/2006/039/c/c/Black_Stripes_by_iAmFreeman.jpg)

    repeat top left fixed;

    border: 1px solid #CCC;

    color: inherit !important;}.form-matrix-values {background:transparent !important;}.form-matrix-values .form-textbox {width: 80% !important;}

     

    This is the form.

    I am sure you can improvi it much better. Pleae inform us if you need further assistance.

    Thanks.

  • Profile Image
    YummyGarden
    Answered on August 31, 2012 at 12:11 AM

    Hello,

     

    I think there was a misunderstanding. Where is says Product/Service has a bluish gray backgound color as well as where the columns says Merchandise and Description also has the color behind the text. I wish for those areas only to be transparent.

    I also need  the columns Merchandise and Description to be better aligned over the fields, as they are far over to the left and not in the center.

    Thx

  • Profile Image
    fxr
    Answered on August 31, 2012 at 03:22 AM

    Try this CSS: 

    .form-matrix-column-headers,.form-matrix-row-headers{background-color:transparent !important; text-align:center;}

  • Profile Image
    YummyGarden
    Answered on August 31, 2012 at 11:40 AM

    That worked out perfectly!

    Thank you. However, the font is too dark to read now. How do I change the font color of just the matrix text? Also, when an applicant selects a product, the font changes from white to a darker color and is no longer visible. How do I fix that?

    THANKS!

  • Profile Image
    Goldo
    Answered on August 31, 2012 at 01:06 PM

    Add the below css to the existing ones:

    .form-matrix-column-headers{
    color: white!important;
    }
    .form-matrix-row-headers{
    color: white!important;
    }

    You can change white to any color you want.