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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Ribbon custom css

Thread ID:

Created:

Updated:

Platform:

Replies:

111124 Sep 9,2013 01:22 PM UTC Jan 30,2014 09:08 AM UTC ASP.NET Web Forms (Classic) 5
loading
Tags: Tools
Cédric Legrand
Asked On September 9, 2013 01:22 PM UTC

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 [Syncfusion]
Replied On 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.

 

<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
Replied On September 18, 2013 12:52 PM UTC

Thanks for your support, it is more clear now.


Varalakshmi R.S [Syncfusion]
Replied On 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.

Regards,

Varalakshmi


pasc
Replied On January 28, 2014 12:49 PM UTC

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

Ezhil S [Syncfusion]
Replied On 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. 

<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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;