Add custom classes to css file

1 » custom-style.css
2 » How to find CSS that needs to be modified
3 » Add custom CSS
4 » Add custom CSS classes

» custom-style.css

File location:

apq-c3-custom/css/scss/custom-style.css

If you wish to add custom CSS you can also just add it to the custom-style.css file. You do not need to run gulp to compile this file. If you are already adding content to the _custom-style.scss file and running gulp, then it is recommended to keep all changes in one file.

» How to find CSS that needs to be modified

For example, if you wish to change the color of the active item in the menu but you don’t know what the sass variable name is you need to inspect the item in chrome.

Under the styles tab, you will see information similar to the following:

» Add custom CSS

Open custom-style.css file, if no changes were made previously this is how it will look by default:

Add custom css code. In this example we will use custom css to change the color of the App Name

.apq-c3-app-name a {
    color: rgb(196, 32, 54) !important
}

Save the changes and refresh the browser
Updated color will be visible the application

» Add custom CSS classes

CSS file can be also used to add custom css classes to e.g. change the color font or weight.

Open custom-style.css file
Add custom css code. In this example we will use custom css to add a class to change font color and another one to change the font weight:

/*FONT COLOR*/ 
.font-color-red /*custom class name*/ {
    color: rgb(196, 32, 54) !important
}
/*FONT WEIGHT*/ 
.font-weight-900 /*custom class name*/ {
   font-weight: 900 !important
}

Save the file
Now you can apply your custom classes in the app: