Améliorer le skin du back-office PluXml

Pourquoi je n'ai pas choisi WHMCS

L'errance sur la toile

En tant qu'auto-entrepreneur avec une activité de réparation tech j'utilise Abby pour facturer mes clients mais le seul soucis de ce type de plateforme c'est qu'il faut sans cesse créer une facture manuellement à chaque nouvel utilisateur de LVL.

Sur internet le boss...

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