We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Ribbon custom css

Hello all,    

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?

Thank you





5 Replies

SP Sunil Prabakar C Syncfusion Team September 16, 2013 05:13 PM UTC

Hi Cedric,


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

CL Cédric Legrand September 18, 2013 12:52 PM UTC

Thanks for your support, it is more clear now.

VR Varalakshmi R.S Syncfusion Team September 18, 2013 12:55 PM UTC

Hi Cedric,

Thanks for the update and please get back to us if you require further assistance on this.



PA pasc January 28, 2014 12:49 PM UTC

I can't download the CustomCSS file.
Thanks for your Help
Kind Regards

ES Ezhil S Syncfusion Team January 30, 2014 09:08 AM UTC

Hi Pasc, 

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. 




Live Chat Icon For mobile
Up arrow icon