Quantcast
Channel: SAP BusinessObjects Design Studio
Viewing all articles
Browse latest Browse all 662

CSS continued, learning from answers from Victor

$
0
0

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.

StandardCrossTab.png

 


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.

 

lookingupCSS.png


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


crosstabcss.jpg

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


result.jpg

 

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.


Viewing all articles
Browse latest Browse all 662

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>