To tweak navigation buttons in navigation panel component

[Former Member]

http://scn.sap.com/community/businessobjects-design-studio/blog/2014/11/06/sap-design-studio-tips-tr...

Dear Experts,

In one of my design studio dashboard my user is asking to tweak the look and feel of two buttons present at the top in Filter and navigation panel components. These two buttons looks similar and creating confusion to top management user.

I tried to search this solution on SCN and got a post where I can hide a button out of row or column (link given on top), but I could not see any help in changing the look and feel of these two top buttons as in screenshot below -

could you please guide if we have any such CSS class where I can add code to make one of button a bit different. Any idea/help is appreciated.

Thanks & Regards,

Jiten

[former_member194504]

Hi Jiten

you can use this

.sapzenfilterpanel-ModeFilteringNavigation .sapUiSegmentedButton>span>.sapUiBtnS.sapUiBtnStd.sapzenfilterpanel-ShowNavigationButton, .sapzenfilterpanel-ModeNavigation .sapUiSegmentedButton>span>.sapUiBtnS.sapUiBtnStd.sapzenfilterpanel-ShowNavigationButton{
background-image:none !important;
}

you can replace the none with your own image URL or data URI.

Thanks,

Nithyanandam

[Former Member]

Thank you for the example and the help, sometimes people need to see an example one time to understand the best technique.

[former_member194504]

Hi Denise,

You can learn about how to find css and how to change it here

Thanks,

Nithyanandam

[TammyPowlas]

Hi - rather than someone supplying the CSS for you, have you tried running through the debugger, using F12, to determine the CSS to apply?  That way you can figure out the CSS for yourself in the future.