Améliorer le skin du back-office PluXml

lavoielibre.fr hébergeur français, éthique et libre

Enfin un hébergeur français qui propose de l’hébergement web pur en mode mutualisé. Il s'agit d'un concept initié par moi-même Stéphane Tortelier-Gambirasio alias petitpouyo.

Mon projet vise essentiellement les internautes qui cherchent à garder le contrôle de leur empreintes numériqu...

Afficher la suite...

La Voie Libre, hébergeur français éthique et libre

Améliorer le skin du back-office PluXml

URédigé par Petit Pouyo P26 octobre 2021 eAucun commentaire

Si vous trouvez l'aspect du back-office de PluXml un peu désuet, je vous propose de créer une feuille de style supplémentaire pour un interface plus agréable.

Que vous soyez bidouilleur ou que vous voulez vraiment rendre l'interface à votre goût je vous propose une feuille de style pour personnaliser le back-office.

Cette feuille de style (.css) est entièrement personnalisable selon vos goûts et préférences. Cette modification interne à PluXml nous rappelle que ce CMS est entièrement maniable selon vos désirs.

Encore une fois il faut remercier bazooka07 pour son partage à la communauté de PluXml.

thead,
tbody tr:not(.new) td:first-of-type:not([colspan]),
table[data-rows-num] tr[draggable] td:first-of-type,
form .sidebar {
    background-color: #e0e0e0;
    color: #000;
}
.menu.expanded li {
    margin-left: 0.75rem;
}
.section .action-bar,
.aside {
    background-color: #113867;
    color: #e0e0e0;
}
.section .action-bar {
    border-left: 1px;
}
.section .action-bar a {
    color: inherit;
}
#responsive-menu li.active {
    background-color: #3fbabb;
}

.aside .unstyled-list.profil,
.aside .menu-config {
    background-color: transparent;
}

.ddcat {
    width: auto;
}
/* .aside et .action-bar avec position: fixed :
 * Impossible d'utiliser display: grid ou flex !
 * */

@media screen and (min-width: 43rem) {
    body .section {
        padding: 0.5rem 1.5rem 0 0.5rem;
    }

    .in-action-bar { margin-top: 7.5rem; }

    body { --aside-width: 17rem; }

    body .main .aside { width: var(--aside-width); }
    body .main .section { margin-left: var(--aside-width); width: calc(100% - var(--aside-width)); }
    body .main .section .action-bar { left: var(--aside-width); }

    .scrollable-table {
        padding-bottom: 1rem;
    }

    #pagination {
        margin: 0.5rem 0 0;
    }
}

@media screen and (min-width: 43rem) and (max-width: 65rem) {
    #article,
    #statique,
    #categorie,
    #parametres_plugin { --aside-width: 0; }
    #article .main .aside,
    #statique .main .aside,
    #categorie .main .aside,
    #parametres_plugin .main .aside { display: none; }
    #article .main.grid,
    #statique .main.grid,
    #categorie .main.grid,
    #parametres_plugin .main.grid,
    #article .action-bar,
    #statique .action-bar,
    #categorie .action-bar,
    #parametres_plugin .action-bar { margin: 0; }

    #form_article > .grid > .col {
        padding-right: 0.5rem;
    }
}

@media screen and (min-width: 49rem) {
    #form_article > .grid {
        display: grid;
        grid-template-columns: 1fr 25rem;
        margin-right: 0.15rem;
    }

    #form_article > .grid > div {
        width: auto;
    }
}

@media screen and (min-width: 65rem) {
    body .section {
        padding-left: 1.5rem;
    }
    #form_article > .grid {
        grid-template-columns: 1fr 32rem;
    }
    #form_article > .grid > .col {
        padding-right: 1.5rem;
    }
}

Enregistrer cette feuille CSS dans un fichier admin.css dans le dossier data de votre site.
Aller ensuite dans paramètres avancées de PluXml.
Dans le champ "Emplacement et nom du fichier css personnel" saisir "data/admin.css".

Et voilà :