I browsed samples, online doc and forum posts without success.
I want to apply custom css styles to a ribbon.
I have set customcss property to the path of my style sheet, but i don't see any look customization like we have for the tabstrip.
Could someone help me?
Thanks for using Syncfusion products.
To apply the custom CSS styles to Ribbon control, you can use the “CustomCSS” property of Ribbon control .If we define custom css property for the control, then needed to define all the required css class because once we set the custom css property, control will not refer any core css classes. Kindly refer the following code snippet.
<syncfusion:Ribbon ID="Ribbon1" ClientObjectId="ribbon" ShowToggleButton="false" CustomCSS="~/Styles/Ribbon.css" runat="server" ApplicationMenuColor="#F9A403" ApplicationMenuType="ApplicationMenu" ApplicationMenuText="File" ExpanderClientClick="expandclick" Width="850px">
For your convenience we have prepared a sample to exhibit this behavior and it is available in the following link.
Could you please let us know do you require Ribbon control styles to look like a TabStrip?
Sunil Prabakar C
Thanks for your support, it is more clear now.
Thanks for the update and please get back to us if you require further assistance on this.
Thanks for your update.
To add CustomCSS with ribbon control, you have to create CSS files for ribbon in specific. Create a CSS file using ribbon classes to apply styles on the created ribbon control. Now include the CSS file to your application and add StyleSheet reference for the CustomCSS file. We suggest you to add CustomCSS property with the reference URL to ribbon control and also to GalleryView control separately if used in your ribbon control. Please refer the following code snippet.
<syncfusion:Ribbon ID="Ribbon1" ClientObjectId="ribbon" ShowToggleButton="false" runat="server" ApplicationMenuColor="#F9A403" ApplicationMenuType="ApplicationMenu"
ApplicationMenuText="File" Width="900px" CustomCSS="Styles/MyTheme.css">
<syncfusion:GalleryView CustomCSS="/Styles/MyTheme.css" ID="GalleryView1" Height="96px" Style="position: relative;
top: 7px;" Width="370px" ItemsToShow="4" runat="server" DisplayMode="GalleryView">
<link rel='nofollow' href="Styles/MyTheme1.css" rel="stylesheet" type="text/css" />
Note: MyTheme1.css file include styling properties using ribbon control classes lik .ribboncontainer and .galleryView
Please download the attached sample prepared using CustomCSS for ribbon control.