blur-admin/articles/014-switch-to-blur-theme/index.html

105 lines
6.2 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 - 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&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:contact@akveo.com">contact@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/">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>
</div>
<div class="nav-docs section">
<h3>Components</h3>
<ul>
<li><a href="/blur-admin/articles/051-sidebar/">Sidebar</a></li>
</ul>
</div>
<div class="nav-docs section">
<h3>Other</h3>
<ul>
<li><a href="/blur-admin/articles/091/">Downloads</a></li>
</ul>
</div>
</div>
<div class="inner-content">
<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&nbsp;steps:</p>
<p>1) Blur theme needs some javascript to calculate initial background offsets for panels.
Thats 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>});
</code></pre>
<p>2) As well you need to change some colors.
For example <em>Mint</em>s default gray text color doesnt look good on blurred panels.
For our blur theme we use following&nbsp;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: {
white: <span class="string">'#ffffff'</span>,
},
});
</code></pre>
<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&nbsp;images:</p>
<ul>
<li><code>src/app/assets/img/blur-bg.jpg</code> (main background&nbsp;image)</li>
<li><code>src/app/assets/img/blur-bg-blurred.jpg</code> (blurred background image used on&nbsp;panels)</li>
</ul>
<p>We suggest using 10px Gaussian blur to blur original&nbsp;image.</p>
<hr>
<p>Thats it! You have successfully blurred your theme! Run <code>gulp serve</code> and check it&nbsp;out.</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><a href="https://github.com/akveo/blur-admin"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q || []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61945105-3', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>