Customization of Ribbon tab buttons

Customization of Ribbon tab buttons

Posted by: ivaylo.kostov on 23 January 2022, 8:50 pm EST

• 

  ivaylo.kostov

  • Post Options:
  • Link
    Copy

  Posted 23 January 2022, 8:50 pm EST - Updated 3 October 2022, 12:27 am EST

  Is it possible to customize or add a class to the ribbon tab buttons?
  
  Like for example, to make the HOME button green or any other color and change the text color, like the FILE button?
  
  

  

  705×279 19 KB

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 24 January 2022, 5:38 pm EST

  Hi,
  
  Ribbon tab buttons are general HTML Buttons. You can add class/customize the style on these buttons like any other HTML element. Example: For Changing the background color of File Button use:

  .gc-ribbon-bar .ribbon-navigation .fileButton { background-color: blue; }
  For changing the background color of Home Button use:
  .gc-ribbon-bar .ribbon-navigation .ribbon-navigation-item[data-id="home"] { background-color: red; }
  

  Please refer to the sample and let us know if you face any further issues. The styles are added in the styles.css file: https://jscodemine.grapecity.com/share/XnF2oFY3FEiAEjVRn9cohg/
  
  Regards.