diff --git a/articles/001-getting-started/index.html b/articles/001-getting-started/index.html index edbd312..2a33521 100644 --- a/articles/001-getting-started/index.html +++ b/articles/001-getting-started/index.html @@ -33,8 +33,8 @@

Customization

diff --git a/articles/002-installation-guidelines/index.html b/articles/002-installation-guidelines/index.html index c541753..aa28393 100644 --- a/articles/002-installation-guidelines/index.html +++ b/articles/002-installation-guidelines/index.html @@ -33,8 +33,8 @@

Customization

diff --git a/articles/011-changing-color-scheme/index.html b/articles/011-changing-color-scheme/index.html index aee3291..153abe8 100644 --- a/articles/011-changing-color-scheme/index.html +++ b/articles/011-changing-color-scheme/index.html @@ -33,8 +33,8 @@

Customization

@@ -48,32 +48,44 @@

Changing Color Scheme

-

If you want to change template color scheme, you need to do 4 simple steps:

-

1) Override theme and colors in config (src/app/theme/theme.config.js):

-
  baConfigProvider.changeTheme({blur: true});
-
-  baConfigProvider.changeColors({
-    default: 'rgba(#000000, 0.2)',
-    defaultText: '#ffffff',
-    dashboard: {
-      white: '#ffffff',
-    },
-  });
-
-

Note:

-
    -
  • you shouldn’t change default config directly (theme.configProvider.js). Instead of that you can override color scheme on the configuration step (theme.config.js)
    • -
-

2) Create your own color scheme, like src/sass/theme/conf/colorScheme/_mint.scss and src/sass/theme/conf/colorScheme/_blur.scss. And replace it in src/sass/theme/common.scss file:

+

We tried to make the process of changing color scheme in BlurAdmin as easy as possible.

+

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.

+

First we advice you to take some colorscheme file as a basis. +For light themes we suggest you to take src/sass/theme/conf/colorScheme/_mint.scss one and for dark take src/sass/theme/conf/colorScheme/_blur.scss one. +As we want dark theme, we’re taking blur.

+

1) Copy src/sass/theme/conf/colorScheme/_blur.scss to src/sass/theme/conf/colorScheme/_dark.scss.

+

2) Include your colorscheme file in src/sass/theme/common.scs.

+

To do this, replace 

@import 'theme/conf/colorScheme/mint';

to

-
@import 'theme/conf/colorScheme/custom';
+
@import 'theme/conf/colorScheme/dark';
 

-
3) Replace background images: src/app/assets/img/blur-bg.jpg and src/app/assets/img/blur-bg-blurred.jpg

-
4) Run application gulp serve

-
Here’s an example of template with another color scheme:

+
Now you can start changing your colors.
+For example, after playing a bit with different colors, we changed 5 first main variables in _dark.scss file:

+
$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)
+

+
After this is done, you need to setup javascript to use same colors while building charts and other javascript components.
+To do this, add following code to some configuration block, for example to src/app/theme/theme.config.js:

+
  baConfigProvider.changeColors({
+    default: '#4e4e55',
+    defaultText: '#e2e2e2',
+  });
+

+
That’s basically it! Right now your admin application should look like this:

 

+
For further reference, please look in

+
    
+
  • Colorscheme scss file (src/sass/theme/conf/colorScheme/_mint.scss or src/sass/theme/conf/colorScheme/_blur.scss)
    • 
+
  • src/app/theme/theme.configProvider.js to understand which javascript colors can be changed
    • 
+
  • If you want to know how to change theme to blur, read following article
    • 
+
diff --git a/articles/011-changing-color-scheme/new-color-scheme.jpg b/articles/011-changing-color-scheme/new-color-scheme.jpg index e95600d..72d8dc7 100644 Binary files a/articles/011-changing-color-scheme/new-color-scheme.jpg and b/articles/011-changing-color-scheme/new-color-scheme.jpg differ diff --git a/articles/012-project-structure/index.html b/articles/012-project-structure/index.html index c869d30..461b08d 100644 --- a/articles/012-project-structure/index.html +++ b/articles/012-project-structure/index.html @@ -33,8 +33,8 @@

Customization

diff --git a/articles/013-create-new-page/index.html b/articles/013-create-new-page/index.html index d164a0f..22de47d 100644 --- a/articles/013-create-new-page/index.html +++ b/articles/013-create-new-page/index.html @@ -33,8 +33,8 @@

Customization

diff --git a/articles/014-switch-to-blur-theme/index.html b/articles/014-switch-to-blur-theme/index.html index 4292243..0cbb224 100644 --- a/articles/014-switch-to-blur-theme/index.html +++ b/articles/014-switch-to-blur-theme/index.html @@ -5,7 +5,7 @@ - BlurAdmin documentation - Switching to Blur Theme + BlurAdmin documentation - Enabling blur theme @@ -33,8 +33,8 @@

Customization

@@ -47,12 +47,18 @@
-

Switching to Blur Theme

-

If you want to switch theme to the blur, you need to do 2 simple steps:

-

1) Override theme and colors in config (src/app/theme/theme.config.js):

+

Enabling blur theme

+

If you want to switch theme to the blur, you need to follow 3 simple steps:

+

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 configuration block. +For example you can add following lines to src/app/theme/theme.config.js:

  baConfigProvider.changeTheme({blur: true});
-
-  baConfigProvider.changeColors({
+
+

2) As well you need to change some colors. +For example Mint‘s default gray text color doesn’t look good on blurred panels. +For our blur theme we use following configuration:

+
  baConfigProvider.changeColors({
     default: 'rgba(#000000, 0.2)',
     defaultText: '#ffffff',
     dashboard: {
@@ -60,12 +66,22 @@
     },
   });
-

2) Replace theme in src/sass/theme/common.scss file:

+

3) CSS should also be recompiled. +Before running build command, we suggest you to switch to blur color profile. +To do this replace theme in file src/sass/theme/common.scss:

@import 'theme/conf/colorScheme/mint';

to

@import 'theme/conf/colorScheme/blur';
+

3.1) If you would like to use some different background, replace following images:

+
    +
  • src/app/assets/img/blur-bg.jpg (main background image)
    • +
  • src/app/assets/img/blur-bg-blurred.jpg (blurred background image used on panels)
    • +
+

We suggest using 10px Gaussian blur to blur original image.

+
+

That’s it! You have successfully blurred your theme! Run gulp serve and check it out.

diff --git a/articles/051-sidebar/index.html b/articles/051-sidebar/index.html index d1cd87b..67c5108 100644 --- a/articles/051-sidebar/index.html +++ b/articles/051-sidebar/index.html @@ -33,8 +33,8 @@

Customization