Applying CSS to a scene instead of each view

Help Center Get Answers
1

Hi,

I have to build multiple pages each with 12 reports in the page and I am applying different CSS to these pages than others that use the same elements.

Is there a better solution than having to do the below in CSS with each view replicated? (I’m aware these are only 4 deep, but i will need to have to expand to 12 (1 report per month) - i got to doing 4 and thought there must be a better way lol!

/* 2023 Monthly Reports - Pivot Table */

#view_641 h3, #view_642 h3, #view_643 h3, #view_644 h3,
{ font-size: 20px; font-weight: 600; color: #24417c; }
#view_641 th, #view_642 th, #view_643 th, #view_644 th
{ font-size: 12px; font-weight: 500; color: #24417c; font-style: italic;}
#view_641 .kn-table, #view_642 .kn-table, #view_643 .kn-table, #view_644 .kn-table
{width: 75%; text-align: left; border: 2px solid #c29030 !important;}
#view_641 .kn-pivot-group, #view_642 .kn-pivot-group, #view_643 .kn-pivot-group, #view_644 .kn-pivot-group
{text-align: left!important; }
#view_641 .kn-pivot-calc, #view_642 .kn-pivot-calc, #view_643 .kn-pivot-calc, #view_644 .kn-pivot-calc
{text-align: left!important; }
#view_641 .kn-table_summary, #view_642 .kn-table_summary, #view_643 .kn-table_summary, #view_644 .kn-table_summary
{text-align: left!important; }
#view_641 td, #view_642 td, #view_643 td, #view_644 td
{text-align: left!important; }

I was hoping I could apply to a scene thus a page, but it appears now.

thanks as allways

Andrew

2

Hi @AndrewUK using the inspector for a scene with one pivot table:

Screenshot 2023-01-23 140256
Screenshot 2023-01-23 140256850×480 49.3 KB

Try targeting the #kn-scene_XXX div.kn-report item to apply CSS to every pivot table in that scene (replace XXX with your scene id). Example:

#kn-scene_XXX div.kn-report h3 {
    font-size: 20px;
    font-weight: 600;
    color: #24417c;
}
1 Like
3

amazing thanks Brad - just what i needed.