Appearance and Styling in EJ 1 Angular Ribbon
8 Jun 20172 minutes to read
To apply styles refer to two files namely
When the file
ej.widgets.all.min.css/ej.web.all.min.css is referred, it is not necessary to include the files
ej.theme.min.css in your project as
ej.widgets.all.min.css is the combination of these two files.
Override default styles of Ribbon control by using its class name to customize it.
List of custom classes that are need to override styles. The following are specific class names you can use to modify styles and appearance in Ribbon.
e-js- used to represent element
ej-widgetcontrol, that is present at the container element of Ribbon control.
e-header- This class is applied to the header element of the Ribbon.
e-active-content-This class is applied to the active content of the Ribbon.
e-expandcollapse- This class is applied to the expand/collapse button in the Ribbon.
e-apptab- This class is applied to the application tab in the Ribbon.
Tabs & Groups
e-tab-This class is applied to the Tabs in the Ribbon.
e-groupdiv-This class is applied to the groups in the Ribbon.
e-active-This class is applied to the active or selected tab in the Ribbon.
e-contextualtabset-This class is applied to the contextual tab and contextual tab set in the Ribbon.
e-tooltipimg– Applies to custom tooltip and its icons settings.
e-gallerycontent- Applies to gallery items and custom items for collapse and expanded state.
e-expgallerydiv- Applies to gallery item button and navigation buttons of gallery.
e-gallerymenu- Applies to gallery custom items menu and button customization.
e-resizediv– Applies to resizing and its group button.
e-backstagetopicon– Applies to back stage top header.
e-backstageactive– Applies Backstage page side header and its contents.
Quick Access Toolbar
e-rbnwithqat- This class applied to the Quick access toolbar in the Ribbon.
e-rbnabove- This class applied to the top Quick access toolbar.
e-qatooldiv- This class applied to individual controls in the Quick access toolbar.
e-rbnbelow- This class applied to the bottom Quick access toolbar.