blur-admin/articles/011-changing-color-scheme/index.html

94 lines
5.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript">
<title>BlurAdmin documentation - Changing Color Scheme</title>
<link rel="alternate" href="http://localhost:8080/feed.xml" type="application/rss+xml" title="Ramblings of an immor(t)al demigod">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&amp;subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic">
<link rel="stylesheet" href="/blur-admin/css/main.css">
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
</head>
<body>
<div class="container">
<div class="nav-main">
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo">&nbsp;<span class="blur-label">Blur</span>Admin</a>
<ul class="nav-site nav-site-internal">
<li><a href="/blur-admin/">Home</a></li>
<li><a href="/blur-admin/articles/001-getting-started/" class="active">Docs</a></li>
</ul><span class="nav-docs-right">Need some help? Let us know! <a href="mailto:help@akveo.com">help@akveo.com</a></span>
</div>
</div>
<section class="content wrap documentationContent">
<div class="nav-docs">
<div class="nav-docs section">
<h3>Quick Start</h3>
<ul>
<li><a href="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Customization</h3>
<ul>
<li><a href="/blur-admin/articles/011-changing-color-scheme/" class="active">Changing Color Scheme</a></li>
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
<li><a href="/blur-admin/articles/013-create-new-page/">Create New Page</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Components</h3>
<ul>
<li><a href="/blur-admin/articles/051-sidebar/">Sidebar</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<h1>Changing Color Scheme</h1>
<div class="subHeader"></div><p>If you want to change template color scheme, you just need to do 4 simple&nbsp;steps:</p>
<p>1) Change color scheme in javascript (<code>src/app/theme/theme.constants.js</code>):</p>
<pre><code class="lang-javascript"> <span class="comment">// main color scheme</span>
<span class="keyword">var</span> colorScheme = {
primary: <span class="string">'#209e91'</span>,
info: <span class="string">'#2dacd1'</span>,
success: <span class="string">'#90b900'</span>,
warning: <span class="string">'#dfb81c'</span>,
danger: <span class="string">'#e85656'</span>,
};
<span class="comment">// background color palette</span>
<span class="keyword">var</span> bgColorPalette = {
blueStone: <span class="string">'#005562'</span>,
surfieGreen: <span class="string">'#0e8174'</span>,
silverTree: <span class="string">'#6eba8c'</span>,
gossip: <span class="string">'#b9f2a1'</span>,
white: <span class="string">'#ffffff'</span>,
};
</code></pre>
<ul>
<li>css colors and javascript colors in colorScheme object should be the&nbsp;same</li>
<li>background color palette is used for the pie traffic chart and calendar on the dashboard&nbsp;page</li>
</ul>
<p>2) Change colors in css (<code>src/sass/theme/conf/_colorScheme.scss</code>):</p>
<pre><code class="lang-scss"><span class="variable">$primary</span>: <span class="number">#209e91</span> !default;
<span class="variable">$info</span>: <span class="number">#2dacd1</span> !default;
<span class="variable">$success</span>: <span class="number">#90b900</span> !default;
<span class="variable">$warning</span>: <span class="number">#dfb81c</span> !default;
<span class="variable">$danger</span>: <span class="number">#e85656</span> !default;
</code></pre>
<p>3) Replace background images: <code>src/app/assets/img/blur-bg.jpg</code> and <code>src/app/assets/img/blur-bg-blurred.jpg</code></p>
<p>4) build source files and run application: <code>gulp</code> and <code>gulp serve</code></p>
<p>Below is an example of template with another color&nbsp;scheme:</p>
<p><img src="/blur-admin/articles/011-changing-color-scheme/new-color-scheme.jpg" alt=""></p>
</div>
</section>
<footer class="wrap">
<div class="left">Powered by Angular, Bootsrap, Gulp and more...</div>
<div class="right">© 20152016 Akveo LLC<br />Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</div>
</footer>
</div>
</body>
</html>