theme (pour l’admin)

[Rémy - @webdesignrr]

j'ai changé un peu le CSS de l'admin pour qu'il soit plus conforme au look de prestashop.com

( et je dois admettre que l'actuel ne me convient pas trop, alors j'ai tenté de clarifier certains points)

 

Alors je vous le propose ici, il suffit de remplacer tout le fichier css > admin.css par le code en bas de ce message :

 

L'ideal serait de revoir également les icones car les transparence ne sont pas correctes ( il aurait mieux fallu les prévoir en png) mais je n'ai préféré toucher qu' au css il reste egalement des styles en dur dans les pages sur lesquels je ne pouvait intervenir

 

les nouvelles images appelé sont celle hébergé chez prestashop.com

 

Voici une preview :

Qu'en pensez-vous ?

 

 

 

 

 

/*--------------------------------------------------------------------------------------------------------------------------------*/

/* CSS Admin PrestaShop */

 

body {

margin: 0;

padding: 0;

font-family: Verdana,Arial,Helevetica,sans-serif;

font-size: 12px;

color: #000;

text-align: center;

background-color: #e4e4e4;

}

 

a img {

border: 0;

}

 

a {

color: #C83279;

}

 

a:hover {

text-decoration: none;

}

 

img {

vertical-align: middle;

}

 

p {

margin: 0.5em 0;

}

 

hr {

border: none;

height: 1px;

color: #3A88C3;

background-color: #83C7F3;

padding: 0;

margin-top: 10px;

margin-bottom: 10px;

}

 

/* FONTS */

 

legend, th {

font-family : Trebuchet,Arial,Helvetica,sans-serif;

}

 

h1, h2, h3, h4, h5, h6 {

font-family : "Trebuchet MS",Trebuchet,Arial,Helvetica,sans-serif;

}

 

h1 {

font-size: 1.6em;

margin: 1em 0 .67em 0;

}

h2 {

font-size: 1.4em;

margin: 1em 0 .83em 0;

color: #268CCD;

border-bottom:2px solid  #268CCD;

}

h3 {

font-size: 1.1em;

margin: 1em 0 .83em 0;

}

h4 {

margin: 1.33em 0;

}

h5 {

font-size: 0.83em;

margin: 1.67em 0;

}

h6 {

font-size: 0.67em;

margin: 2.33em 0;

}

 

h3.blue {

color: #268CCD;

}

 

.path_bar {

padding:5px; background-color:#e4e4e4;

color:#666;

border-bottom:1px dotted #666;

}

 

.path_bar a {

color:#666;

}

 

.cat_bar {

font-weight: bold;

padding:5px;

background-color:#d0d0d0;

margin-bottom:20px;

}

 

.cat_bar a {

color:#666;

}

 

/* FORMS */

 

form {

margin: 0;

padding: 0;

}

 

form p {

margin: 0.5em 0 0 0;

padding: 0 0 0.5em 0;

}

 

form sup {

color: #CC0000;

font-weight: bold;

vertical-align: text-top;

}

 

.margin-form {

padding: 0 0 1em 190px;

color: #7F7F7F;

font-size: 0.85em;

}

 

fieldset.width1 .margin-form {

margin: 0 0 1em 130px;

}

 

fieldset {

/*width: 515px;*/

margin: 10px 0 0 0;

padding: 1em;

border: 1px solid #83C7F3;

background: #ecf4fe;

font-size: 1.1em;

}

 

fieldset img {

padding: 0 4px 0 0;

vertical-align: bottom;

}

 

legend {

margin: 0;

padding: 0.2em 0.5em;

border: 1px solid #83C7F3;

background: #fff;

font-weight: bold;

text-align: left;

}

 

label {

float: left;

width: 170px;

padding: 0.2em 0 0 0;

text-align: right;

font-size: 0.9em;

font-weight: bold;

}

 

label.t {

float: none;

clear: none;

padding: 0px;

margin: 0px;

font-weight: normal;

font-size: 12px;

}

 

fieldset.width1 label {

width: 110px;

}

 

label:after {

clear: both;

}

 

input, textarea, option {

color: #000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

margin: 0;

padding: 0;

}

 

input[type=text], input[type=password], input[type=file], textarea {

padding: 2px 4px;

border: 1px solid #268CCD;

border: 1px solid #ccc;

}

 

select {

font-family: Verdana, Arial, Helvetica, sans-serif;

border: 1px solid #268CCD;

border: 1px solid #ccc;

}

 

input:focus, textarea:focus {

border: 1px solid #268CCD;

background-color: #D5E1F2;

}

 

/* STRCTURE */

 

#container {

width: 960px;

margin: 0 auto 2em auto;

text-align: left;

}

 

#main {

clear: left;

}

 

#content {

padding: 1.25em;

background-color: #FFF;

}

 

#news {

width: 640px;

border: 1px solid #E0D0B1;

}

 

#help {

float: right;

width: 150px;

padding: 4px;

border: 1px solid #DFD5C3;

font-size: 0.9em;

}

 

#image {

float: right;

padding: 4px;

border: 1px solid #DFD5C3;

font-size: 0.9em;

text-align: center;

}

 

#product_link {

width: 240px;

float: right;

padding: 4px;

margin-top: 8px;

font-size: 0.9em;

text-align: center;

clear: right;

}

 

#help:after,

#image:after {

clear: both;

}

 

/* NAV */

 

#nav {

float: right;

margin: 1em 0;

font-size: 1.1em;

font-weight: bold;

vertical-align: middle;

}

 

#nav li {

display: inline;

list-style: none;

margin: 0 0 0 2em

}

 

#nav img {

vertical-align: bottom;

 

}

 

/* MENU */

 

#menu {

float: left;

width: 100%;

height: 31px;

margin: 0;

padding: 0;

line-height : normal;

background:url(http://www.prestashop.com/img/menu-bg-slim.gif)

 

}

 

#menu li {

float: left;

list-style: none;

margin : 0 -1px 0 0;

padding : 0 0 0 5px;

}

 

#menu img {

display: inline;

padding: 0 4px 0 0;

vertical-align: text-bottom;

 

}

 

#menu a {

float: left;

display: block;

padding: 10px 10px 5px 3px;

font-family: Arial,Helvetica,sans-serif;

font-weight: bold;

font-size: 13px;

color:#fff;

text-decoration:none

}

 

#menu li.active, #menu li.active:hover {

background-position: 0 0;

background:#cee2fb

}

#menu li.active a, #menu li.active:hover a {

padding-bottom: 6px;

background-position: 100% 0;

color: #000;

text-decoration: none;

background:#cee2fb

}

#menu li:hover {

background-position: 0 -220px;

}

#menu li:hover a {

background-position: 100% -220px;

color: #000;

text-decoration: none;

}

 

/* SUBMENU */

 

#submenu {

clear: left;

margin: 0;

padding: 0.5em 1em;

border-bottom: 1px solid #CCC;

background: #cee2fb;

color: #666;

}

 

#submenu li {

display: inline;

list-style: none;

margin: 0 5pt 0 0;

}

 

#submenu img {

vertical-align: middle;

}

 

#submenu a{ color:#0473B6; text-decoration:none}

#submenu a:hover {

color: #000;

text-decoration: underline;

}

 

/* CONTENT */

 

/* ERROR */

 

#content .alert {

/*width: 400px;*/

margin: 10px 0 15px 0;

padding: 10px 15px;

border-top: 1px solid #DF7B7B;

border-bottom: 1px solid #DF7B7B;

background-color: #FFE6E6;

color:#C83279;

 

}

 

#content .warning {

/*width: 400px;*/

margin: 10px 0 15px 0;

line-height: 20px;

padding: 10px 15px;

border-top: 1px solid #C83279;

border-bottom: 1px solid #C83279;

background-color:#FFE6E6;

color:#C83279;

}

 

#content .conf {

margin: 10px 0 15px 0;

line-height: 20px;

padding: 10px 15px;

border-top: 1px solid #65B822;

border-bottom: 1px solid #65B822;

background-color: #c4f999;

}

 

#content .confirm h3 {

padding: 0 0 0 20px;

background: url(../img/admin/ok.gif) no-repeat 0 0;

}

 

#content .warn h3 {

padding: 0 0 0 20px;

background: url(../img/admin/warning.gif) no-repeat 0 0;

}

 

#content .error h3 {

padding: 0 0 0 20px;

background: url(../img/admin/warning.gif) no-repeat 0 0;

}

 

#content .error ol {

padding-bottom: 0;

}

 

/* CONTENT - COLUMN */

 

.column {

float: left;

width: 173px;

margin: 0 50px 1.5em 0;

padding: 10px;

-moz-border-radius: 20px;

text-align: center;

}

 

#col_1 {

height: 235px;

color: #FFFFFF;

background: #FF8C76 url(../img/admin/col_1.gif) no-repeat;

}

 

#col_2 {

height: 235px;

color: #FFFFFF;

background: #FFC44F url(../img/admin/col_2.gif) no-repeat;

}

 

#col_3 {

height: 235px;

color: #FFFFFF;

background: #8CFF70 url(../img/admin/col_3.gif) no-repeat;

}

 

/* CONTENT - NEWS */

 

#news img {

padding: 0 6px 0 0;

vertical-align: middle;

}

 

#news .infos,

#news .content {

margin: 0;

padding: 4px;

font-family: Arial,Helvetica,sans-serif;

font-weight: normal;

}

 

/* CONTENT - TABLES */

table{/* width:100%;*/}

 

.table {

padding: 0;

}

 

.table th a {

text-decoration: underline;

}

.table th br { display:none}

 

.table a:hover {

text-decoration: none;

}

 

.table tr th {

padding: 4px 6px;

background:#AFC9E6 url(http://www.prestashop.com/img/download_bg.gif) repeat-x top left;

 

}

 

 

.table tr td {

padding: 4px;

border-bottom: 1px solid #83c7f3;

font-size: 0.9em;

}

 

.table tr.last td {

border-bottom: none;

}

 

/* FOOTER */

 

#footer {

clear: both;

font-size: 0.9em;

text-align: center; color:#666666

}

#footer a{ color:#666666}

/* CLASS */

 

h3.title {

clear: both;

margin: 0;

padding: 4px 10px;

border: 1px solid #E0D0B1;

border: none;

}

 

h3.subtitle {

color: #FF8D42;

font-size: 1.2em;

}

 

p.infos {

float: right;

margin: 0;

padding: 0;

font-size: 0.9em;

line-height: 1em;

vertical-align: top;

}

 

.width1 {

width: 350px;

}

 

.width2 {

width: 500px;

}

 

.width3 {

width: 745px;

}

 

.widthfull {

width: 100%;

}

 

 

.contextnav {

margin: 10px 0;

padding: 3px 6px;

line-height: 1.30em;

border: 1px solid #E0D0B1;

}

 

.contextnav img {

vertical-align: text-top;

}

 

.contextnavleft {

float: left;

width: 6em;

}

 

.contextnavcenter {

text-align: center;

}

 

.contextnavcenter a,

.contextnavcenter b {

letter-spacing: 6pt;

}

 

.contextnavright {

float: right;

width: 6em;

text-align: right;

}

 

.button {

color: #C83279;

padding: 3px;

border:none;

border:1px solid #FF99CC;

background:#fff;

}

 

.button:hover {

background-color: #C83279;

color:#fff;

}

 

.hidden {

height: 1px;

border-width: 1px 0 0 0;

border-style: solid;

border-color: #fff;

}

 

.clear {

clear: both;

}

 

.space {

margin-top: 1em;

}

 

.pspace {

padding-top: 1em;

}

 

.double-space {

margin-top: 2em ;

}

 

.space-bottom {

margin-bottom: 1em;

}

 

.double-bottom-space {

margin-bottom: 2em ;

}

 

.left {

text-align: left;

}

 

.center {

text-align: center;

}

 

.right {

text-align: right;

}

 

.small {

font-size: 0.85em;

}

 

.bold {

font-weight: bold;

}

 

.row {

background: #F4E6C9 url(../img/admin/news-bg.gif) repeat-x top left;

}

 

.alt_row {

background-color: #D5E1F2;

}

 

.noborder {

border: none;

}

 

.highlight {

background-color: #FFFF66;

font-weight: bold;

}

 

.discount_name {

background: #FFEBCC;

padding: 2px;

text-transform: uppercase;

}

 

.language_flags {

clear: both;

display: none;

width: 100px;

width: 80px;

background: #FFF;

padding: 8px;

border: 1px solid #555;

}

 

.pointer {

cursor: pointer;

}

 

.green {

color: forestgreen;

}

 

 

/* access management */

#ajax_confirmation {

padding-top: 3px;

padding-bottom: 6px;

}

 

/* help boxes */

/* The hint to Hide and Show */

.hint {

  display: none;

  float: left;

    position: relative;

    left: 0px;

    width: 200px;

margin-top: 4px;

    margin-bottom: 2px;

    border: 1px solid #c93;

  padding: 6px;

  color: #7F7F7F;

    /* to fix IE6, I can't just declare a background-color,

    I must do a bg image, too!  So I'm duplicating the pointer.gif

    image, and positioning it so that it doesn't show up

    within the box */

    background: #ffc url(pointer.gif) no-repeat -10px 5px;

 

border: 1px solid #C83279;

background-color:#FFE6E6;

color:#C83279;

}

 

/* The pointer image is hadded by using another span */

.hint .hint-pointer {

    position: absolute;

    left: -10px;

    top: 5px;

    width: 10px;

    height: 19px;

    background: url(pointer.gif) left top no-repeat;

}

 

.selected_language {

    border: 1px solid #BBB;

    padding: 3px;

    margin-bottom: -4px;

}

 

 

 

fieldset {

_position: relative;

}

 

legend {

_position: relative;

_top: -2em;

_margin-top: 12px;

}

 

.disable, .disable:hover {

background-color: #CCCCCC;

color: #AAAAAA;

}

 

/* Ajax classes */

.ajax-warning, .ajax-success, .ajax-error {

border: 1px solid #CCCCCC;

padding: 5px 20px;

margin: 5px;

width: 70%;

}

.ajax-warning {

background-color: #FFBD6F;

}

.ajax-success {

background-color: #9FDF8B;

}

.ajax-error {

background-color: #FF7F84;

}

.ajax-loader {

margin: 5px 10px;

}

 

[Rémy - @webdesignrr]

pour un peu plus de cohérence, on peu aussi changer le css>tabpanes (css qui gere les page avec onglet, dans le catalogue par exemple) par :

 

/*-------------------------------------------------------------------------------*/

.tab-pane {

float: left;

position: relative;

width: 650px;

margin-top:20px;

}

 

.tab-row .tab {

text-align: center;

font-weight: bold;

display: inline;

margin: 0;

float: left;

padding: 2px 24px 3px 24px;

background: #CEE2FB;

z-index: 1;

white-space: nowrap;

position: relative;

font-size: 1.1em;

}

.tab-row .tab a{ color:#3A88C3}

 

 

 

.tab-row .tab.selected {

border: 1px solid #83C7F3;

border-bottom: 0;

background: #ECF4FE;

z-index: 3;

padding: 2px 25px 4px 25px;

margin: 1px -3px -3px 0px;

top: -2px;

}

 

.tab-page {

clear: both;

border: 1px solid #83C7F3;

background: #ECF4FE;

z-index: 2;

position: relative;

padding: 10px;

}

 

.tab-page table tr td.col-left {

width: 150px;

vertical-align: top;

}

 

.tab-page table tr td p {

margin: 0.5em 0 0 0;

padding: 0 0 0.5em 0;

color: #7F7F7F;

font-size: 0.95em;

}

 

.tab-row {

z-index: 1;

white-space: nowrap;

}

[Bruno Leveque]

C'est genial ! Pourquoi ne pas integrer ce design en standard... tu as de bonnes competences

On peut aussi faire un "theme switcher" dans l'admin et proposer les deux au choix.

 

Je laisse les autres donner leur avis.

 

Cordialement,

Bruno Leveque

[Matthieu Biart]

Bonjour Yumiam

 

C'est clair que c'est excelent !

Merci

Je suis d'accord avec Bruno, on peut faire un petit theme switcher dans l'admin.

Vu que ce n'est que du CSS c'est plutot simple

[Rémy - @webdesignrr]

content que ça vous plaise

pour l'integration en standard j'en serait evidemment flatté

 

(il peut resté quelques ajustement a faire je n'ai pas poussé l'adapation plus que çaen collaborant plus etroitement avec les developpeur on pourrait pousser le design un peu plus)

 

on peut eventuellement envisager un echange de competence

 

[Matthieu Biart]

(il peut resté quelques ajustement a faire je n'ai pas poussé l'adapation plus que çaen collaborant plus etroitement avec les developpeur on pourrait pousser le design un peu plus)

C'est clair que s'il n'y avait pas de styles mis en dur dans le back-office... ca le rendrai totalement themable

Sinon si tu veux des infos vis-a-vis de la gestion des themes de la solution, sens toi libre de poser toutes les questions necessaires.

 

on peu eventuellement envisager un echange de competence

C'est le but de ce forum

[Joël Gaujard]

Salut Yumiam

 

C'est vraiment top ce que tu as fait... j'adore

 

Le switcher serait vraiment une bonne idee, il pourrait se trouver dans les Preferences du panel d'administration.

 

De plus il serait peut etre interessant de donner le choix du template a la fin de l'installation de la solution.

 

Encore merci de s'interresser a notre travail, et d'y participer

[Thierry]

Le support des thèmes pour la partie Admin serait vraiment top.

 

Et ce serait parfait, si tous les éléments de formulaire (par exemple pour la fiche produit) soient avec des id. Pour que l'on puisse facilement faire un display:none sur certains éléments et simplifier ainsi rapidement l'interface. :-)

[SmartiesKiller]

Adopter

superbe idée et je suis impatient de voir le theme switcher arrivé

[FranWeb]

Vu l'ancienneté du sujet, ce thème pour l'admin est pour la version numéro 1 ou pas ?

Bonne journée à tous

[FranWeb]

up
ce thème est-il compatible 1RC4 pour l'admin ?

[FranWeb]

Re-Up
Est-ce compatible 1RC3 ou 1RC4 ?

[FranWeb]

Mathieu ou Joel, pouvez-vous confirmer ou infirmer si cela répond toujours à l'admin 1RC3 ou 1RC4 ?

[Pierre-Yves]

Si je comprends bien, le thème proposé dans ce post est le thème actuel

C'est un post qui date du 9 novembre Apparemment la PrestaTeam à aimé le thème et l'a introduit dans l'admin par défaut (en changeant quelques petites choses).