Example: Modify the skin to hide objects

Identify the Document Object Model (DOM) location in which to make the change.

1. Navigate to the page that has the element to be hidden or edited

2. Right-click the element and select Inspect to open the browser's developer tools (F12 in most browsers).

3. Check the class or tag name of the current element and the ones enclosing it, to create the selector needed to identify the exact element to be affected, and craft the CSS modification.

4. Find the enclosing selectors, by either scrolling up the DOM structure looking for likely elements with defining attributes, or use the summary at the bottom of the DOM list (more specific tag.classes are listed to the right, less specific, meaning higher in the DOM, to the left).

For example:

To hide three of the buttons for all users, in every WebUI app (this merely hides the text, while the button is still left visible, but without content - different browsers process this differently, some vertical white space may be rendered):

li[data-action="update"], li[data-action="abstain"], li[data-action="delegate"] {
         
  display: none;
}

To make that selector specific for Approvers in the Requests app:

.appActions [data-action="approve"] [data-content-id="update"] {

  display: none;

}

Or even:

.appActions [data-action="approve"] [data-content-id="update"], .appActions [data-action="approveMulti"]
            [data-content-id="update"] {
         
  display: none;
}

For a quick summary on css selectors, search the web or see https://www.freecodecamp.org/news/css-selectors-cheat-sheet/

Make changes in the instance's design/custom/styles-custom.scss for direct changes, or for components, in the component's ui\styles-component.scss .

Generate and Install the skins .

Test to ensure that only the object you wanted hidden is hidden, and not other objects on other application panels.

Optional: Compile all other language skins you may have.

If the instance is provided in more languages than English, repeat step 3 for each language, and make sure the en-us skin is compiled last (in order to catch any changes made to the language selection list pop-down).