Boxes or shading on tables/sections

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Is there a way to put boxes around each table/section or maybe shade the backgrounds so the zones are clearly differentiated? I have two columns that each have several tables/sections and things run together visually. I suspect it could be handled with the proper CSS, but I'm not a developer. :-( Thanks!
Photo of Kerri Russ

Kerri Russ

  • 120 Points 100 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
You don't need to be a developer to use CSS!  Don't be afraid!  John did a developer talk this morning on the basics of using CSS to style skuid pages.  We'll get it up on the skuid Youtube page in the next day or two.  You should check it out. 
Photo of Kerri Russ

Kerri Russ

  • 120 Points 100 badge 2x thumb
I'll keep an eye out for it. This stuff is really important to some folks. Thanks.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Here is the video.

  
 

Hope it helps you out... 
Photo of Kerri Russ

Kerri Russ

  • 120 Points 100 badge 2x thumb
Yes, that was greatly helpful! I have TWO followups related to syntax on the css.

I used the following to set colors in the field editor column - worked great:

.nx-basicfieldeditor-column
.nx-basicfieldeditor-section-wrapper
.nx-basicfieldeditor-section-header { color: black; }

.nx-basicfieldeditor-column
.nx-basicfieldeditor-section-wrapper
.nx-basicfieldeditor-section {background-color: #F0E68C; }

.nx-basicfieldeditor-column
.nx-basicfieldeditor-section-wrapper
.nx-basicfieldeditor-item {background-color: #FFFFE0; }

Question #1) When I want to specify a colorset for the first section, I follow "nx-basicfieldeditor-column", etc by the suffix ":first-child". What suffix do I use for sections 2 or 3? I tried :not(:first-child) and also :second-child.

Question #2) I've been trying to do something similar for my column of TABLE components (related lists). I want to set font & background color for the column header row and for the detail rows. I've tried several combinations of field names/formats on this, but can't get it right.

.nx-pagebuilder-table
.nx-pagebuilder-wrapper
.nx-pagebuilder-table-header: { color: black; }

.nx-pagebuilder-table
.nx-pagebuilder-wrapper
.nx-pagebuilder-table {background-color: #F0E68C; }

.nx-pagebuilder-table
.nx-pagebuilder-wrapper
.nx-pagebuilder-item {background-color: #FFFFE0; }

Any insight would be very much appreciated. Thanks bunches!
Photo of Sasidharreddy myf

Sasidharreddy myf

  • 152 Points 100 badge 2x thumb
may be this will useful i am not sure...

 .nx-basicfieldeditor-section{background:none;}
 .nx-basicfieldeditor-item{background:none;}
 .nx-basicfieldeditor-column:nth-child(odd){background:#FFD79C;}
 .nx-basicfieldeditor-column:nth-child(even){background:#ADFDAC;}