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

Contacts

Add New