Change the Background Color of the Header

[Davo]

Looking to change the background color (Currently Black) of the Apliqo UX Header. I have read the Doc by Stuart Richardson, but still struggling to understand where this changes should be made.

Thanks
David Roberts

[rmazziero]

Hi @Davo ,

To customize the background color of the navigation bar, you will need to go a bit more on the coding side of UX.

The place you will need to make the change is on the _custom-variables.scss file, located on:
…\ApliqoServer\webapps\YOURAPP\apq-c3-custom\css\scss\ _custom-variables.scss

Just keep in mind that changing this file directly as a text file will not make the changes take effect, as this is the SASS file only.
You need to open it using Visual Studio Code, then need to “compile” it using Gulp (which is a java script toolkit that will convert the sass file to CSS, need to install as well)

The advantage of using SASS is that you can do more programming of the styles, use variables, etc, before converting to CSS… and it is exactly some of those Variables that you will need to change the color of the navbar. The main ones are detailed below, you only need to change the color on the very first variable with the HEX color, the others are all derived from it:

$navbar-pf-bg-color: #434A51 !default;
$navbar-pf-bg-color-start: lighten($navbar-pf-bg-color, 2%) !default;
$navbar-pf-bg-color-stop: darken($navbar-pf-bg-color, 2%) !default;

$navbar-pf-navbar-primary-bg-color-start: lighten($navbar-pf-bg-color, 10%) !default;
$navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-bg-color !default;

$navbar-pf-navbar-utility-hover-bg-color: darken($navbar-pf-bg-color, 10.5%) !default;

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

There was a post here in the forum a while back detailing on how to do it, it is worth a read, potentially is similar to the Stuart doc you are referring to, but It may have more details:

Customizing Apliqo UX

Hi, The document was created by Stuart a while back so I thought this could be useful for many. 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. (For any version below 2.5, the latest version of node that we can run is version 10. …

Hope this helps!

[New]

@rmazziero

Sorry it might be a stupid question. Could we use scss to apply to specific view/widget in UX ?

Thanks

[rmazziero]

Hi @New,

The short answer is yes it is possible.
It depends what you would like to customize on the View / Grid Widget.
Anything to do with columns, rows, formatting and style you can change it by creating a class on the custom CSS or the custom SCSS file located as below:
…\ApliqoServer\webapps\YOURAPP\apq-c3-custom\css\custom-style.css
…\ApliqoServer\webapps\YOURAPP\apq-c3-custom\css\scss\ _custom-variables.scss

Then reference this custom class on the Column / row formatting on it.

if you would like to change the overall widget, you would be better off creating a Custom widget in itself on your own.