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

Design style customization<\/strong>\u200c<\/p>\n\n\n\n

Embryo is made in material design so its easy to customize the color and other style related points.\u200c<\/p>\n\n\n\n

Theme Customization ( By Changing Primary Vars as per Google Color P<\/strong>alette)<\/a><\/h6>\n\n\n\n

If you wish to change the primary colors then you can do the following:\u200c<\/p>\n\n\n\n

Open assets>scss>material.theme<\/strong> file\u200c<\/p>\n\n\n\n

Go to Google Color palette<\/a><\/p>\n\n\n\n

\/\/ Define the default theme (same as the example above).
$my-theme-primary: mat-palette($mat-indigo,800);
$my-theme-accent:  mat-palette($mat-deep-orange, 500);
$my-light-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);<\/pre>\n\n\n\n
By default gene gives the following color set, you can change as per your requirement<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Simply choose the color you want from the pallete and replace that in the file for e.g. if you wish to change the primary color with Purple – 400 simply choose its hex value (#ab47bc) and replace in the file.<\/p>\n\n\n\n
$my-theme-primary: mat-palette($mat-purple,400);<\/pre>\n\n\n\n
For more information please go to https:\/\/material.angular.io\/guide\/theming<\/a>\u200c<\/p>\n\n\n\n
Custom Variables<\/a><\/h6>\n\n\n\n
If you want to change variable of typography , page title and footer then go to the variables.scss file and change the values.<\/p>\n\n\n\n
\/\/Main body 
$body-bg:#f3f3f4;
$grey-bg:#f3f3f4;
 
\/\/Body color
$font-color: #3A405B;
 
\/\/$border
$theme-border-color:#d5d5d5;
 
$html-font-size: 16px;
$mat-font-family: 'Roboto', sans-serif;
$font-size-base: 0.875rem !default;
$font-weight-base: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-bold: 600 !default;
 
\/\/Heading Font Size 
$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
 
\/\/Heading Font color
$h1-font-color:rgba(0,0,0,0.87);
$h2-font-color:rgba(0,0,0,0.87);
$h3-font-color:rgba(0,0,0,0.87);
$h4-font-color:rgba(0,0,0,0.87);
$h5-font-color:rgba(0,0,0,0.87);
$h6-font-color:rgba(0,0,0,0.87);
 
$headings-margin-bottom: (1rem \/ 2) !default;
$headings-font-family:   inherit !default;
$headings-font-weight:   500 !default;
$headings-line-height:   1.1 !default;
$headings-color:         inherit !default;
 
\/\/Page Title
$page-title-bg-image:url(\"..\/..\/assets\/images\/page-title-bar.jpg\");
$page-title-padding:7rem 0;
$page-title-align:center;
$page-title-color:#fff;
 
\/\/Header
$main-nav-color:#fff;
 
\/\/Sub-menu
$sub-menu-bg:#fff;
$sub-menu-color:$font-color;
 
\/\/Responsive Sidebar
$responsive-menu-color:#fff;
$responsive-sidebar-bg:url(\"..\/..\/assets\/images\/bg-sidebar.jpg\");
 
\/\/Slider images
$slider-1-img:url('..\/..\/assets\/images\/slider-1.jpg');
$slider-2-img:url('..\/..\/assets\/images\/slider-2.jpg');
$slider-3-img:url('..\/..\/assets\/images\/slider-3.jpg');
 
\/\/Pre Loader
$loader-bg:#fff;
$loader-color:#283593;
 
\/\/Footer
$footer-bg:#000000;
$footer-color:#ffffff;
 
\/\/rating
$rating-selected-color:#EDB867;
$rating-unselected-color:#d2d2d2;
 
\/\/card Shadow
 
$card-shadow:0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);<\/pre>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Design style customization\u200c Embryo is made in material design so its easy to customize the color and other style related points.\u200c Theme Customization ( By Changing Primary Vars as per Google Color Palette) If you wish to change the primary colors then you can do the following:\u200c Open assets>scss>material.theme file\u200c Go to Google Color palette […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/49"}],"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=49"}],"version-history":[{"count":4,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/49\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}