$font-family-base<\/code> like:<\/p>\n\n\n\n$font-family-base: 'Open Sans Condensed', sans-serif;<\/pre>\n\n\n\nSidebar Customization<\/h5>\n\n\n\n
You can easily change the width, background color, text color etc of the sidebar easily. Open the src->components->Header->Header.vue<\/code> file. For modifications in the width. change the value of the width parameter in the given code:<\/p>\n\n\n\n<v-navigation-drawer
...
:width=\"250\"
...
><\/pre>\n\n\n\nYou can change all other properties of the sidebar from the given variables. You can find these variables inside this src->assets->scss->_app.variables.scss<\/code> file:<\/p>\n\n\n\n\/\/ Sidebar Variable
$sidebar-bg: #2E3344;
$sidebar-width: 250px;
$sidebar-nav-color: #1D2433;
$sidebar-nav-text-size: 14px;
$sidebar-nav-active-color: $light;
$sidebar-nav-font-weight: 500;
$sidebar-box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
$sidebar-subnav-font-size: $sidebar-nav-text-size;
$sidebar-subnav-font-color: $sidebar-nav-color;
<\/pre>\n\n\n\nChange Text Colors<\/h5>\n\n\n\n
You can change the text colors using the given style variables.<\/p>\n\n\n\n
\/\/ App Text Scale
$gray-dark: #273142 !default;
$gray: #354052 !default;
$gray-light: #9799A8 !default;
$gray-lighter: #DDE6F3 !default;<\/pre>\n\n\n\nGradient Colors<\/h5>\n\n\n\n
If you want to use gradient colors then use these variables with basic values.<\/p>\n\n\n\n
\/\/ Gradient Theme Color
$light-primary: linear-gradient(0deg, #6A11CB 0%, #2575FC 100%); \/\/ Primary
$light-success: linear-gradient(180deg, #00ECBC 0%, #007ADF 100%); \/\/ success
$light-pink: linear-gradient(0deg, #002849 0%, rgba(231,2,94,1) 100%); \/\/ Pink
$light-warning: linear-gradient(180deg, #FF9944 0%, #FC6076 100%); \/\/ warning
$light-purple: linear-gradient(180deg, #3023AE 0%, #C86DD7 100%);\/\/ purple<\/pre>\n\n\n\nContent Block<\/h5>\n\n\n\n
Customise your main block settings with help of the following variables.<\/p>\n\n\n\n
\/\/ App Custom Card
$card-bg: #FDFDFD;
$card-border-radius: 5px;
$card-border: 1px solid #DDE6F3;
$card-spacing: 1.25rem 1.25rem;\/\/20px 20px
$card-margin-bottom: 1.25rem; \/\/20px
$card-shadow: 0 8px 13px 0 rgba(0,0,0,0.12);
$card-hover-shadow: none;
\/\/ Card Title
$card-title-color: #354052;
$card-title-font-size: 1.375rem; \/\/22px
$card-title-transform: capitalize;
$card-title-weight: 600;
$card-title-spacing: 1.25rem 1.25rem;\/\/20px 20px
\/\/ Card Contextual link
$contextual-link-size: 1.25rem;\/\/20px
$contextual-link-color: #D8D8D8; <\/pre>\n\n\n\nChange Header Styling<\/h5>\n\n\n\n
You can also modify the header using the variable defined below:<\/p>\n\n\n\n
\/\/ App Header Varibale
$navbar-bg: $purple;<\/pre>\n\n\n\nMain Container<\/h5>\n\n\n\n
To change app background color, go to _app.variables.scss<\/code> file and change the following values.<\/p>\n\n\n\n\/\/ Settings for the <body> element.
$body-bg: $light;
$body-color: $gray;
$font-family-base: 'Source Sans Pro', sans-serif;
$border-color: darken($navbar-bg, 5%);<\/pre>\n\n\n\nHeading<\/h5>\n\n\n\n
With help of following variables you can easily change font sizes for all the headings ( h1 to h6 ).<\/p>\n\n\n\n
\/\/ Setting For Heading Element
$h1-font-size: 1.75rem !default; \/\/ 28px
$h2-font-size: 1.5rem !default; \/\/ 24px
$h3-font-size: 1.375rem !default; \/\/ 22px
$h4-font-size: 1.125rem !default; \/\/ 20px
$h5-font-size: 1rem !default; \/\/ 16px
$h6-font-size: 0.875rem !default; \/\/ 14px<\/pre>\n\n\n\nDark Theme Variable<\/h5>\n\n\n\n
Change the dark theme variables as per your requirement.<\/p>\n\n\n\n
\/\/ Dark theme
$dark-bg: #424242;
$dark-bg-color: #fff;
$dark-bg-container: #303030;
$dark-border-color: rgba(0, 0, 0, 0.1);<\/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":"Changing the Default Theme We have already covered this topic in the Themes section in the side menu. Please visit that section to get detail information about changing the default theme’s. Theme Customization When you open the src -> themes folder, you will see, different theme files there. Choose from them the file in which […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/238"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":18,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/238\/revisions"}],"predecessor-version":[{"id":766,"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/pages\/238\/revisions\/766"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/vuely\/wp-json\/wp\/v2\/media?parent=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/changefont.png\")
<\/a>