...
The 2 main things you will need to use are:
...
| Info |
|---|
File path: apq-c3-custom\css\scss\_custom-variables.scss |
• Custom Color Scheme
| Code Block |
|---|
|
// // Custom Colour Scheme 2: Inverse Color Scheme
$navbar-pf-navbar-border-color: $color-pf-black-150 !default;
$apq-c3-name: $color-pf-black-600 !default;
$apq-c3-name-hover:$color-pf-black-700 !default;
$brand-primary: rgb(219,51,31) !default;
$brand-secondary: white !default;
$btn-primary-bg: darken($brand-primary, 10%) !default;
$btn-primary-border: darken($brand-primary, 20%) !default;
|
...
• Background colors
| Code Block |
|---|
|
// // Masthead background colours.
$navbar-pf-bg-color: $brand-secondary !default;
$navbar-pf-bg-color-start: $navbar-pf-bg-color !default;
$navbar-pf-bg-color-stop: $navbar-pf-bg-color !default;
|
...
• App top border
| Code Block |
|---|
|
// // Colour of the top border in the page
$navbar-pf-border-color: $brand-primary !default;
|
...
• Appbar colors
| Code Block |
|---|
|
// // Start and stop colour of appbar
$navbar-pf-navbar-primary-bg-color-start: darken($navbar-pf-bg-color, 1.5%) !default; //
#474C50
$navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-bg-color !default;
|
...
| Code Block |
|---|
|
// // Appbar border colour
$navbar-pf-navbar-border-color: darken($navbar-pf-bg-color, 1.5%) !default;
$navbar-pf-navbar-header-border-color: darken($navbar-pf-bg-color, 1.5%) !default;
|
...
| Code Block |
|---|
|
// // Hover colour of utitity menu at top right of page
$navbar-pf-navbar-utility-hover-bg-color: darken($navbar-pf-bg-color, 10.5%) !default;
|
...
| Code Block |
|---|
|
// // Start and stop colour of appbar hovered item
$navbar-pf-navbar-primary-hover-bg-color-start: lighten($navbar-pf-bg-color, 8%) !default;
$navbar-pf-navbar-primary-hover-bg-color-stop: lighten($navbar-pf-bg-color, 2%) !default;
|
...
• Top widget border
| Code Block |
|---|
|
// // Colour of border on top of widget cards
$card-pf-accented-border-top-color: $navbar-pf-border-color !default;
|
...
| Code Block |
|---|
|
// // Dropdown menu colours of active and hovered items.
$dropdown-menu-active-border-color: lighten($navbar-pf-border-color, 20%) !default;
$dropdown-menu-active-background-color: lighten($navbar-pf-border-color, 35%) !default;
$dropdown-link-hover-bg: $dropdown-menu-active-background-color !default;
$dropdown-link-hover-border-color: $dropdown-menu-active-background-color !default;
$dropdown-link-active-bg: $navbar-pf-border-color !default;
$dropdown-link-active-border-color: $dropdown-link-active-bg !default; |
...