CSS continued, learning from answers from Victor

[jeroenvandera]

In some recent discussions about CSS a very useful answer by Victor Gabriel Saiz Castillo. Got me intrigued. He was able to alter the layout properties of the components by looking up the css classes.

In this blog I followed his steps and was able to alter the inner layout of a crosstab.

At first I created a standard crosstab and rendered this on the BI Platform on Google Chrome.

After I did that I used the key combination <CTRL><SHIFT><J>

You get a lot of code of what the site is doing., When you scroll upwards you get to the part where the CSS is loaded for the standard theme.

After double clicking on the CSS you see all the classes within sapzencrosstab.

And now for the test. I’ve used these classes for my own custom css and applied it to my application

This is the code I added into the CSS. I looked up these classes in the CSS code above.

.sapzencrosstab-Crosstab {

  border-spacing: 0;

  font-family: Tahoma, Arial, Helvetica, sans-serif;

  font-size: 8px;

  border-collapse: separate;

  line-height: normal;

}

.sapzencrosstab-DataCellAlternating,

.sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {

  background-color: #008B8B;

}

The font size of the numbers is decreased and the alternating color for the rows is changed and this is the result.

Let's render this crosstab with these new CSS settings

Using this method you can alter every part of the layout of a crosstab. Follow the steps described to look up the part you want to change and add this into your custom CSS file. Changing the properties of that class will result in change in the datasource.