Advanced-skinning.md

Advanced skin changes using css

In this tutorial we'll update the application skin using the Theming capabilities.

We'll be using Visual Studio Code as editor and will use the lightweight setup using a fake backend with mock data.

You can find the code for this tutorial here

Prerequisites

1. You've completed the getting started guide
2. You've completed the Change the skin using the Theming capabilities tutorial
3. You are familiar with LESS and css

Starting the application in debug mode

See Starting the application in debug mode.

Injecting a custom stylesheet file

In order to some more advanced changes to the skin we'll create a new custom less file which we'll load as part of the application. This is considered to be more advanced and requires extra validation when upgrading your application.

1. Create a new directory inside the gui/src directory called custom-styles
2. Create a new less file called skin-overwrites.less inside this directory
3. Import skin-overwrites.less inside the gui/src/Main.tsx file

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Components, Services, IState, configureStore } from "@sdl/delivery-ish-dd-webapp-gui";
import { Provider } from "react-redux";
import { Store } from "redux";
import { Route } from "react-router";

// Custom imports
import "./custom-styles/skin-overwrites";

// ...

4. Add the following content inside the skin-overwrites.less file

@import (reference) "~theme-styles";

.sdl-dita-delivery-app {

    .sdl-activityindicator {
        filter: grayscale(1);
    }

    .sdl-dita-delivery-breadcrumbs ul li .separator {
        margin-right: 0px;
    }

    .sdl-button.graphene.sdl-button-purpose-confirm {
        &:hover {
            opacity: 0.5;
        }
    }

    .sdl-dita-delivery-tile {
        background-color: #f6f6f6;
    }
}

The styles we've added inside the skin-overwrites.less will overwrite the styles of the activity indicator, the buttons and the tiles on the home page.

To get access to the mixins / variables defined inside the theming directory, we've added an import on the top @import (reference) "~theme-styles";. This import can be used in any less file to get access to the theming API's.

If you end up with a lot of customizations it makes sense to create different less files to have a better overview. For example a less file for the changes on the home page, one for the table of contents, etc...