Adminlte: Documentation on adding aditional style colors for elements e.g. btn card

[semanticfire]

Is your feature request related to a problem? Please describe.
We would like to theme AdminLTE to match logo colors and add some aditional colors for cards and button e.g. btn-mytheme1

Describe the solution you'd like
Piece of documentation how to achieve this in the wiki

Describe alternatives you've considered
Copying existing styles and modify them in a seperate CSS. time consuming error prone

Additional context
Just changing the primary colors etc in the scss is not an ideal solution since warning/danger are still needed

[REJack]

That's a nice idea, I'll add a docs section for this in v3.1. For now I explain it here 😄

1. You need to setup a build environment like AdminLTE's (node-sass & node-sass-package-importer)

2. Create a Main SCSS file like this:

/*!
 *   AdminLTE v3.0.4
 *   Author: Colorlib
 *   Website: AdminLTE.io <http://adminlte.io>
 *   License: Open source - MIT <http://opensource.org/licenses/MIT>
 */

// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/bootstrap-variables';
@import '~bootstrap/scss/bootstrap';

// Variables and Mixins
// ---------------------------------------------------
@import '~admin-lte/variables';
@import '~admin-lte/mixins';

@import '~admin-lte/parts/core';
@import '~admin-lte/parts/components';
@import '~admin-lte/parts/extra-components';
@import '~admin-lte/parts/pages';
@import '~admin-lte/parts/plugins';
@import '~admin-lte/parts/miscellaneous';

1. Add a map-merge for the theme-colors like this:

/*!
 *   AdminLTE v3.0.4
 *   Author: Colorlib
 *   Website: AdminLTE.io <http://adminlte.io>
 *   License: Open source - MIT <http://opensource.org/licenses/MIT>
 */

// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/bootstrap-variables';
@import '~bootstrap/scss/bootstrap';

// Variables and Mixins
// ---------------------------------------------------
@import '~admin-lte/variables';
@import '~admin-lte/mixins';

$company: #00FF00;
$theme-colors: map-merge((
    'company': $company,
), $theme-colors);

@import '~admin-lte/parts/core';
@import '~admin-lte/parts/components';
@import '~admin-lte/parts/extra-components';
@import '~admin-lte/parts/pages';
@import '~admin-lte/parts/plugins';
@import '~admin-lte/parts/miscellaneous';

1. Compile a CSS file from the SCSS file 😄
2. Enjoy your custom theme color

[semanticfire]

Okay, great tip! I played around with it a bit and have some questions/remarks

• I see that I get a bunch of '*-company' styles which I can use ( great! )
• it will generate a full CSS, not a theme 'add-on' , correct ?
• I don't get btn-company styles?

Keep up the good work!

[REJack]

Yep it will create the complete AdminLTE css files, with v4 comes the skin support back.

It should create a btn-company style too, you could also use the mixins to create only the btn-company style like additional styles/skin for AdminLTE. I can give you later a code snippet to generate only these instead of compiling thr whole AdminLTE.

[semanticfire]

It currently does not create the btn-* styles

[REJack]

Ok I found my failure 😄 the file should look like this:

/*!
 *   AdminLTE v3.0.4
 *   Author: Colorlib
 *   Website: AdminLTE.io <http://adminlte.io>
 *   License: Open source - MIT <http://opensource.org/licenses/MIT>
 */

// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/build/scss/bootstrap-variables';

$company: #00FF00;
$theme-colors: map-merge((
    'company': $company,
), $theme-colors);

// Variables and Mixins
// ---------------------------------------------------
@import '~admin-lte/build/scss/variables';
@import '~admin-lte/build/scss/mixins';

@import '~bootstrap/scss/bootstrap';

@import '~admin-lte/build/scss/parts/core';
@import '~admin-lte/build/scss/parts/components';
@import '~admin-lte/build/scss/parts/extra-components';
@import '~admin-lte/build/scss/parts/pages';
@import '~admin-lte/build/scss/parts/plugins';
@import '~admin-lte/build/scss/parts/miscellaneous';

or for a simple skin you can use this:

// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/build/scss/bootstrap-variables';
@import '~bootstrap/scss/mixins';

$company: #00FF00;

.btn-company {
    @include button-variant($company, $company);
}

[semanticfire]

Now it works as expected!
For me the issue is done, but I guess you'll leave it open as documentation check?

[REJack]

Yep, I will close it if the docs information is added.