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

Styling the Info Chart Feeding Panel component

$
0
0

The Info Chart Feeding Panel component allows to change the look of Info Charts at runtime. Here's a quick cheat sheet on which CSS classes to override in order to change its style.

 

Capture.PNG

 

The class .ui-state-highlight is the highlighted area when dropping is allowed (.ui-state-error when dropping is not allowed)

The default padding around a feeding-sortable-item is not centered, this should be fixed in a service pack.

 

Here is the full CSS used to achieve this result:

 

.feedTypeTitle{

background:#ddddff;

}

 

.feedTypeContainer.feedTypeTitle{

color:#5151ae;

}

 

.feedContainer.bucketContainer{

background:#ffffa8;

}

 

.feedTypeContainer.feedContainer{

background:#d3d3d3;

}

 

body>.feeding-sortable-item{

background:black;

color:red;

font-size:12px;

}

 

.bucketList.ui-state-highlight{

background:green;

}


.bucketList.ui-state-error{

background:red;

}

 

.bucketElement{

color:#1e6220;

}

 

.bucket{

color:#b32f61;

}


Viewing all articles
Browse latest Browse all 662

Trending Articles