{"id":42,"date":"2019-10-09T05:22:30","date_gmt":"2019-10-09T05:22:30","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/kava\/?page_id=42"},"modified":"2019-10-10T11:54:51","modified_gmt":"2019-10-10T11:54:51","slug":"style-customization","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/kava\/style-customization\/","title":{"rendered":"Style Customization"},"content":{"rendered":"\n
Design style customization<\/strong><\/a><\/h5>\n\n\n\n

Kava 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.\u200c<\/p>\n\n\n\n

Changing Default Variables<\/strong><\/a><\/h6>\n\n\n\n

Open _bootstrap-override.scss<\/code> file under src\/assets\/scss\/theme<\/code> folder and change style variable values as per your requirement.\u200c<\/p>\n\n\n\n

Change Theme Colors<\/strong><\/a><\/h6>\n\n\n\n

In _bootstrap-overide.scss file find the following variables and start with assigning color names to specific hex values.<\/p>\n\n\n\n

$blue:    #4253FF !default;
$indigo:  #6610f2 !default;
$purple:  #7800E0 !default;
$pink:    #6D0303 !default;
$red:     #F41243 !default;
$orange:  #FF4646 !default;
$yellow:  #FF9B0B !default;
$green:   #10CC2F !default;
$teal:    #D9F762 !default;
$cyan:    #17a2b8 !default;<\/pre>\n\n\n\n
You can change the font size, text color and other various elements variables as per your requirements.<\/p>\n\n\n\n
Custom Variables<\/a>\u200c<\/h5>\n\n\n\n
According to the kava design, we made some own variables to give the full control over this template. \u200c<\/p>\n\n\n\n
Open _custom-variables.scss<\/code> file under  src\/assets\/scss\/theme and change the variable.<\/code><\/p>\n\n\n\n
\/*--------------
2.0 Custom Variables
----------------*\/
 
\/*=============|Custom Colors|===============*\/
 
$purple-400:#602DAC;
$primary-gradient: linear-gradient($purple 0%, $purple-400 100%);
$secondary-gradient: linear-gradient(0deg, $orange 0%, $yellow 100%);
$success-gradient: linear-gradient($green 0%, $teal 100%);
$error-gradient: linear-gradient($pink 0%, $red 100%);
 
\/*=======|SVG Colors|==========*\/
 
$border-svg-1:#badaff ;
$border-svg-2:#FFF3E6 ;
$border-svg-3:#F4F4F4 ;
$svg-gray:#FBFBFB ;
$svg-service-grid: #f0e9fa;
$svg-service-grid2: rgba(theme-color(dark),0.18);
 
\/*=========Slick  Color========*\/ 
 
$slick-arrow-color:#D7D9DD;
$slick-dots-def: #DDDDDD;
 
\/*==========Conatct Sec Font=========*\/
 
$contact-font-color:#4C4F55;
 
\/*===========Footer Section===========*\/
 
$bg-primary-after-color:rgba(theme-color(\"primary\"), .7);
$footer-social-icon: $dark ;
$footer-menu-list:#787D8A;
 
\/*Secondary Font family*\/
 
$sec-font-family:Muli;
$font-montserrat:Montserrat;
 
\/*=============|Theme variables|============*\/
 
$theme-box-shadow: 0 20px 50px 0 rgba($dark,0.07);
$theme-transition: all 0.3s ease;
$grid-item-space: 1.875rem;
 
\/*==============|Margin and Padding Custom variables|==============*\/ 
 
$mp-value-1:0.75rem !important;
$mp-value-2:2rem !important;
 
\/*===============|Pages Banners Common Properties|===============*\/
 
$banner-height: 400px;
 
\/*===============|About Page Varibale|===============*\/
 
$brands-image-height:800px;
 
\/**===============|Service Items |====================*\/
 
$service-item-text:#EFEFEF;
 
\/**===============|Header Menu |====================*\/
 
$submenu-bg:$white;
$submenu-color:$body-color;
$submenu-box-shadow:0 20px 50px 0 rgba($primary,0.076);
 
\/**===============|Banner Overlay Color|====================*\/
 
\/\/ $banner-overlay-color:linear-gradient(180deg, rgba($purple, 0.555) 0%, rgba(#7212f4, 0.733) 100%);
$banner-overlay-color:linear-gradient(180deg, rgba($purple, 0.755) 0%, rgba(#7212f4, 0.33) 100%);<\/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":"
Design style customization Kava 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.\u200c Changing Default Variables Open _bootstrap-override.scss file under src\/assets\/scss\/theme folder and change style variable values as per your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/pages\/42"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":4,"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/pages\/42\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/kava\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}