Question

How do I change the background color of an entire section, not just the header?

Forms

Updated January 23

asked on July 26, 2024

I am looking to break up a long form that has a number of sections. I found a Answers suggestion that showed how to change the background color of a section header. In addition to the header, I would like to change the background color of the entire section.

I do not know the selector to use.

.green .cf-section-header {
  background-color: green;
}

0 0

Answer

SELECTED ANSWER

replied on July 30, 2024

To target the background color of the section itself, you should be able to just use:

.green {
  background-color: green;
}

1 0

Replies

replied on July 26, 2024 • Show version history

Modern designer:

.green .pane {
  background-color: green;
}

Classic designer:

.green ul {
  background-color: green;
}

If you have custom HTML in the section it may or may not change it's look as well.

1 0

replied on January 22 • Show version history

I played around a bit, and I was able to change the background by simply adding a CSS class on the Advanced tabs of blue, green, pink, or orange. The code was put in at the very start of the form for 10 differnt colors, allowing fast and easy design.

The code: .blue {background-color: #c1d8f7 !important;}

*Modern designer

1 0

You are not allowed to follow up in this post.

Question

Question

How do I change the background color of an entire section, not just the header?

Answer

Replies

Sign in to reply to this post.