Custom ribbon

Is there any way to use a custom ribbon rather than trying to modify the out-of-the-box one?

Alternatively, I can modify the ribbon, but need to remove a tab and rename the Home tab to something else. Is this possible? I also have to group buttons differently, remove some buttons, and resize others (mostly to smaller icons/buttons). 

Parents
  • In theory you can use CSS to hide the ribbon, create something completely new, and use our API to execute actions on your new ribbon. Creating a completely custom-built UI can be quite some work though, so I would advise you to first try to see what you can do with our ribbon.

    So to address the things you want to do separately:

    • Renaming the home tab is not possible trough configuration.
    • Completely removing a tab is not possible trough configuration, but it can be hidden by applying display: none; to the correct class in CSS.
    • Grouping buttons differently is possible for most buttons (this means hiding the default one, and recreating the button as a new button)
    • Resizing buttons is possible for most buttons (again, this means hiding the original button, and recreating the button with a different size)

    An example:

    <x:overlay xmlns="http://xopus.com/2009/lui">
    <!-- hide default spellchecker button -->
    <ribbon-normalbutton id="SpellCheckerButton" available="false"/>
    <!-- add big spellchecker button next to Finish Editing button -->
    <ribbon-bigbutton id="CustomSpellCheckerButton" before="FinishEditingButton" command="SpellCheckerCommand" iconsrc="bigicon.png" />
    </x:overlay>

    The id and names of the commands can most of the time be found by inspecting the generated html using the web developer tools in a browser. We are in the process of making some of this easier, so if there is anything in particular you have trouble with, let us know and we can tell you if it is possible, and how.

Reply
  • In theory you can use CSS to hide the ribbon, create something completely new, and use our API to execute actions on your new ribbon. Creating a completely custom-built UI can be quite some work though, so I would advise you to first try to see what you can do with our ribbon.

    So to address the things you want to do separately:

    • Renaming the home tab is not possible trough configuration.
    • Completely removing a tab is not possible trough configuration, but it can be hidden by applying display: none; to the correct class in CSS.
    • Grouping buttons differently is possible for most buttons (this means hiding the default one, and recreating the button as a new button)
    • Resizing buttons is possible for most buttons (again, this means hiding the original button, and recreating the button with a different size)

    An example:

    <x:overlay xmlns="http://xopus.com/2009/lui">
    <!-- hide default spellchecker button -->
    <ribbon-normalbutton id="SpellCheckerButton" available="false"/>
    <!-- add big spellchecker button next to Finish Editing button -->
    <ribbon-bigbutton id="CustomSpellCheckerButton" before="FinishEditingButton" command="SpellCheckerCommand" iconsrc="bigicon.png" />
    </x:overlay>

    The id and names of the commands can most of the time be found by inspecting the generated html using the web developer tools in a browser. We are in the process of making some of this easier, so if there is anything in particular you have trouble with, let us know and we can tell you if it is possible, and how.

Children
  • I am actually trying to implement this now. Most of the big buttons are to become small buttons and need to be stacked to get down to one simple tab. With the example above, which by the way thank you for that, are there icon PNG files available with the buttons in different sizes? Not sure where to get these from. Where do the icon files exist in the installation? We want them to look like the default big buttons, just smaller.

    As an aside, I was able to hide the Insert tab with a configuration:

    <x:overlay xmlns="http://xopus.com/2009/lui">
    <ribbon-tab id="InsertTab" available="false"/>
    </x:overlay>

    I can hide the text for the Home tab if need be in JavaScript manipulating the HTML DOM.