User Interface (SCSS and CSS) - kghandour/SE-2018-Helper GitHub Wiki
I will go through some of the solutions that I found.
First navigate to your frontend folder or repo then src/app/@theme/styles/themes.scss
This is where the themes are defined and edited. You will find:
$nb-enabled-themes: (
default,
cosmic
);
This part basically lists the themes that are enabled. By default there are two, default (light) and cosmic.
Then there is the first $nb-themes: nb-register-theme( which defines the first theme (Default, light theme) and the second one defines the cosmic one. If you want to have 2 themes then edit both accordingly.
Taking a closer look:
$nb-themes: nb-register-theme(
(
sidebar-header-gap: 2rem,
sidebar-header-height: initial,
layout-content-width: 1400px,
font-main: Arial,
font-secondary: Helvetica
),
default,
default
);
You will find that these are not the usual css. How this works is that ngxadmin has some default "key,value" options available that you can change to "quickly" edit the theme throughout the website.
For example: font-main sets the font of the entire website. layout-content-width sets the width of the website basically.
Okay what else can you edit/add? For example if you want to change the header height if it's too large.
then you can add:
header-height: 50px for example after font-secondary: Helvetica for example to be
...
font-main: Arial,
font-secondary: Helvetica,
header-height: 50px
...
What else can you add? You can find a list of the keys here: https://akveo.github.io/nebular/#/docs/themes/default
But basically,
- header-* edits header properties
- layout-* edits the main part of the page properties
- footer-* edits the footer properties
- font-* edits the fonts properties
And:
- *-bg changes the background
- *-fg changes the foreground color (example
header-fg: #fff;) will change the color of the text in the header to be white.
Okay now that you are done with the navbar and the main content and the footer, you want to be consistent throughout the pages and there are no keys for everything. What will you do? Add css.
First navigate to your frontend folder or repo then src/app/@theme/layouts/main/main.layout.scss
What is this file? The way nebular works is there is a main.layout.ts file. This defines the structure of the website. Header at the top, main content in the middle and footer at the bottom. If you remove anything here it affects the whole website.
main.layout.scss defines the styling of the whole website accordingly.
We will dive in. We want to add custom styling to the main part to change the background color for example. (I already said that you can do it using the key values up by changing layout-bg but here you can do it using scss)
What you will want to do is inside @include nb-install-component() { add nb-layout-column{ }. Explanation: The nb-layout-column is the layout a.k.a main part of the page. inside of it if you want background: #fff; it will change the background of main part to white.
So far it will look something like this:
...
@include nb-install-component() {
nb-layout-column{
background:#fff;
}
}
...
Say want to make all divs with class "maincontent" to be white and the text black. If you do:
...
@include nb-install-component() {
.maincontent{
background:#fff;
color:#000;
}
}
...
this won't work. The reason behind this is that your router-outlet won't be affected by what you added. The scope of this does not reach the components/modules that you make.
Solution?
Use /deep/
Now if you write something like this:
...
@include nb-install-component() {
/deep/ .maincontent{
background:#fff;
color:#000;
}
}
...
And in your component template you have something like <div class="maincontent">Hello world"</div> you should see the difference.
Congratulations. You have now customized the website.
I honestly didn't find any proper documentation anywhere so I had to make a proper one.
Extra reads: