Skip to main content
Nintex Community Menu Bar

I cannot seem to get CSS to apply to a repeating section.  I have the following within the Custom CSS:

[dir] .nx-theme-styles .nx-theme-page {

background-image: url(https://xxxxx.sharepoint.com/Style%20Library//Branding/img/imagename.jpg);

background-repeat:no-repeat;

background-position: center top;

width: 100%;}

.my_repeating {background-image:none; color:#FFEA00;background-color: #FFFFFF;}

The background image works fine for the whole form but then repeats within the Repeating section itself, making the text very hard to see.  

I add the “.my-repeating” to the CSS Class box for the repeating section and internal fields; I’ve also tried using ntx-repeating-section (without the dot) instead of .my-repeating within the Custom CSS but the form seems to ignore any custom CSS for repeating section:

Is this a known feature or am I missing something obvious?

Thanks!

Hi ​@gerardh,


To add the image to your page but not the repeating section, use this code:

 

[dir] .nx-theme-styles .nx-theme-page:not(.nx-repeating-section-container *) {

background-image: url(https://xxxxx.sharepoint.com/Style%20Library//Branding/img/imagename.jpg);

background-repeat:no-repeat;

background-position: center top;

width: 100%;}


See this section of the help files for more information.


Perfect, many thanks! Not sure how I missed that on the Help page.


Hi ​@gerardh,

Glad that the solution worked for you.
On a side note, if you want to follow your original path of changing the repeating section CSS, it can be achieved with the following code.
 

[dir] .nx-theme-styles .nx-theme-form .my-repeating .row{ 
background-color: #FFFFFF;
}