CSS for specific fields not working

  • Resolved kls

    (@katiesutton)


    9 years, 8 months ago

    Hi – I’m trying to change the background color of my labels using
    .ninja_forms_field_13_label {background-color:blue;} for example. I can’t seem to make this work. Also tried .ninja_forms_field_13_div_wrap and other permutations. If I just use .label-above label {background-color:blue; I can change ALL of the labels (that are above input fields), but for ease of the user I want different labels to be different colors.
    Can you help me?
    Also, in any event, if I put custom css in the custom css box on the individual field it does not work at all, I have to put it in my theme’s stylesheet.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello Katie,

    I would suggest you to use the ID of the element rather than the class so you can target it very specifically.

    Also, there’s always the option to add a class to the field in the backend then use that class in the stylesheet.

    Thread Starter kls

    (@katiesutton)

    Oh good grief, of course.
    For anyone else having this problem who is not familiar with CSS, this means I should have used THIS code:
    #ninja_forms_field_13_label {background-color:blue;}
    The hash tag is used for id elements, not the period.
    Snow on the first day of Spring scrambling my brain. Thanks!

    Thread Starter kls

    (@katiesutton)

    Resolved!

    You are welcome, Katie. It happens when people forget how to identify a class or an ID of an element in CSS. ??

    By the way, I noticed you used the word ‘blue’, I want to let you know that you can use hex codes if you want a specific shade of blue.

    You have snow?! Nice!

    I am glad the topic is resolved.

    Sometimes with Ninja Forms you have to use a very long string of selectors. I often wrap a form in a very specific <div> to make my form more specific than the code in the plugin. Of course, if their CSS is in the database, instead of in the files, the puzzle complexity is compounded.

    @nora, you don’t really have to use long string of selectors as you just really need to use the form id as the primary selector then from there you might only need one or two more selectors then you are good to go.

    Besides, if you specify a custom class for any specific field in the backend, it makes it easier to target it via CSS. ??

    Good comments respectyoda!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS for specific fields not working’ is closed to new replies.