Améliorer le skin du back-office PluXml

URédigé par Petit Pouyo P26 octobre 2021 eAucun commentaire | 72 vue(s)

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à :

• Couleurs plus agréables.
• Moins d'espaces perdus dans les "sidebars" si on agrandit la fenêtre

L'archive zip de la feuille est téléchargeable ici : https://gist.github.com/bazooka07/f38d3e305aaaa228ee4638851f732197
Ce cela ressemble à cela :

• https://flic.kr/p/2j5ESvn
• https://flic.kr/p/2j5Cf3J

 

DClassé dans : PluXml ,Mots clés : personnaliser admin, personnaliser skin back-office, personnaliser back-office, personnalisation pluxml