Skip to Content
0

How to Change the Sorting Icons Color of Cross Tab in SAP Design Studio

Dec 22, 2016 at 09:17 AM

277

avatar image
Former Member

Hi

Please I need Help ASAP for Changing the color of the sorting icons (Up & Down) from Black to White

This is Cross tab using SAP Design Studio 1.6

I

capture.png (22.3 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Tammy Powlas
Dec 22, 2016 at 11:20 AM
0

I am not sure how you built the cross tab, but consider building one in .m mode with High Contrast theme (no CSS used):

If you built it the other way (not using m mode) you could try this CSS (high contrast black theme) (borrowed from SAP Learning Hub):

.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault, 
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault
{
color:white;
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#008FD3',endColorstr='#0076CB',GradientType=0);
}


Result


1high.jpg (116.9 kB)
2mob.jpg (102.6 kB)
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Dec 22, 2016 at 11:36 AM
0

Thank you for your Response ,

I'm Not Using (M Mode) but the Sorting Arrows not working there Colors is Still black as it's Default .

Any Advice or If they have a certain CSS function to set color for it ??

Regards

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Did you try the CSS code I included above?

0
Markus Hagedorn Dec 22, 2016 at 12:59 PM
0

Hello!

You could try using the following CSS script:

.sapzencrosstab-ExpandNode

{

background-image:url(<insert Data URI here>);

background-size: 100% 100%;

}

.sapzencrosstab-CollapseNode

{

background-image:url(<insert Data URI here>);

background-size: 100% 100%;

}

.sapzencrosstab-HeaderCellSortNone

{

background-image:url(<insert Data URI here>);

background-size: 100% 100%;

}

.sapzencrosstab-HeaderCellSortAsc

{

background-image:url(<insert Data URI here>);

background-size: 100% 100%;

}

.sapzencrosstab-HeaderCellSortDesc

{

background-image:url(<insert Data URI here>);

background-size: 100% 100%;

}

You would need to insert the data URI of the edited images (in this case, you would be changing them to white). The background-size attribute is used to force the images to fit the display, if the source images used are larger.

For help accessing the original icons used, you could take a look at the following blog post:

CSS Tips & Tricks: Customizing Radio Buttons and Check Boxes in SAP BusinessObjects Design Studio – Part 1

As for converting the images to URI, you could turn to the online converter http://duri.me.

Markus

Share
10 |10000 characters needed characters left characters exceeded