Jump to content
Sign in to follow this  
Rémy - @webdesignrr

theme (pour l’admin)

Recommended Posts

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 ?

 

presta-newAdmin.jpg

 

 

 

 

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

/* 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;

}

 

Share this post


Link to post
Share on other sites

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;

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Bonjour Yumiam

 

C'est clair que c'est excelent !

Merci :D

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 ;)

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

(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 ;)

Share this post


Link to post
Share on other sites

Salut Yumiam

 

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

 

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

Share this post


Link to post
Share on other sites

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. :-)

Share this post


Link to post
Share on other sites

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

Bonne journée à tous ;)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More