J'ai attrapé le virus 205

Intro

 

Jusqu'à présent j'ai eu 3 véhicules de tous les jours communément appelée une "dayli", en premier lieu j'avais acheté une Twingo phase 2 en version premium avec siège en cuir et toit ouvrant c'était en 2013 je venais d'avoir le permis, celle-ci ma lâcher peu de temps après il...

Afficher la suite...


Service d'hébergement spécialisé sur le cms 100% français PluXml.

Améliorer le skin du back-office PluXml

URédigé par Petit Pouyo P 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 :

 

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

Écrire un commentaire

↓