Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Current »

» Visual Studio code

This is the IDE that we all use for development and is a very powerful tool. If you haven’t already, download and install the latest version of Visual Studio Code

» Node

This is required for running gulp when we wish to make customizations to the code. Download and install the latest version.

https://nodejs.org/en/

» Install Node Packages

This is most easily done through a terminal when running the Visual Studio Code.

It needs to be run from the webapps\UX_Application folder that you wish to customize.

This will install all of the packages defined in the package.json file that we need for gulp to work.

» Gulp

Install gulp globally. This is most easily done through a terminal when running the Visual Studio Code.

  • npm uninstall gulp-g (If you have previously installed gulp, please run this)

  • npm install gulp-cli -g (This will globally install gulp-cli which you need to run gulp)

This enables the automatic compilation of SASS and custom JS files. Once this is done you can run gulp from the terminal window: Leave this running in the terminal and any changes you make will be automatically compiled into the required files that the browser will pick up on a full refresh.

» Stylesheet customization

In Apliqo UX we use SASS. It is completely compatible with CSS, so you can write CSS as you know it in a Sass (scss) file. If however, you are not syntactically correct then the gulp process will show an error message upon saving. Sass offers some very nice features over basic CSS, so it’s worth spending a little time to understand what makes it so good.

Here is a link to the Sass basics which will give you a good starting point: https://sass-lang.com/guide

The 2 main things you will need to use are:

» How to find variables or 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:

  • Click on the _adm-view.scss:1236 to look at the Sass file:

  • From this, you can see that the variables that you are interested in are:

$dropdown-link-active-bg
$dropdown-link-active-border-color

You just need to redefine what these are equal to in the _custom-variables.scss fie.

» Custom variables file

File path:

apq-c3-custom\css\scss\_custom-variables.scss

  • Custom Color Scheme

// // 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

// // 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

// // Colour of the top border in the page 
$navbar-pf-border-color: $brand-primary !default;

  • Appbar colors 

// // Start and stop colour of appbar
$navbar-pf-navbar-primary-bg-color-start: darken($navbar-pf-bg-color, 1.5%) !default;
$navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-bg-color !default;
// // 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;

  • Hover color utility menu 

// // 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;

  • Hover color appbar 

// // 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 boarder 

// // Colour of border on top of widget cards
$card-pf-accented-border-top-color: $navbar-pf-border-color !default;

  • Dropdown menu colours

// // 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;

  • No labels