Skip to main content

Customizing the Composite Menu Styles

We can add CSS styles to the XData Style block of MenuComposite.cls.

Update the XData Style block of MenuComposite.cls to look like the following and then compile the class.

XData Style
<style type="text/css">
/*Styles for components in this composite component*/
  .title {
          background: #C5D6D6;
          color: black;
          font-size: 1.5em;
          font-weight: bold;
          padding: 5px;
          border-bottom: 1px solid black;
          text-align: center;
/* Default style overrides*/
/* Override default menu item style */
  a.menuItem {
         font-size: 0.9em;
         color: black;
  a.menuItemDisabled {
        font-size: 0.9em;
        color: black;

Note the following about the style definitions:

  • The first definition controls the style for the <html> component. It uses .title as the selector. This matches the id value of the <html> element.

  • The remaining CSS definitions override the default styles for the menuItem component.

FeedbackOpens in a new tab