mirror of https://github.com/akveo/blur-admin
Update 2016-05-16T14:25:08.990Z
parent
56d9da358b
commit
b457d2377c
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</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>
|
||||
|
|
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</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>
|
||||
|
|
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/" class="active">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</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>
|
||||
|
@ -48,32 +48,44 @@
|
|||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Changing Color Scheme</h1>
|
||||
<div class="subHeader"></div><p>If you want to change template color scheme, you need to do 4 simple steps:</p>
|
||||
<p>1) Override theme and colors in config (<code>src/app/theme/theme.config.js</code>):</p>
|
||||
<pre><code class="lang-javascript"> baConfigProvider.changeTheme({blur: <span class="literal">true</span>});
|
||||
|
||||
baConfigProvider.changeColors({
|
||||
<span class="keyword">default</span>: <span class="string">'rgba(#000000, 0.2)'</span>,
|
||||
defaultText: <span class="string">'#ffffff'</span>,
|
||||
dashboard: {
|
||||
white: <span class="string">'#ffffff'</span>,
|
||||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p>Note:</p>
|
||||
<ul>
|
||||
<li>you shouldn’t change default config directly (<code>theme.configProvider.js</code>). Instead of that you can override color scheme on the configuration step (<code>theme.config.js</code>)</li>
|
||||
</ul>
|
||||
<p>2) Create your own color scheme, like <code>src/sass/theme/conf/colorScheme/_mint.scss</code> and <code>src/sass/theme/conf/colorScheme/_blur.scss</code>. And replace it in <code>src/sass/theme/common.scss</code> file:</p>
|
||||
<div class="subHeader"></div><p>We tried to make the process of changing color scheme in BlurAdmin as easy as possible. </p>
|
||||
<p>By default BlurAdmin has two color profiles: mint and blur.
|
||||
This article will help you to create your own color profile.
|
||||
Let’s say you want to make BlurAdmin dark.</p>
|
||||
<p>First we advice you to take some colorscheme file as a basis.
|
||||
For light themes we suggest you to take <code>src/sass/theme/conf/colorScheme/_mint.scss</code> one and for dark take <code>src/sass/theme/conf/colorScheme/_blur.scss</code> one.
|
||||
As we want dark theme, we’re taking <code>blur</code>.</p>
|
||||
<p>1) Copy <code>src/sass/theme/conf/colorScheme/_blur.scss</code> to <code>src/sass/theme/conf/colorScheme/_dark.scss</code>.</p>
|
||||
<p>2) Include your colorscheme file in <code>src/sass/theme/common.scs</code>.</p>
|
||||
<p>To do this, replace </p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/mint'</span>;
|
||||
</code></pre>
|
||||
<p>to</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/custom'</span>;
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/dark'</span>;
|
||||
</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) Run application <code>gulp serve</code></p>
|
||||
<p>Here’s an example of template with another color scheme:</p>
|
||||
<p>Now you can start changing your colors.
|
||||
For example, after playing a bit with different colors, we changed 5 first main variables in <code>_dark.scss</code> file:</p>
|
||||
<pre><code class="lang-sass">$default: rgba(#000000, 0.2); //Panel background color
|
||||
$body-bg: #F0F3F4; // Body background color
|
||||
$default-text: #ffffff; // Default text color
|
||||
$help-text: #eeeeee; // Default subtext color
|
||||
$label-text: #ffffff; // Text for labels in forms (Basically it should be equal to default-text in most cases)
|
||||
</code></pre>
|
||||
<p>After this is done, you need to setup javascript to use <strong>same colors</strong> while building charts and other javascript components.
|
||||
To do this, add following code to some configuration block, for example to <code>src/app/theme/theme.config.js</code>:</p>
|
||||
<pre><code class="lang-javascript"> baConfigProvider.changeColors({
|
||||
<span class="keyword">default</span>: <span class="string">'#4e4e55'</span>,
|
||||
defaultText: <span class="string">'#e2e2e2'</span>,
|
||||
});
|
||||
</code></pre>
|
||||
<p>That’s basically it! Right now your admin application should look like this:</p>
|
||||
<p><img src="/blur-admin/articles/011-changing-color-scheme/new-color-scheme.jpg" alt=""></p>
|
||||
<p>For further reference, please look in</p>
|
||||
<ul>
|
||||
<li>Colorscheme scss file (<code>src/sass/theme/conf/colorScheme/_mint.scss</code> or <code>src/sass/theme/conf/colorScheme/_blur.scss</code>)</li>
|
||||
<li><code>src/app/theme/theme.configProvider.js</code> to understand which javascript colors can be changed</li>
|
||||
<li>If you want to know how to change theme to blur, read <a href="/blur-admin/articles/014-switch-to-blur-theme/">following article</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 252 KiB After Width: | Height: | Size: 239 KiB |
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||||
<li><a href="/blur-admin/articles/012-project-structure/" class="active">Project Structure</a></li>
|
||||
<li><a href="/blur-admin/articles/013-create-new-page/">Create New Page</a></li>
|
||||
</ul>
|
||||
|
|
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</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/" class="active">Create New Page</a></li>
|
||||
</ul>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<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 - Switching to Blur Theme</title>
|
||||
<title>BlurAdmin documentation - Enabling blur theme</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">
|
||||
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/" class="active">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/" class="active">Enabling blur theme</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>
|
||||
|
@ -47,12 +47,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="inner-content">
|
||||
<h1>Switching to Blur Theme</h1>
|
||||
<div class="subHeader"></div><p>If you want to switch theme to the blur, you need to do 2 simple steps:</p>
|
||||
<p>1) Override theme and colors in config (<code>src/app/theme/theme.config.js</code>):</p>
|
||||
<h1>Enabling blur theme</h1>
|
||||
<div class="subHeader"></div><p>If you want to switch theme to the blur, you need to follow 3 simple steps:</p>
|
||||
<p>1) Blur theme needs some javascript to calculate initial background offsets for panels.
|
||||
That’s why first thing you need to do is enable that code.
|
||||
This should be done in Angular <strong>configuration block</strong>.
|
||||
For example you can add following lines to <code>src/app/theme/theme.config.js</code>:</p>
|
||||
<pre><code class="lang-javascript"> baConfigProvider.changeTheme({blur: <span class="literal">true</span>});
|
||||
|
||||
baConfigProvider.changeColors({
|
||||
</code></pre>
|
||||
<p>2) As well you need to change some colors.
|
||||
For example <em>Mint</em>‘s default gray text color doesn’t look good on blurred panels.
|
||||
For our blur theme we use following configuration:</p>
|
||||
<pre><code class="lang-javascript"> baConfigProvider.changeColors({
|
||||
<span class="keyword">default</span>: <span class="string">'rgba(#000000, 0.2)'</span>,
|
||||
defaultText: <span class="string">'#ffffff'</span>,
|
||||
dashboard: {
|
||||
|
@ -60,12 +66,22 @@
|
|||
},
|
||||
});
|
||||
</code></pre>
|
||||
<p>2) Replace theme in <code>src/sass/theme/common.scss</code> file:</p>
|
||||
<p>3) <span class="caps">CSS</span> should also be recompiled.
|
||||
Before running build command, we suggest you to switch to <em>blur</em> color profile.
|
||||
To do this replace theme in file <code>src/sass/theme/common.scss</code>:</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/mint'</span>;
|
||||
</code></pre>
|
||||
<p>to</p>
|
||||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/blur'</span>;
|
||||
</code></pre>
|
||||
<p>3.1) If you would like to use some different background, replace following images:</p>
|
||||
<ul>
|
||||
<li><code>src/app/assets/img/blur-bg.jpg</code> (main background image)</li>
|
||||
<li><code>src/app/assets/img/blur-bg-blurred.jpg</code> (blurred background image used on panels)</li>
|
||||
</ul>
|
||||
<p>We suggest using 10px Gaussian blur to blur original image.</p>
|
||||
<hr>
|
||||
<p>That’s it! You have successfully blurred your theme! Run <code>gulp serve</code> and check it out.</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
@ -33,8 +33,8 @@
|
|||
<div class="nav-docs section">
|
||||
<h3>Customization</h3>
|
||||
<ul>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Switching to Blur Theme</a></li>
|
||||
<li><a href="/blur-admin/articles/011-changing-color-scheme/">Changing Color Scheme</a></li>
|
||||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</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>
|
||||
|
|
Loading…
Reference in New Issue