{"id":96,"date":"2019-10-07T11:48:36","date_gmt":"2019-10-07T11:48:36","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/embryo\/?page_id=96"},"modified":"2019-10-15T09:49:58","modified_gmt":"2019-10-15T09:49:58","slug":"style-customization-2","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/embryo\/style-customization-2\/","title":{"rendered":"Style Customization"},"content":{"rendered":"\n

Changing Default Variables<\/strong><\/h4>\n\n\n\n

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

Change Theme Colors<\/strong><\/h5>\n\n\n\n

Theme colors in the template is managed in two steps:\u200c<\/p>\n\n\n\n

First you need to change the colour code in the src->themes->primaryTheme.js<\/code> file to reflect the changes in the components of material-ui:<\/p>\n\n\n\n

\/**
 * App Light Theme
 *\/
import { createMuiTheme } from '@material-ui\/core\/styles';
 
const theme = createMuiTheme({
   palette: {
      primary: {
         main: '#26348F' \/\/ Change this color code
      },
      secondary: {
         main: '#FF5722' \/\/ Change this color code 
      }
   }
});
 
export default theme;
\u200c
<\/pre>\n\n\n\n
\u200cSecond you need to change the colour code in the _variables.scss<\/code> file to reflect the changes in the whole theme :<\/p>\n\n\n\n
\/\/Theme default colors:-
$primary: #26348F; \/\/Manage Primary Color
$secondary:rgba(0, 0, 0, 0.54); \/\/Manage text Color
\u200b
$success: #28a745; \/\/Manage Success Color
$danger:#DE3F3F; \/\/Manage Danger Color
$warning:#ffc107; \/\/Manage Warning Color
$info:#17a2b8; \/\/Manage Info Color
\u200b
$transparent:transparent;
$dark-grey:rgba(0, 0, 0, 0.7); \/\/Manage text Color
$dark:rgba(0, 0, 0, 0.87); \/\/Manage text Color
\u200b
$active:#FF5722; \/\/Manage secondary Color
$black:#000000;
$black-light:#212121;
\u200b
$base:#fff;
$grey:#f3f3f4;
$border:#eceeef;
<\/pre>\n\n\n\n
Change Font Family <\/strong><\/h5>\n\n\n\n
To change app font-family go to variables.scss<\/code> file and change following values.<\/p>\n\n\n\n
\/font-family:-
 
$roboto:'Roboto', sans-serif;<\/pre>\n\n\n\n
Change Font Weight <\/h5>\n\n\n\n
\/\/font-weight:-
$font-weight-light:300 !default;
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 700 !default;
$font-weight-italic:italic;<\/pre>\n\n\n\n
Change Typography <\/strong><\/h5>\n\n\n\n
\/\/body style:-
$body-bg:$grey;
$body-color:$dark;
$font-size-body:1rem !default;\/\/16px
$line-height:1.5rem !default;\/\/24px
\u200b
\/\/heading font sizes:-
$font-size-h1: 3.25rem !default;\/\/52px
$font-size-h2: 2.813rem !default;\/\/45px
$font-size-h3: 2.125rem !default;\/\/34px
$font-size-h4: 1.5rem !default;\/\/24px
$font-size-h5: 1.25rem !default;\/\/20px
$font-size-h6: 1rem !default;\/\/16px
\u200b
\/\/heading line-height :-
$line-height-h1:3.75rem !default;\/\/60px
$line-height-h2:3rem !default;\/\/48px
$line-height-h3:2.5rem !default;\/\/40px
$line-height-h4:2rem !default;\/\/32px
$line-height-h5:1.75rem !default;\/\/28px
$line-height-h6:1.5rem !default;\/\/24px
\u200b
\/\/heading font color:-
$h1-font-color:$dark !default;\/\/black
$h2-font-color:$dark !default;\/\/black
$h3-font-color:$dark !default;\/\/black
$h4-font-color:$dark !default;\/\/black
$h5-font-color:$dark !default;\/\/black
$h6-font-color:$dark !default;\/\/black
\u200b
\/\/paragraph :-
$font-size-p:0.875rem !default;\/\/14px
$line-height-p:1.25rem !default;\/\/20px
$font-color-p:$dark-grey;
\u200b
\/\/box-shadow
$box-shadow:0 1px 1px 0 rgba(0,0,0,0.14), 
0 2px 1px -1px rgba(0,0,0,0.12),
 0 1px 3px 0 rgba(0,0,0,0.2);<\/pre>\n\n\n\n
Change PageTitle Style <\/h5>\n\n\n\n
\/\/Page Title
$page-title-bg-image:url(\"..\/..\/assets\/images\/page-title-bar.jpg\");
$page-title-padding:7rem 0;
$page-title-color:$base;<\/pre>\n\n\n\n
Change spacers <\/h5>\n\n\n\n
\/\/ Spacing
\/\/ You can add more entries to the $spacers map, should you need more variation.
$spacer: 1rem !default;
$spacers: () !default;
\/\/ stylelint-disable-next-line scss\/dollar-variable-default
$spacers: map-merge((
        0: 0,
        5: ($spacer * .3125),
        10: ($spacer * .625),
        15: ($spacer * .9375),
        20: ($spacer * 1.25),
        25: ($spacer * 1.5625),
        30: ($spacer * 1.875),
        40: ($spacer * 2.5),
        50: ($spacer * 3.125),
        60: ($spacer * 3.75)
  ),
        $spacers
);
\u200c
<\/pre>\n\n\n\n
\u200cChange Breakpoints <\/h5>\n\n\n\n
\/\/ Grid breakpoints
\/\/ Define the minimum dimensions at which your layout will change,
\/\/ adapting to different screen sizes, for use in media queries.
\u200b
$grid-breakpoints: (
        xs: 0,
        sm: 600px,
        md: 960px,
        lg: 1280px,
        xl: 1920px
) !default;<\/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 Default Variables Open _variables.scss file under the src->assets->scss folder and change style variable values as per your requirement.\u200c Change Theme Colors Theme colors in the template is managed in two steps:\u200c First you need to change the colour code in the src->themes->primaryTheme.js file to reflect the changes in the components of material-ui: \/** * […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":16,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/96"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":6,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/96\/revisions"}],"predecessor-version":[{"id":295,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/96\/revisions\/295"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}