Skip to Content
avatar image
Former Member

Custom CSS does not work when a Theme is selected

Hello all,

I am currently using the "High Contrast Black" theme to set all the text in the Dashboard to be white. The issue is that when I modify the CSS for the CrossTab, nothing happens. Switching it back to the "Platinum" theme, it works as expected. I am currently on DS1.6. My two follow up questions:

1. Is it possible to set the overall text to white instead of black when I am in the "Platinum" theme?

2. Is it possible to change the default CSS for standard components when using themes other than "Platinum"?

CSS Code:

.sapzencrosstab-DataArea, .sapzencrosstab-RowHeaderArea, .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-ColumnHeaderArea, .sapzencrosstab-Crosstab, .sapzencrosstab-TableDivBackground,
.sapzencrosstab-DataCellAlternating, .sapzencrosstab-HeaderCellAlternating, .sapzencrosstab-DataCellDefault,
.sapzencrosstab-HeaderCellDefault {
    background: transparent !important;
}


Theme: High Contrast Black - does not work even when appending !important to the end of the code

Theme: Platinum - Works as expected but all the text in the dashboard becomes black

Thanks,

Hanks

high_contrast.PNG (47.2 kB)
platinum.PNG (185.8 kB)
Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    Apr 12, 2016 at 10:02 PM

    Hanks:
    Are you using Design Studio 1.6?

    First question is yes, see below

    .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault, .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault

    {

    white-space: normal;

    word-wrap: break-word;

    color:white;

    }

    I changed the above to High Contrast Black - see below

    .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault, .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault

    {

    white-space: normal;

    word-wrap: break-word;

    color:white;

    }

    .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellTotal, .sapzencrosstab-DataArea .sapzencrosstab-DataCellTotal{

    background-color: #9e9e9e;

    background-image: linear-gradient(to bottom, #9e9e9e, #454545);

    }

    It seems to read it OK

    I am on Design Studio SP1


    hanks2.png (7.2 kB)
    hanks.png (30.0 kB)
    hanks3.png (30.1 kB)
    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hi Tammy,

      My first question was actually regarding the overall application text color but I won't need to do that anymore, now that I have the background working in High Contrast Black mode.

      I originally did this:

      .sapzencrosstab-DataArea {
          background: transparent !important;
      }
      
      
      .sapzencrosstab-RowHeaderArea {
          background: transparent !important;
          
      }
      
      .sapzencrosstab-HeaderCellDefault {
          background: transparent !important;
      }
      
      
      .sapzencrosstab-ColumnHeaderArea {
          background: transparent !important;
          
      }
      
      .sapzencrosstab-Crosstab {
          background: transparent !important;
          
      }
      
      .sapzencrosstab-TableDivBackground {
          background: transparent !important;
      }
      
      .sapzencrosstab-DataCellAlternating, .sapzencrosstab-HeaderCellAlternating {  
          background: transparent !important;
      }  
      
      .sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault {  
          background: transparent !important;
      }  
      
      

      But after changing it to append everything together, it reads ok.

      .sapzencrosstab-DataArea, .sapzencrosstab-RowHeaderArea, .sapzencrosstab-HeaderCellDefault, .sapzencrosstab-ColumnHeaderArea, .sapzencrosstab-Crosstab, .sapzencrosstab-TableDivBackground, .sapzencrosstab-DataCellAlternating, .sapzencrosstab-HeaderCellAlternating, .sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault {
          background: transparent !important;
      }