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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

CustomCSS with Ribbon Example

Thread ID:

Created:

Updated:

Platform:

Replies:

115775 Feb 5,2014 02:37 PM UTC Feb 6,2014 06:59 AM UTC ASP.NET MVC (Classic) 1
loading
Tags: Tools
Bobby Wood
Asked On February 5, 2014 02:37 PM UTC

Is there an example of the Ribbon using a CustomCSS? We know "how" to apply the CustomCSS but need an example to work with. The ThemeStudio does not include the Ribbon.

Ezhil S [Syncfusion]
Replied On February 6, 2014 06:59 AM UTC

Hi Bobby,

Thanks for your update.

We regret to let you know that Theme Studio does not have CSS regarding Ribbon Control. So to add CustomCSS for ribbon control, you have to prepare a CSS file which should include style definitions for the classes used in ribbon control creation. Now include the prepared CSS file that customizes the theme for the ribbon control and reference Style sheet into your page. Also include the image files referred for the CSS. We suggest you to add .CustomCSS() to ribbon control and also to GalleryView control separately if used in your ribbon control. Please refer the following code snippet.

<code>

[View]

@{Html.Syncfusion().Ribbon('ribbon').Title('Getting started').CustomCSS('Theme').Width(System.Web.UI.WebControls.Unit.Pixel(700)).Height(System.Web.UI.WebControls.Unit.Pixel(130)).AutoFormat(Skins.Almond)

          .ApplicationMenuType(AppMenuType.ApplicationMenu).ApplicationMenuText('File').ApplicationMenu(applicationMenu =>

          {

              applicationMenu.Add().Text('Save').SpriteCSS('Save');

              applicationMenu.Add().Text('SaveAs').SpriteCSS('saveas16');

              applicationMenu.Add().Text('Open').SpriteCSS('folder');

              applicationMenu.Add().Text('Close').SpriteCSS('folderclosed');

          })

@{Html.Syncfusion().GalleryView('galleryCopyRibbon').Items(item1 =>

        {

     item1.Add().ImageUrl(@Url.Content('~/Content/SyncfusionImages/GalleryView/Heading1.png'));

                   item1.Add().ImageUrl(@Url.Content('~/Content/SyncfusionImages/GalleryView/Heading2.png'));

                   item1.Add().ImageUrl(@Url.Content('~/Content/SyncfusionImages/GalleryView/Heading3.png'));

item1.Add().ImageUrl(@Url.Content('~/Content/SyncfusionImages/GalleryView/Intense.png'));                                       

}).PopUpHeight(System.Web.UI.WebControls.Unit.Pixel(100)).CustomCSS('Theme').ItemToShow(5).Width(System.Web.UI.WebControls.Unit.Pixel(200))

                                                .Render();}

[_Layout]

<link rel='nofollow' href='~/Content/CustomRibbon.css' rel='stylesheet' />

Note: “CustomRibbon.css” includes style definition for ribbon control classes like .ribboncontainer and .GalleryView

</code>

Please download the sample prepared to describe your requested feature from the following link:

Ribbon_118529.zip

Kindly let us know if you have further queries.

Regards,

Ezhil.S


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

;