{"id":213,"date":"2019-10-08T12:32:40","date_gmt":"2019-10-08T12:32:40","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/embryo\/?page_id=213"},"modified":"2019-11-20T03:24:38","modified_gmt":"2019-11-20T03:24:38","slug":"style-customization-3","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/embryo\/style-customization-3\/","title":{"rendered":"Style Customization"},"content":{"rendered":"\n

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

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

Theme Customization <\/h5>\n\n\n\n

By Changing Primary Accent colors in Constant file<\/strong><\/p>\n\n\n\n

Open src > constants > AppConfig.js<\/code> file\u200c<\/p>\n\n\n\n

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

Go to AppConfig.js\u200b<\/code><\/p>\n\n\n\n

\/\/ Define the theme color 
 color: {
    primary: '#283593',                                           
    accent : '#ff5722',
 }<\/pre>\n\n\n\n
By Changing Custom variables<\/strong><\/p>\n\n\n\n
Open _variables.scss<\/code> file under src > assets > scss<\/code> folder and change style variable values as per your requirement.<\/p>\n\n\n\n
\/\/theme color
$primary:#283593;
$accent: #FF5722; 
$carbon: #000;            
$base:#FFF;                 

\/\/font color
$font-color:#3A405B;      
 
\/\/body background
$body-bg:#f3f3f3;
 
\/\/font family 
$font-family-base:'Roboto', sans-serif;
 
\/\/ Setting for the Typograpgy elements.
$html-font-size: 16px;
$base-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;
 
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium:500;
$font-weight-bold:700;
 
\/\/ Setting For Heading Element
$h1-font-size: 3.25rem !default;\/\/52px
$h2-font-size: 2.813rem !default;\/\/45px
$h3-font-size: 2.125rem !default;\/\/34px
$h4-font-size: 1.5rem !default;\/\/24px
$h5-font-size: 1.25rem !default;\/\/20px
$h6-font-size: 1rem !default;\/\/16px
 
$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;
 
\/\/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);
 
\/\/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);
 
\/\/Page Title
$page-title-bg-image:url(\"\/static\/images\/page-title-bar.jpg\");
$page-title-padding:7rem 0;
$page-title-align:center;
$page-title-color:$base;
 
\/\/Sub-menu
$sub-menu-bg:$base;
$sub-menu-color:$font-color;
 
\/\/Responsive Sidebar
$responsive-menu-color:$base;
$responsive-sidebar-bg:url(\"\/static\/images\/bg-sidebar.jpg\");
 
\/\/Pre Loader
$loader-bg:$base;
$loader-color:$primary;
 
\/\/Footer
$footer-bg:$carbon;
$footer-color:$base;
 
\/\/rating
$rating-selected-color:#EDB867;
$rating-unselected-color:#d2d2d2;<\/pre>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    2    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    1<\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Design style customization\u200c Embryo is made in material design and designed with scss so its easy to customize the color and other style related points.\u200c Theme Customization By Changing Primary Accent colors in Constant file Open src > constants > AppConfig.js file\u200c If you wish to change the primary colors then you can do the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":24,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/213"}],"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=213"}],"version-history":[{"count":8,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/213\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/pages\/213\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/embryo\/wp-json\/wp\/v2\/media?parent=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}