Change Formatting of Individual Section/Collection Headers

replied on April 29, 2020

If you go through and add different classes to each section header, you can change their background colours.

For example, let's say I want a red, blue, and green:

.section-header-red .cf-section-header {
  background-color: red;
}
.section-header-green .cf-section-header {
  background-color: lime;
}
.section-header-blue .cf-section-header {
  background-color: #00aaff;
}

Then you apply whichever colour's class to the section header (in this example, red = section-header-red, green = section-header-green, and blue = section-header-blue):

You can also add "color" to the CSS to change the text colour:

.section-header-red .cf-section-header {
  background-color: red;
  color: white;
}

These will show up on the form when the user is filling it out and also should when it's saved to the repository.

1 1

replied on April 29, 2020

Thanks, Jim. This helps a lot. Can the same thing be done on Collection headers?

0 0

replied on April 29, 2020

The above method will colour the table and collection headers the same as their parent section's colour. To change them, you can use the following CSS, with the class names "table-header-red" and "collection-header-blue":

.table-header-red.cf-table-block .cf-section-header {
  background-color: darkred;
  color: white;
}

.collection-header-blue.cf-collection-block .cf-section-header {
  background-color: azure;
}

0 0

replied on April 29, 2020

Perfect! Thank you.

0 0

Question

Question

Change Formatting of Individual Section/Collection Headers

Replies

Sign in to reply to this post.