AdminLTELogo

追加のスタイル / カスタムスキン

ボタン、背景ユーティリティ、またはその他の企業固有の色などの追加のスタイルを作成する場合は、次のSCSSテンプレートを使用してAdminLTE独自のサブバージョンを作成できます。

この例では、別のボタンスタイルと.my-custom-styleというカスタムクラスを使用して`.btn-custom-color`というカスタムボタンクラスを作成します。

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

// Custom Theme Color START
$custom-color: #00FF00;
$theme-colors: map-merge((
    'custom-color': $custom-color,
), $theme-colors);
// Custom Theme Color END

// Variables and Mixins
// ---------------------------------------------------
@import '~admin-lte/build/scss/variables';
@import '~admin-lte/build/scss/variables-alt';
@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';

// Custom Style START
.my-custom-style {
  background-color: $custom-color;
  padding: .5rem 0;
}
// Custom Style END

次のSCSSテンプレートを使用して、AdminLTE上にスキンを作成することもできます。

この例では、追加ボタンスタイルを使用して`.btn-custom-color`というカスタムクラスを作成します。

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

$custom-color: #00FF00;

.btn-custom-color {
    @include button-variant($custom-color, $custom-color);
}
警告!

これらの例は単なるSCSSテンプレートです。SCSSをCSSにコンパイルするには、SCSS -> CSSビルドスクリプトが必要になります!