Ribbon custom css

[Cédric Legrand]

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

 

 

 

 

[Sunil Prabakar C]

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.

 

<Code>

 

[ASPX]

 

<syncfusion:Ribbon ID="Ribbon1"  ClientObjectId="ribbon" ShowToggleButton="false" CustomCSS="~/Styles/Ribbon.css" runat="server" ApplicationMenuColor="#F9A403" ApplicationMenuType="ApplicationMenu" ApplicationMenuText="File" ExpanderClientClick="expandclick" Width="850px">

 

</Code>

 

For your convenience we have prepared a sample to exhibit this behavior and it is available in the following link.

 

RibbonCustomCSS.zip

 

Could you please let us know do you require  Ribbon control styles to look like a TabStrip?

 

Regards

Sunil Prabakar C

[Cédric Legrand]

Thanks for your support, it is more clear now.

[Varalakshmi R.S]

Hi Cedric,

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

Regards,

Varalakshmi

[pasc]

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

[Ezhil S]

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. 

<code>

[ASPX]

<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">

[MASTER]

                               <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

</code> 

Please download the attached sample prepared using CustomCSS for ribbon control. 

Regards,

Ezhil.S

Ribbon_f111124_1dffbf2c.zip