Changing font size and color of the matrix labels

  • shardwick
    Asked on September 15, 2015 at 5:36 PM
    I just need to make the three Quality of Food, Accommodations of Diets and Efficiency and Friendliness a little larger and bolder. Can't see where to do that? For font choices? bold, color, etc.
  • Ben
    Replied on September 15, 2015 at 5:46 PM

    If you have used both codes that I have given on the previous thread, you have already used the CSS that changes this so here it is again:

    li[data-type="control_matrix"] > label {
        font-weight: bold;
        margin-bottom: -20px;
        margin-top: 10px;
    }

    Now, I made it bold already by setting font-weight: bold;. You can set that to normal and bolder instead.

    To change the size, you can do that with font-size: 16px; - just modify the number part of it to adjust the size you want to have.

    To change the color we just add color: red;.

    So based on what we have so far, if we want to change the font to be as bold as possible (bolder) and what the font size to be of 16 pixels and of the blue color, we would use the following:

    li[data-type="control_matrix"] > label {
        font-weight: bolder;
        font-size: 16px;
        color: blue;
    }

    Once you make this change you might need to change some things like the margin that was set in the earlier CSS code, but this is just part of the process and we can help you with this if needed (to make it sit on the fields in the same or similar manner).

  • shardwick
    Replied on September 15, 2015 at 6:21 PM

    I added them, nothing happens?!

  • shardwick
    Replied on September 15, 2015 at 6:24 PM

    Ok, when I open with other link, I see the changes, but that is not even on my acct. under forms?

     

  • shardwick
    Replied on September 15, 2015 at 6:26 PM

    Background of the form should be white.

    Does the blue match the POPCS blue?

  • jonathan
    Replied on September 15, 2015 at 11:04 PM

    I assume this is the form http://www.jotform.us/form/52560981507156. Please let us know if not.

    I checked the form on my browser and I can see it like this

    Changing font size and color of the matrix labels Image 1 Screenshot 30

     

     

    The form http://www.jotform.us/form/52560981507156 is on your account  shardwick  . Are you saying it is not on your My Forms http://www.jotform.com/myforms/ page?

    The Matrix label color blue it seems is not similar to the blue color in the header image 

    Changing font size and color of the matrix labels Image 2 Screenshot 41

     

    Can you please confirm that you wanted them to be the same instead?

    We will adjust the CSS to match the color you prefer.

    We will wait for your updated response.

  • shardwick
    Replied on September 15, 2015 at 11:13 PM

    Oh my goodness, thank you for responding...I have been at this all day, crazy!!!

    Yes, I want the entire form white. We are using the form in hard copy format. Later, after we are done with the site visits, some folks will use it online. For now, I am just printing them. so yes white :)

    Yes, want the blue to be the same as the POPCS, but it can also just be black. It shows me blue, but prints black, not a big deal.

    I need the darn POPCS logo to go over the plate. I wanted the red lines from the plate on the outside, but if too hard, no big deal, just as long as it's over the existing image the the red banner on each side. I can't figure out how to do this, I've adjusted everything and I'm just messing it all up.

    Is there any way to get the entire form on one page?!

    THANK YOU SO MUCH!!!!

  • jonathan
    Replied on September 16, 2015 at 12:40 AM

    Yes, want the blue to be the same as the POPCS, but it can also just be black. It shows me blue, but prints black, not a big deal.

    Please refer to your jotform http://www.jotform.us/form/52578680494166

    I made the Matrix label colored black instead.

    And image logo on top of each other was already set

    Changing font size and color of the matrix labels Image 1 Screenshot 20

     

    For now, let us close this thread since we have already completed what the thread was about.

    I know you have further inquiry about different things that needs to be done on the styling of yoru form. We will attend to them separately. 

    Example this https://www.jotform.com/answers/662817-Adding-image-over-another-image-on-the-form

     

    Thanks.