How to customize style
There are 2 basic ways to customize this theme.
i. Compiled CSS
If you want to use Mono Dashboard "as is", or only need limited customization, feel free to simply
include the compiled
mono.css
or mono.min.css
file located in the dist/assets/css
directory.
ii. Customizing SCSS
This is more versatile and sustainable way to customize Mono Dashboard. The 2 major benefits of this
strategy are using variable overrides (_variables.scss
) to easily customize theme styles, plus you
never have to touch Bootstrap source, meaning future updates will be much, much, simpler. For more information, please see the official Bootstrap theming.
// Colors variable
$primary: #0074d9;
$secondary: #ff4136;
//Modify map
$theme-colors: (
(
"primary": $primary,
"secondary": $secondary
)
);
How to change font
If you wish to add/change the site fonts, please take a look in the top of html
file of the website and replace this line And go _variables.scss
to change variable $font-family-base
// GOOGLE FONT
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
//CSS
body {
font-family: 'Open Sans', sans-serif;
}
//SCSS Variable
$font-family-base: 'Open Sans', sans-serif
How to change Direction
To use RTL direction set the dir='rtl' in <html>
and replace
assets/css/mono.css with assets/css/mono.rtl.css inside <head>
<!-- Rtl Direction -->
<html dir="rtl"></html>
<!-- Stylesheet URL -->
<link id="main-css-href" rel="stylesheet" href="assets/css/mono.rtl.css">