{"id":76,"date":"2019-10-09T05:25:20","date_gmt":"2019-10-09T05:25:20","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/chankya\/?page_id=76"},"modified":"2019-10-15T10:42:45","modified_gmt":"2019-10-15T10:42:45","slug":"style-customisation","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/chankya\/style-customisation\/","title":{"rendered":"Style Customisation"},"content":{"rendered":"\n

Chankya is developed with Bootstrap 4<\/a> so its easy to change the styling for your app. It uses bootstrap variables along with some custom variables which provides you the more flexibility and control over design.<\/p>\n\n\n\n

Color Schemes and Typography<\/h5>\n\n\n\n

Go to the bootstrap-override.scss file and find following vars and change the value as per as your requirements.<\/p>\n\n\n\n

$blue:     #1862c6 !default;
$indigo:   #6610f2 !default;
$purple:   #6f42c1 !default;
$pink:     #e83e8c !default;
$red:      #F54B5E !default;
$orange:   #ff5723 !default;
$yellow:   #F8C51C !default;
$green:    #00caac !default;
$teal:     #51CAE3 !default;
$cyan:     #43AE3F !default;<\/pre>\n\n\n\n
Typography<\/a><\/h6>\n\n\n\n
Manage the typography by changing the value of it.<\/p>\n\n\n\n
$font-size-base:              1rem !default; \/\/ Assumes the browser default, typically `16px`
$font-size-lg:                ($font-size-base * 1.25) !default;
$font-size-sm:                ($font-size-base * .875) !default;
 
$font-weight-lighter:         lighter !default;
$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;
$font-weight-bolder:          bolder !default;
 
$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
 
$h1-font-size:                $font-size-base * 1.625 !default;
$h2-font-size:                $font-size-base * 1.375 !default;
$h3-font-size:                $font-size-base * 1.25 !default;
$h4-font-size:                $font-size-base * 1.125 !default;
$h5-font-size:                $font-size-base * 1 !default;
$h6-font-size:                $font-size-base * 0.875 !default;
 <\/pre>\n\n\n\n
To change app font family, you need to load appropriate font family from google or from other custom source in the head tag of index.html file. Like in following code:<\/strong><\/p><\/blockquote>\n\n\n\n
<link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i\" rel=\"stylesheet\">
<\/pre>\n\n\n\n
Theme Custom Variables<\/h5>\n\n\n\n
Mange custome variable by changing the values in app.variable.scss file.<\/p>\n\n\n\n
\/*=========== Custom Variables integrated =============*\/
\/\/--- html font ---\/\/
$html-font-size:                    16px;
 
\/\/--- block setting ---\/\/
$block-bg: #fff;
$block-border-color:                #DEE4E8;
$block-border-radius:               0;
$block-margin:                      $grid-gutter-width;
$block-space-x:                     20px;
$block-space-y:                     20px;
 
\/\/--- Block Title ---\/\/
$block-title-font-color:            inherit; \/\/ #414658;
$block-title-font-size:             1.25rem;
$block-title-space-x:               1.25rem;
$block-title-space-y:               1.25rem;
 
\/\/--- Block Contextual ---\/\/
$block-contextual-link-color:       #9E9E9E;
$block-contextual-link-size:        1rem;
 
\/\/--- Block full setting ---\/\/
$block-full-bg:                     $block-bg;
$block-full-border-color:           $block-border-color;
$block-full-border-radius:          0;
$block-full-margin:                 $block-margin;
$block-full-padding:                null;
 
\/\/--- Button variables ----\/\/
$btn-font-size:                     0.875rem;
$btn-transform:                     capitalize;
 
$btn-rounded-padding-horizontal:    2rem;
 
$btn-square:                        0px;
$btn-rounded-border-radius:         10em;
$btn-circle:                        100%;
 
\/\/--- Badges ---\/\/
$badge-font-size:                   0.875rem;
 
$badge-padding-horizontal:          5px;
$badge-padding-vertical:            3px;
$badge-base-rounded:                5px;
 
\/\/--- Breadcrumb ---\/\/
 
$breadcrumb-font-size: 1re;
$breadcrumb-font-color: #414658;
 
\/\/--- Chat variables ---\/\/
$chat-block-even-bg:                $primary;
$chat-block-odd-bg:                 $primary;
$chat-block-font-color:             #fff;
 
$chat-item-padding:                 1rem;
$chat-item-border:                  1px solid $input-border-color;
$chat-item-bg-color:                #fff;  
 
\/\/--- Dropdown variables ---\/\/
$dropdown-min-width:                null;
$dropdown-padding-y:                5px;
$dropdown-margin-top:               5px;
$dropdown-heading-bg:               $gray-500;
 
\/\/-----Dark theme---\/\/
$dark-bg:                           #424242;
$dark-bg-color:                     #fff;
$dark-bg-container:                 #303030;
$dark-border-color:                 rgba($gray-500, 0.1);
 
\/\/--- Form input variables ---\/\/
$input-line-height:                 null;
$from-label-color:                  #414658;
$input-square:                      0px;
$input-rounded:                     10rem;
 
\/\/--- Header ---\/\/
$header-bg:                         #fff;
$header-height:                     72px;
$header-bottom-border:              1px solid $input-border-color;
$header-pad-left-right:             1.3rem;
$header-box-shadow:                 0 0 35px 0 rgba(154,161,171,.15);
 
\/\/--- Ham icon ---\/\/
$ham-line-height: 2px;
$ham-icon-height-width: 45px;
$ham-icon-border-radius: 100%;
$ham-icon-line-color:  #818698;
$ham-icon-border: 1px solid #DEE4E8;
$ham-icon-background-color: #F5F9FB;
 
\/\/-- Header Menu --\/\/
$header-main-menu-color: #9e9e9e;
$dropdown-header-title-color: #fff;
\/\/--- Progress Bar ---\/\/
$progress-rounded:                  1rem;
$progress-square:                   0px;
 
\/\/--- Page title ---\/\/
$page-title-color:                  #414658;
$page-title-font-size:              1.625rem;
 
\/\/--- Page info ---\/\/
$page-info-pad-space:               0.8rem 1.7rem;
 
\/\/--- Preloader variable ---\/\/
$perloader-bg-overlay:              rgba(20, 24, 40, 0.87);
$preloader-bg-one:                  $blue;
$preloader-bg-two:                  $orange;
 
\/\/--- SidebarWidths ---\/\/
$sidebar-width:        18.75rem;
$sidebar-menu-text:                $body-color;
$sidebar-bg:              url(\"assets\/img\/sidebar-bg.jpg\");
$sidebar-overlay-bg:                rgba($white, 0.87);
 
\/\/--- Sidebar logo ---\/\/
$sidebar-logo-bg:                   $blue;
$sidebar-icon-size:                 1.1rem; 
 
\/\/--- Square box ---\/\/
$square-font-size:                  0.5; \/\/ 50% relative to the container
$square-box:                      (10, 15, 20, 30, 40, 50, 60, 85, 100);
 
\/\/--- User section ---\/\/
$user-thumb-section-bg:             $white;
$user-name-color:                   $body-color;
$user-pad-y :                       1.5rem;
$user-pad-x:                        1rem;
$border-radius-base:                0;
 
\/\/--- Tour section ---\/\/
 
$tour-main-heading-color: #fff;
$tour-main-heading-bg-color: $blue;
$tour-main-heading-font-size: 18px;
$tour-step-font-size: 16px;
$popover-body-bg-color: $blue;
$popover-body-font-color: #fff;
 
\/\/----- Card ----\/\/
$card-box-shadow:  0 0 35px 0 rgba(154,161,171,.15);
 
\/\/modal-default-width
$modal-def-width:              600px;  <\/pre>\n\n\n\n
Changing Color Values For Charts And Map<\/strong><\/h5>\n\n\n\n
If you want to change the colours on “Charts” then go to thatspecific chart type and make changes inside its component .ts file.<\/p>\n\n\n\n
example: to change the colour on “Dashboard Chart”, go to src\/app\/dashboard and open its .ts file, search for “chart” and change values:<\/p>\n\n\n\n
public barChartOptions:any = {
     scaleShowVerticalLines: false,
     responsive: true
   };
  \/\/ Chart Colour
    barChartColors: Array <any> = [{
      backgroundColor: '#1862c6',
      borderColor: '#1862c6',
      pointBackgroundColor: '#1862c6',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: '#1862c6'
    }, {
      backgroundColor: '#DEE4E8',
      borderColor: '#DEE4E8',
      pointBackgroundColor: '#DEE4E8',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: '#DEE4E8'
    }
    
   ];
   public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
     {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
   ];<\/pre>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n        <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Chankya is developed with Bootstrap 4 so its easy to change the styling for your app. It uses bootstrap variables along with some custom variables which provides you the more flexibility and control over design. Color Schemes and Typography Go to the bootstrap-override.scss file and find following vars and change the value as per as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":7,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/76"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":4,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":245,"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/pages\/76\/revisions\/245"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/chankya\/wp-json\/wp\/v2\/media?parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}