6
Views
5
Comments
Solved
How to change background color of "Section" Element?
Question

Hi, how do I change the background color of a "Section" element? (particularly the title). I am unable to edit the styles in the editor? Thanks:

mvp_badge
MVP
Rank: #75
Solution

Hi Fadi,

I guess in the mentioned case you are not using the SectionGroup widget instead, you are using the Section widget. There will be a slight change/difference in the solution suggested by Carlos.

Implementation Steps:

  • Define the Section widget's ExtendedClass property with custom className value i.e. "customSection" as shown in the image below
  • Add the below-mentioned CSS style rules in the respective screen StyleSheet section
.customSection .section-title {
    background: yellow;
    border: 1px dotted red;
}

.customSection .section-title > div {
    color: green;
}

See this sample app  SectionStylingDemo

Hope this helps you!


Kind regards,

Benjith Sam

Rank: #184
Solution

Hi Fadi,

is this what you want?

.section-group .section-title {
    background-color: blue;
}

Hope I could help you

Cheers,

Carlos Lessa

mvp_badge
MVP
Rank: #75
Solution

Hi Fadi,

I guess in the mentioned case you are not using the SectionGroup widget instead, you are using the Section widget. There will be a slight change/difference in the solution suggested by Carlos.

Implementation Steps:

  • Define the Section widget's ExtendedClass property with custom className value i.e. "customSection" as shown in the image below
  • Add the below-mentioned CSS style rules in the respective screen StyleSheet section
.customSection .section-title {
    background: yellow;
    border: 1px dotted red;
}

.customSection .section-title > div {
    color: green;
}

See this sample app  SectionStylingDemo

Hope this helps you!


Kind regards,

Benjith Sam

Rank: #754

Thank you both, this solved the problem!

mvp_badge
MVP
Rank: #75

You're welcome, Fadi

Glad to help you :)


Kind regards,

Benjith Sam

Rank: #184

Welcome, good we could help. good code.

Cheers,

Carlos Lessa