Change a specific K2 smartforms View background colour

Recently, I was asked this question on how to change the background colour of a specific View in a K2 smartforms Form. Like the following:

Change specific View background colour
Change specific View background colour

How to change a specific K2 smartforms View backgound colour

I’ve done some research and testing, and here is the CSS that will do the trick:

The number 2 in the line “nth-of-type(2)”, means the 2nd View in the Form. So if you need to just highlight the 3rd View, change the value to 3 and you are done.

Where to put this piece of style?

If you have a custom Theme and you want all Forms using this Theme to have the same effect, then you should add this style to your Theme’s CSS file.

If you only have to  make the change on a specific form, you can use a hidden Data Label to apply the theme. This is how to do it:

  1. Add a Data Label to your Form.

    Step 1 - Add Data Label
    Step 1 – Add Data Label
  2. Add the following line to the Text property. Remember to update the row number.

  3. Uncheck the Visible property. We don’t need the user to see this value.

    Step 3 - Uncheck Visibile
    Step 3 – Uncheck Visibile
  4. Check the Literal property. We need the control to parse the style tag.

    Step 4 - Check the Literal property
    Step 4 – Check the Literal property
  5. Finish the Form and you are done.

 

So that’s how you change a specific K2 smartforms View background colour.

Have Fun!

Leave a Reply

Your email address will not be published. Required fields are marked *