{"id":43,"date":"2019-10-10T09:57:00","date_gmt":"2019-10-10T09:57:00","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/angly\/?page_id=43"},"modified":"2019-10-15T10:46:32","modified_gmt":"2019-10-15T10:46:32","slug":"style-customization","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/angly\/style-customization\/","title":{"rendered":"Style Customization"},"content":{"rendered":"\n
Design style customization<\/strong><\/h5>\n\n\n\n

Angly 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<\/p>\n\n\n\n

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

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

Change Theme Colors<\/strong><\/h6>\n\n\n\n
\/\/ Start with assigning color names to specific hex values.

$blue:              #0066EB !default;     \/\/Manage default primary color
$green:             #00caac !default;     \/\/Manage default Success color
$teal:              #51CAE3 !default;     \/\/Manage default info color
$orange:            #ff5723 !default;     \/\/Manage default warning color
$red:               #F54B5E !default;     \/\/Manage default danger color<\/pre>\n\n\n\n
Changing Basic Variables<\/strong><\/h6>\n\n\n\n
_custom.var.scss<\/code> file holds custom style variables. They can be used to change css attribute values like border color, font colors etc.<\/p>\n\n\n\n
     \/*=========== Custom Variables integrated =============*\/
\/\/--- Html Variables ---\/\/
$html-font-size:                    16px;
 
\/\/--- Main Menu ---\/\/
$menu-bg-color:                     rgba(255, 255, 255, 1);
$menu-nav-color:                    $gray-700;
 
\/\/--- Preloader variable ---\/\/
$perloader-bg-overlay:              rgba(20, 24, 40, 0.87);
$preloader-bg-one:                  $blue;
$preloader-bg-two:                  $orange;
 
\/\/--- Square box ---\/\/
$square-font-size:                  0.5; \/\/ 50% relative to the container
$square-box:                        (10, 15, 20, 30, 40, 50, 60, 70, 100);
 
\/\/--- Back to top style ---\/\/
 
$to-top-bg:                             #fff !default;
$to-top-border-color:                   $gray-500 !default;
$to-top-border-radius:                  5em !default;
$to-top-icon-color:                     $blue !default;
$to-top-icon-hover-color:               #fff !default;<\/pre>\n\n\n\n
Google font example<\/p>\n\n\n\n
1 <link href=\"https:\/\/fonts.googleapis.com\/css?family=Montserrat:100,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,900\" rel=\"stylesheet\">
<\/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 Angly 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 Changing Default Variables Open _bootstrap-override.scss file under assets\/scss folder and change style variable values as per your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/pages\/43"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":8,"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/pages\/43\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/angly\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}