Customizing the application style

You can style new screens in the .scss format, or modify the style for an existing screen. The application-provided global and common styles are available in the @store/styles library that is present in the <store-temp>/packages/libs/styles directory.

You can modify the application-provided style variables, and introduce custom styles in the @store-extensions/styles library that are present in the <store-temp>/extensions/libs/styles directory.

The following table depicts the directory layout:

Table 1. Customizing the application style
Directory path	Description
extensions/libs/styles	Library is used to override application-provided SASS style variables and add custom styles to use in extensions.
extensions/libs/styles/src/styles/custom_styles.scss	Define custom fonts, images, and selectors in this file.
extensions/libs/styles/src/styles/variables_extn.scss	Application-provided SCSS variable values can be modified and placed in this file.
extensions/libs/styles/webpack.config.js	Webpack configuration to build the compile and generate custom style css files.

You can customize the application-provided styles and add custom styles.

The supported business use cases include:

Overriding the existing SCSS variables
Adding custom icon fonts
Adding custom images
Adding custom SCSS selectors

Ensure that you follow these guidelines when customizing the application style.

Do not override the existing selectors.
Do not change the existing <store-temp>/extensions/libs/styles/webpack.config.js configuration, except when you add new plug-ins for copying images.
Do not change the scripts in <store-temp>/extensions/libs/styles/package.json.

Overriding existing SCSS variables

You can customize the appearance of the application by overriding or adding new SCSS variables.

The application-provided variables are present in the <store-temp>\packages\libs\styles\src\styles\typography\_variables.scss

To override the existing SCCS variables, complete the following steps:

Identify the application-provided SCSS variable name that you want to modify.
The application-provided SCSS variable names are present in <store-temp>\packages\libs\styles\src\styles\typography\_variables.scss.
Copy the appropriate variable name to the <store-temp>\extensions\libs\styles\src\styles\variables_extn.scss file, and provide the appropriate value based on your needs.
Verify your changes.
Start the application by running the following command:
```
yarn start-app
```
To verify your changes in the developer toolkit, extract and deploy your customizations. For more information about extracting and deploying customizations, see Extracting customizations.

Sample code snippet.


/* Overridding gray colour */
$gray-10: #2d74da;
$gray-10-15: #2d74da;

Creating custom icon fonts

For custom icon fonts, you can directly use third-party icon libraries or create custom icons by completing the following steps:

Create a custom icon as a vector by using any tool to generate .svg file format or obtain .svg files from any other source.
Use the created .svg files and generate the custom icon fonts by using any SVG icon library.
Note:
- Do not use .svg files that are converted from .png or .jpg files.
- While generating font icons, do not use the app-glyphicons font name that is provided by the application. Instead, use the custom font name.
Create a new folder in the <store-temp>\extensions\libs\styles\src\styles\icons folder and copy all the generated icon font formats, such as .ttf, .svg, .eot, or .woff, including third-party custom icon SCSS or CSS file to this folder.
Import the custom icon font to <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss file.
For example, @import './icons/style.scss';
Use the custom icon class selector in custom components.
Verify your changes.
Start the application by running the following command:
```
yarn start-app
```
To verify your changes in the developer toolkit, extract and deploy your customizations. For more information about extracting and deploying customizations, see Extracting customizations.

Adding custom images

To add custom images to use in the custom component screens, complete the following steps:

You can add new images in <store-temp>\extensions\libs\styles\src\styles\images directory.
After you add new images to the extensions lib, you can include the custom image in the source code files such as HTML, SCSS, or XSL by using the relative path such as /assets/styles/images/custom-image.jpeg. For example, <img src=“./assets/styles/images/sterling_login_dark_custom.svg”>.

Note: Ensure that the new class names do not conflict with the existing CSS class names.
Verify your changes.
Start the application by running the following command:
```
yarn start-app
```
To verify your changes in the developer toolkit, extract and deploy your customizations. For more information about extracting and deploying customizations, see Extracting customizations.

Adding custom SCSS selectors

To define new global selectors for the custom features, complete the following steps:

Custom CSS selectors can be defined in <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss.

Note: Ensure the custom CSS selectors do not conflict with existing selectors.
Import other SCCS files into <store-temp>\extensions\libs\styles\src\styles\custom_styles.scss file.
Verify your changes.
Start the application by running the following command:
```
yarn start-app
```
To verify your changes in the developer toolkit, extract and deploy your customizations. For more information about extracting and deploying customizations, see Extracting customizations.