94 lines
5.1 KiB
HTML
94 lines
5.1 KiB
HTML
<!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&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"> <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 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 same</li>
|
||
<li>background color palette is used for the pie traffic chart and calendar on the dashboard 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 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">© 2015–2016 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> |