README

安装插件后，在 /public/vendor/admin-styler/css/admin-styler-custom.css 创建自己的文件
将下面的CSS复制到新的 admin-styler-custom.css 文件中，并根据您的喜好进行自定义

:root:root {
    /* Examples...
        ## Grayscale
        --colour-main-hue: 225;
        --colour-main-saturation: 0%;
        --colour-main-lightness: 10%;
        --background-saturation: 0%;
        --colour-grey-saturation: 0%;

        ## Light
        --colour-main-saturation: 0%;
        --colour-main-lightness: 10%;
        --background-saturation: 0%;
        --background-lightness: 98%;
    */
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME
    =================================================== */
    --colour-main-hue: 355;
    --colour-main-saturation: 80%;
    --colour-main-lightness: 50%;

    --colour-black-hue: var(--colour-main-hue);
    /* This is the default Statamic background hue */
    /* --colour-black-hue: 210; */

    --background-saturation: 31%;
    --background-lightness: 95%;

    /* Comment these out to reduce/control the saturation of form field backgrounds */
    /* --colour-grey-light-forms: hsl(var(--colour-black-hue), 0%, 99%); */
    /* --colour-grey-light-forms-1: hsl(var(--colour-black-hue), 0%, 99%); */
}

安装

composer require jaygeorge/admin-styler

通过命令行更新

运行 composer update

进一步阅读

这个插件是什么？

Admin Styler是一个非常简单的插件，允许您通过更改几个值来为不同的客户设计Statamic的Admin界面。由于CSS自定义属性和利用HSL颜色模型，简单的样式设计变得可能。

我已经小心翼翼地没有触及Statamic的美观设计；只是为客户的色调略作改动，保持相同的氛围。

它是如何工作的？

我已经尽可能多地使用了Statamic的选取器，并将它们映射到CSS自定义属性上。例如，您可以将 --colour-main-hue 改为红色色调，它将在网站上滚动，具有不同的亮度和饱和度。

我能看看内部结构吗？

是的，请查看 /vendor/jaygeorge/admin-styler/resources/css/admin-styler-base.css。但是请不要更改此CSS，当推送更新到插件时，它将被覆盖。相反，按照本README顶部说明，用 admin-styler-custom.css 覆盖它。

为什么使用色调？

使用色调（而不是RGB或十六进制代码）使色彩理论更容易理解。它还允许我们使用非常少的值轻松地对Admin进行主题化，而无需依赖于SCSS颜色函数等。

如果您对HSL不确定，我建议阅读 Sara Soueidan的博客文章，其中详细介绍了其优点。

为什么使用 :root:root？

admin-styler-custom.css 需要使用 :root:root 来覆盖基础样式。由于Statamic加载样式表的方式，admin-styler-custom.css 是在 admin-styler-base.css 之前加载的，因此我们需要增加特定性来覆盖它。加倍根是最干净的方式。如果您是插件世界的万事通，并且知道如何更改样式表的加载顺序，请告诉我！

反馈

请随时联系。您可以在Statamic的Discord频道或Twitter @ _JayGeorge找到我。

额外自定义示例

这里有一些额外示例，展示如何安全地覆盖Statamic的内容。

/* GROUP CUSTOM / LOGIN
=================================================== */
/* 

    Below is an example of a control panel override with a textured background
    Replace 'some-texture' with your own

*/
/* .outside.rad-theme {
    background: black;
}

.outside::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/img/some-texture");
    background-size: 100%;
    filter: grayscale(100%);
}

.outside::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsl(0 0% 0% / 0.8);
} */




/* GROUP COMPONENTS / WHITE LABEL LOGO
=================================================== */
/* Notes...

   - Statamic uses this class for White Label logos

*/

/* .white-label-logo {
    min-width: 50px;
    max-height: 25px!important;
} */

jaygeorge / admin-styler

维护者

详细信息