Skip to Content

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

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)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Dec 22, 2016 at 11:20 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 22, 2016 at 11:36 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 22, 2016 at 12:59 PM

    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

    Add comment
    10|10000 characters needed characters exceeded