Ajout de Bouton 'Box Product'

[Mathieu]

Bonsoir ,

Ces mon premier post sur opencart 'forum fr' j'aimerai tout d'abord et très rapidement faire un descriptif de mon parcours et de mes aventure cms

Voila j'ai vraiment tester beaucoup de cms tous meme on peut dire : wordpress, joomla, magento, made simple, prestashop, oscommerce, et je sais pas si j'en ai oublié ou pas pour vous dire simplement que opencart et le meilleur cms pour créer une boutique en ligne faut même pas chercher ailleurs , je ne connais pas très bien le codage donc je parle en temps que newbie, et débutant, tout et facile a installer et tout et simplifier je trouve, voila donc je tiens à vous dire continuer, continuer et encore merci pour les personnes qui s'occupe de l'aide section France voila.

Concernant mon problème je suis en train de crée un template à ma façon et j'ai plusieurs problèmes :

1: Dans la 'box product ' ( vedette ) si possible modifier le bouton 'ajouter au panier' et le placer a l'endroit ou je veux seulement pour la box , mais le souci et que lorsque je le déplace ça déplace tout les autres bouton du template , j'aimerai pouvoir crée ou ajouter un bouton seulement pour cette box et le modifier sans que ca change tout les autres . ( j’espère m'avoir fait comprendre )

2 : Le deuxième souci et que j'aimerai dans cette même box ajouter la description du produit .

Je ne connait pas grand chose en codage le minimum donc soyez gentils avec moi si mes question vous paraisse impeut soft merci .

Fichier stylesheet :

Code: Tout sélectionner

html {
   overflow: -moz-scrollbars-vertical;
   margin: 0;
   padding: 0;
}
body {
    background: url("../image/bkg_bg.gif") repeat-x scroll center top #F7F7F7;
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
}
body, td, th, input, textarea, select, a {
    font-size: 11px;
}
h1, .welcome {
    background: url("../image/bull_2.gif") no-repeat scroll 0 0 transparent;
    color: #5B5B5B;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 10px;
    line-height: 14px;
    padding: 0 21px 4px;
}
h2 {
    background: none repeat scroll 0 0 #F7F7F7;
    color: #000000;
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 0;
    padding: 5px;
}
p {
   
    margin-top: 0;
}
a, a:visited, a b {
    color: #444444;
    cursor: pointer;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
a img {
    border: medium none;
}
form {
    display: inline;
    margin: 0;
    padding: 0;
}
input[type="text"], input[type="password"], textarea {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2px;
    padding: 3px;
}
select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 2px;
}
label {
    cursor: pointer;
}
ul li {
    list-style: none outside none;
}
#container {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
   text-align: left;
}
#column-left {
    float: left;
    width: 230px;
}
#column-right {
    float: right;
   
    width: 230px;
}
#content {min-height: 400px;}
#column-left + #column-right + #content, #column-left + #content {
 
   margin-left: 235px;
 
   
}
#column-right + #content {
   margin-right: 235px;
}
#maincontaint {
    float: left;
    margin-bottom: 15px;
    margin-top: 3px;
   /* position: absolute;*/
    width: 1000px;
}
#header {
    height: 98px;
    margin-bottom: -11px;
    padding-bottom: 26px;
    position: relative;
    z-index: 99;
}
#header #logo {
    left: 27px;
    position: absolute;
    top: 14px;
}
#language {
    color: #999999;
    left: 335px;
    line-height: 17px;
    position: absolute;
    top: 15px;
    width: 75px;
}
#language img {
    cursor: pointer;
}
#currency {
    border-right: 1px dotted #CCCCCC;
    color: #999999;
    line-height: 10px;
    margin-right: 15px;
    position: absolute;
    right: 147px;
    top: 22px;
    width: 80px;
    z-index: 1000;
}
#currency a {
    border: 1px solid #CCCCCC;
    color: #999999;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 2px;
    padding: 2px 4px;
    text-decoration: none;
}
#currency a b {
    color: #000000;
    text-decoration: none;
}
#header #cart {
    min-width: 300px;
    position: absolute;
    right: 14px;
    z-index: 9;
   text-align:right;
}
#header #cart .heading {
    background: url("../image/cart_icon.gif") no-repeat scroll left center transparent;
    float: right;
    margin-right: 0;
    margin-top: 15px;
    padding-left: 14px;
    position: relative;
    z-index: 1;
}
#header #cart .heading h4 {
    color: #999999;
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 3px;
    margin-top: 0;
    padding-left: 23px;
  }
#header #cart .heading a {
    color: #7F7F7F;
    text-decoration: none;
}
#header #cart .heading a span {
        padding-left: 24px;
}
#header #cart .content {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #EEEEEE;
    border-radius: 0 7px 7px 7px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 2px #DDDDDD;
    clear: both;
    display: none;
    min-height: 150px;
    padding: 8px;
    position: relative;
    top: -1px;
}
#header #cart.active .heading {
    /*border-left: 1px solid #EEEEEE;
    border-radius: 7px 7px 0 0;
    border-right: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    margin-top: 5px;
    padding-bottom: 6px;
    padding-top: 10px;*/
}
#header #cart.active .content {
    display: block;
}
#header #cart .cart {
    border-collapse: collapse;
    margin-bottom: 5px;
    width: 100%;
}
#header #cart .cart td {
    border-bottom: 1px solid #EEEEEE;
    color: #000000;
    padding: 10px 5px;
    vertical-align: top;
}
#header #cart .cart .image {
    width: 1px;
}
#header #cart .cart .image img {
    border: 1px solid #EEEEEE;
    text-align: left;
}
#header #cart .cart .name small {
    color: #666666;
}
#header #cart .cart .quantity {
    text-align: right;
}
#header #cart .cart td.total {
    text-align: right;
}
#header #cart .cart .remove {
    text-align: right;
}
#header #cart .cart .remove img {
    cursor: pointer;
}
#header #cart table.total {
    border-collapse: collapse;
    clear: left;
    float: right;
    margin-bottom: 5px;
    padding: 5px;
}
#header #cart table.total td {
    color: #000000;
}
#header #cart .content .checkout {
    clear: both;
    text-align: right;
}
#header #cart .empty {
    padding-top: 50px;
    text-align: center;
}
#header #search {
    background: url("../image/search_bg.gif") no-repeat scroll 0 0 transparent;
    height: 26px;
    position: absolute;
    right: 20px;
    top: 121px;
    width: 240px;
}
#header .button-search {
    background: url("../image/go_but.gif") no-repeat scroll center center transparent;
    cursor: pointer;
    height: 26px;
    left: 213px;
    position: absolute;
    width: 32px;
}
#header #search input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    height: 21px;
    padding: 1px 1px 1px 10px;
    width: 192px;
}
#header #welcome {
    color: #5F5F5F;
    position: absolute;
    right: 14px;
    text-align: right;
    top: 56px;
    width: 298px;
    z-index: 5;
}
#header #welcome a {
    color: #0579B8;
}
#header .links {
    bottom: 26px;
    font-size: 13px;
    padding-right: 10px;
    position: absolute;
    right: 0;
   
}
#header .links li{
    color: #7F7F7F;
    display: block;
    float: left;
    font-size: 12px;
   
    text-decoration: none;
   background: url("../image/pipe2.gif") no-repeat scroll right center transparent;
}
#header .links li a{
   padding-right:5px;
    text-decoration: none;
   padding-left:5px;
}
#header .links li a:hover{
color:#0579B8;
}
#header .links .first-link  {
    background:none repeat scroll 0 0 transparent;
 
}
#menu {
    background: url("../image/nav_bg.gif") no-repeat scroll center top transparent;
    font-size: 13px;
    height: 40px;
    margin-bottom: 15px;
    padding-left: 20px;
}
#menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#menu > ul > li {
    background: url("../image/nav_spacer.gif") no-repeat scroll right center transparent;
    float: left;
    position: relative;
    z-index: 20;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
    color: #066DAB;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 14px;
    padding: 13px 11px;
    position: relative;
    text-decoration: none;
    z-index: 6;
}
#menu > ul > li > a:hover {
    color: #000000;
}
#menu > ul > li > div {
    background-color: #0394D7;
    border-radius: 0 0 5px 5px;
    display: none;
    position: absolute;
    z-index: 5;
}
#menu > ul > li:hover > div {
    display: table;
}
#menu > ul > li > div > ul {
    display: table-cell;
}
#menu > ul > li > div > ul > li {
  /*  border-bottom: 1px solid #D9E9F2;*/
}
#menu > ul > li ul + ul {
    padding-left: 20px;
}
#menu > ul > li ul > li > a {
    border-bottom: 1px solid #D9E9F2;
    color: #FFFFFF;
    display: block;
    min-width: 152px;
    padding: 7px 10px 7px 14px;
    text-decoration: none;
    white-space: nowrap;
}
#menu > ul > li ul > li > a:hover {
    background-color: #FFA21F;
}
.breadcrumb {
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 5px;
}
.breadcrumb a {
    color: #FFA21F;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #000000;
    text-decoration: none;
}
.breadcrumb li {
    display: inline;
}
.success, .warning, .attention, .information {
    color: #555555;
   /* margin-bottom: 15px;*/
    padding: 10px 10px 10px 33px;
}
.success {
    background: url("../image/success.png") no-repeat scroll 10px center #EAF7D9;
    border: 1px solid #BBDF8D;
}
.warning {
    background: url("../image/warning.png") no-repeat scroll 10px center #FFD1D1;
    border: 1px solid #F8ACAC;
}
.attention {
    background: url("../image/attention.png") no-repeat scroll 10px center #FFF5CC;
    border: 1px solid #F2DD8C;
}
.information {
    background: url("../image/information.png") no-repeat scroll 10px center #E8F6FF;
    border: 1px solid #B8E2FB;
}
.success .close, .warning .close, .attention .close, .information .close {
    cursor: pointer;
    float: right;
    padding-right: 4px;
    padding-top: 4px;
}
.required {
    color: #FF0000;
    font-weight: bold;
}
.error {
    color: #FF0000;
    display: block;
}
.help {
    color: #999999;
    display: block;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 10px;
    font-weight: normal;
}
table.form {
    border-collapse: collapse;
    margin-bottom: 20px;
    width: 100%;
}
table.form tr td:first-child {
    width: 150px;
}
table.form > * > * > td {
    color: #000000;
}
table.form td {
    padding: 4px;
}
input.large-field, select.large-field {
    width: 238px;
}
table.list {
    border-collapse: collapse;
    border-left: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-bottom: 20px;
    width: 100%;
}
table.list td {
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
}
table.list thead td {
    background-color: #EFEFEF;
    padding: 0 5px;
}
table.list thead td a, .list thead td {
    color: #222222;
    font-weight: bold;
    text-decoration: none;
}
table.list tbody td a {
    text-decoration: underline;
}
table.list tbody td {
    padding: 0 5px;
    vertical-align: top;
}
table.list .left {
    padding: 7px;
    text-align: left;
}
table.list .right {
    padding: 7px;
    text-align: right;
}
table.list .center {
    padding: 7px;
    text-align: center;
}
table.list .asc {
    background: url("../image/asc.png") no-repeat scroll right center transparent;
    padding-right: 15px;
}
table.list .desc {
    background: url("../image/desc.png") no-repeat scroll right center transparent;
    padding-right: 15px;
}
.pagination {
    display: inline-block;
    margin-bottom: 10px;
    padding-top: 8px;
    width: 100%;
    border-top: 1px solid #EEEEEE;
}
.pagination .links {
    float: left;
}
.pagination .links a {
     background: none repeat scroll 0 0 #D9E9F2;
   
    color: #000000;
    display: inline-block;
    font-weight: bold;
    padding: 3px 7px;
    text-decoration: none;
}
.pagination .links b {
     background: none repeat scroll 0 0 #EE7F25;
   
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    padding: 4px 10px;
    text-decoration: none;
}
.pagination .results {
    float: right;
    padding-top: 3px;
}
a.button {
    background: url("../image/button-left.png") no-repeat scroll left top transparent;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 2px;
    padding-left: 10px;
    text-decoration: none;
   
}
a.button span {
    background: url("../image/button-right.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 12px;
    padding: 6px 12px 8px 5px;
}
a.button:hover {
}
a.button:hover span {
}
.buttons {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EEEEEE;
   /* margin-bottom: 20px;*/
    overflow: auto;
    padding: 6px;
}
.buttons .left {
    float: left;
    text-align: left;
}
.buttons .right {
    float: right;
}
.buttons .center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.htabs {
    border-bottom: 1px solid #C5DDEB;
    height: 30px;
    line-height: 16px;
}
.htabs a {
    background: url("../image/tab.png") repeat-x scroll 0 0 #FFFFFF;
    border-left: 1px solid #C5DDEB;
    border-right: 1px solid #C5DDEB;
    border-top: 1px solid #C5DDEB;
    color: #000000;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    margin-right: 2px;
    padding: 7px 8px 5px;
    text-align: center;
    text-decoration: none;
}
.htabs a.selected {
    background: none repeat scroll 0 0 #FFFFFF;
    padding-bottom: 7px;
}
.tab-content {
    border-bottom: 1px solid #C5DDEB;
    border-left: 1px solid #C5DDEB;
    border-right: 1px solid #C5DDEB;
    margin-bottom: 20px;
    overflow: auto;
    padding: 10px;
    z-index: 2;
}
.box {
    background: url("../image/blog_bottomdbg.gif") no-repeat scroll center bottom transparent;
    margin-bottom: 1px;
    padding-bottom: 7px;
}
.box .box-heading {
    background: url("../image/blog_topbg.gif") no-repeat scroll center top transparent;
    color: #5B5B5B;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 17px;
    line-height: 14px;
    padding: 13px 36px 4px;
}
.box .box-heading2 {
    background: url("../image/blog_topbg2.gif") no-repeat scroll center top transparent;
    color: #0579B8;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 17px;
    line-height: 14px;
    padding: 13px 36px 4px;
}
.box .box-content {
    background: url("../image/blog_midbg.gif") repeat-y scroll 0 0 transparent;
    padding: 10px;
}
.box-brand {
}
.box-brand ul {
    margin: auto;
    padding-left: 10px;
}
.box-brand li {
    background: url("../image/bull_3.gif") no-repeat scroll left center transparent;
    padding: 6px 12px;
}
.box-brand a {
    color: #444444;
    text-decoration: none;
}
.box-cart {
    padding-left: 10px;
}

.box-product {
    overflow: auto;
    width: 100%;
}
.box-product > div {
    background-attachment:initial;
  background-clip:initial;
  background-color:#272727;
  background-image:initial;
  background-origin:initial;
  float:left;
  height:214px;
  margin-left:20px;
  margin-top:7px;
  width:320px;
}


}
.box-product .image {
    border-color:initial;
  border-style:initial;
  border-top-width:0;
}
.box-product .image{
  background-attachment:initial;
  background-clip:initial;
  background-color:initial;
  background-image:url(http://www.leshoppingdecesdames.fr/img/iMapHome.png);
  background-origin:initial;
  background-position:-9px -430px;
  background-repeat:no-repeat no-repeat;
  margin-bottom:-200px;
  margin-left:7px;
  margin-right:7px;
  margin-top:7px;
  width:165px;
}
.box-product .name a {
    color:#E4007A;
  float: right;
  width: 160px;
  text-align: center;
  font:normal normal normal 21px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing:-1px;
}
.spacer {
  clear: both;
}
 
.box-product .price {
    color: #EE7F25;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
}
.box-product .price-old {
    color: #FF0000;
    font-size: 12px;
    text-decoration: line-through;
}
.box-product .price-new {
    font-size: 12px;
    font-weight: bold;
}
.box-product .rating {
    display: block;
    margin-bottom: 4px;
}

.box-category {
    margin-top: -5px;
}
.box-category ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.box-category > ul > li {
    padding: 4px 8px 6px 10px;
}
.box-category > ul > li + li {
    background: url("../images/bullet.gif") no-repeat scroll left center transparent;
    padding-left: 10px;
}
.box-category > ul > li > a {
    color: #444444;
    font-weight: bold;
    padding-left: 10px;
    text-decoration: none;
}
.box-category > ul > li > a:hover {
    color: #EE7F25;
}
.box-category > ul > li ul {
    display: none;
}
.box-category > ul > li a.active {
    background: url("../images/bullet.gif") no-repeat scroll left center transparent;
    font-weight: bold;
}
.box-category > ul > li a.active + ul {
    display: block;
}
.box-category > ul > li ul > li {
    padding: 5px 5px 0 10px;
}
.box-category > ul > li ul > li > a {
    color: #000000;
    display: block;
    text-decoration: none;
}
.box-category > ul > li ul > li > a:hover {
    color: #EE7F25;
}
.box-category > ul > li ul > li > a.active {
    font-weight: bold;
}

#content .content {
    border: 1px solid #EEEEEE;
    margin-bottom: 20px;
    overflow: auto;
    padding: 10px;
}
#content .content .left {
    float: left;
    width: 49%;
}
#content .content .right {
    float: right;
    width: 49%;
}
.category-info {
    margin-bottom: 5px;
    overflow: auto;
}
.category-info .image {
    border: 1px solid #E7E7E7;
    float: left;
    margin-right: 15px;
    padding: 5px;
}
.category-list {
   overflow: auto;
}
.category-list ul {
    float: left;
    list-style: none outside none;
    width: 25%;
   padding-left:0px;
   margin-top:0px;
}
.category-list > ul > li > a {
    background: url("../image/bull_3.gif") no-repeat scroll left center transparent;
    color: #7F7F7F;
    padding-left: 10px;
    text-decoration: none;
}
.category-list > ul > li > a:hover{color: #EE7F25;}
.category-list .div a {
    font-weight: bold;
    text-decoration: underline;
}
.manufacturer-list {
    border: 1px solid #DBDEE1;
    margin-bottom: 20px;
    overflow: auto;
    padding: 5px;
}
.manufacturer-heading {
    background: none repeat scroll 0 0 #F8F8F8;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
    padding: 5px 8px;
}
.manufacturer-content {
    padding: 8px;
}
.manufacturer-list ul {
    float: left;
    list-style: none outside none;
    margin: 0 0 10px;
    padding: 0;
    width: 25%;
}
.product-filter {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    font-size: 11px;
    height: 21px;   
    padding: 5px;
    text-align: center;
}
.product-filter .display {
    color: #333333;
    float: left;
    margin-right: 15px;
    padding-top: 4px;
}
.product-filter .display a {
    font-weight: bold;
}
.product-filter .sort {
    color: #333333;
    float: right;
}
.product-filter .limit {
    color: #333333;
    float: right;
    margin-left: 15px;
}
.product-compare {
    font-weight: bold;
    padding: 5px;
}
.product-compare a {
    font-weight: bold;
    text-decoration: none;
}
.product-list > div {
     padding-top: 10px;
    overflow: auto;
    border-top: 1px solid #EEEEEE;
}
.product-list .right {
    float: right;
    margin-left: 15px;
}

.product-list .image {
    float: left;
    margin-right: 10px;
}
.product-list .image img {
    padding: 3px;
}
.product-list .name {
    margin-bottom: 3px;
}
.product-list .name a {
    color: #5B5B5B;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.product-list .name a:hover {
    color: #000000;
}
.product-list .description {
    color: #4D4D4D;
}
.product-list .rating {
    color: #7B7B7B;
}
.product-list .price {
    color: #EE7F25;
    float: right;
    font-size: 12px;
    font-weight: bold;
    height: 50px;
    margin-left: 8px;
    text-align: right;
}
.product-list .price-old {
    color: #FF0000;
    font-size: 12px;
    font-weight: bold;
    padding-right: 5px;
    text-decoration: line-through;
}
.product-list .price-new {
    font-size: 12px;
    font-weight: bold;
}
.product-list .price-tax {
    color: #BBBBBB;
    font-size: 12px;
    font-weight: normal;
}
.product-list .cart {
    margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
    margin-bottom: 3px;
}
.product-list .wishlist a {
    color: #333333;
    display: block;
    font-size: 11px;
    padding-left: 8px;
    text-decoration: none;
}
.product-list .wishlist a:hover {
    text-decoration: underline;
}
.product-list .compare a {
    color: #333333;
    display: block;
    font-size: 11px;
    padding-left: 8px;
    text-decoration: none;
}
.product-list .compare a:hover {
    text-decoration: underline;
}
.product-grid {
    overflow: auto;
   
}
.product-grid > div {
    display: inline-block;
    margin:0px 9px;
    text-align: center;
    width: 147px;
}
.product-grid .image {
    display: block;
    margin-bottom: 0;
}
.product-grid .image img {
    padding: 3px;
}
.product-grid .name a {
    color: #5B5B5B;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
    text-decoration: none;
}
.product-grid .name a:hover {
    color: #000000;
}
.product-grid .description {
    display: none;
}
.product-grid .rating {
    display: block;
    margin-bottom: 4px;
}
.product-grid .price {
    color: #EE7F25;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
}
.product-grid .price-old {
    color: #FF0000;
    font-size: 12px;
    padding-right: 5px;
    text-decoration: line-through;
}
.product-grid .price-new {
    font-size: 12px;
    font-weight: bold;
}
.product-grid .price .price-tax {
    display: none;
}
.product-grid .cart {
    margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
    margin-bottom: 3px;
}
.product-grid .wishlist a {
    color: #333333;
    display: block;
    font-size: 11px;
    text-decoration: none;
}
.product-grid .wishlist a:hover {
    text-decoration: underline;
}
.product-grid .compare a {
    color: #333333;
    display: block;
    font-size: 11px;
    text-decoration: none;
}
.product-grid .compare a:hover {
    text-decoration: underline;
}
.product-info {
    margin-bottom: 20px;
    overflow: auto;
}
.product-info > .left {
    float: left;
    margin-right: 15px;
}
.product-info > .left + .right {
    margin-left: 265px;
}
.product-info .image {
    border: 1px solid #E7E7E7;
    float: left;
    margin-bottom: 20px;
    padding: 10px;
    text-align: center;
}
.product-info .image-additional {
    clear: both;
    margin-left: -10px;
    overflow: hidden;
    width: 260px;
}
.product-info .image-additional img {
    border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
    display: block;
    float: left;
    margin-bottom: 10px;
    margin-left: 10px;
}
.product-info .description {
    border-bottom: 1px solid #E7E7E7;
   
    color: #4D4D4D;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 5px 5px 10px;
}
.product-info .description span {
    color: #0394D7;
}
.product-info .description a {
    color: #4D4D4D;
    text-decoration: none;
}
.product-info .price {
    border-bottom: 1px solid #E7E7E7;
    color: #5B5B5B;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: auto;
    padding: 0 5px 10px;
}
.product-info .price-old {
    color: #FF0000;
    padding-right: 5px;
    text-decoration: line-through;
}
.product-info .price .price-new {
    color: #FFA21F;
}
.product-info .price-tax {
    color: #999999;
    font-size: 12px;
    font-weight: normal;
}
.product-info .price .reward {
    color: #999999;
    font-size: 12px;
    font-weight: normal;
}
.product-info .price .discount {
    color: #4D4D4D;
    font-size: 12px;
    font-weight: normal;
}
.product-info .options {
    border-bottom: 1px solid #E7E7E7;
    color: #000000;
    margin-bottom: 10px;
    padding: 0 5px 10px;
}
.product-info .cart {
    border-bottom: 1px solid #E7E7E7;
    color: #4D4D4D;
    margin-bottom: 20px;
    overflow: auto;
    padding: 0 5px 10px;
}
.product-info .cart div {
    padding-bottom: 3px;
    vertical-align: middle;
}
.product-info .cart div > span {
    color: #999999;
    display: block;
    padding-top: 7px;
}
.product-info .cart .addto a {
    background: url("../image/bkg_add-to.gif") no-repeat scroll left center transparent;
    font-size: 10px;
    font-weight: normal;
    padding-left: 9px;
    text-decoration: none;
}
.product-info .cart .addto a:hover {
    text-decoration: underline;
}
.product-info .cart .minimum {
    clear: both;
    color: #999999;
    font-size: 11px;
    padding-top: 5px;
}
.product-info .review {
    border-left: 1px solid #E7E7E7;
    border-right: 1px solid #E7E7E7;
    border-top: 1px solid #E7E7E7;
    color: #4D4D4D;
    margin-bottom: 10px;
}
.product-info .review > div {
    border-bottom: 1px solid #E7E7E7;
    line-height: 20px;
    padding: 8px;
}
.product-info .review > div > span {
    color: #38B0E3;
}
.product-info .review .share {
    line-height: normal;
    overflow: auto;
}
.product-info .review .share a {
    text-decoration: none;
}
.attribute {
    border-collapse: collapse;
    border-left: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-bottom: 20px;
    width: 100%;
}
.attribute thead td, .attribute thead tr td:first-child {
    background: none repeat scroll 0 0 #F7F7F7;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}
.attribute tr td:first-child {
    color: #000000;
    font-weight: bold;
    text-align: right;
    width: 20%;
}
.attribute td {
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    color: #4D4D4D;
    padding: 7px;
    text-align: center;
    vertical-align: top;
}
.compare-info {
    border-collapse: collapse;
    border-left: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-bottom: 20px;
    width: 100%;
}
.compare-info thead td, .compare-info thead tr td:first-child {
    background: none repeat scroll 0 0 #F7F7F7;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}
.compare-info tr td:first-child {
    color: #000000;
    font-weight: bold;
    text-align: right;
}
.compare-info td {
    border-bottom: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    color: #4D4D4D;
    padding: 7px;
    text-align: center;
    vertical-align: top;
    width: 20%;
}
.compare-info .name a {
    font-weight: bold;
}
.compare-info .price-old {
    color: #FF0000;
    font-weight: bold;
    text-decoration: line-through;
}
.compare-info .price-new {
    font-weight: bold;
}
.wishlist-product table {
    border-collapse: collapse;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-bottom: 20px;
    width: 100%;
}
.wishlist-product td {
    padding: 7px;
}
.wishlist-product thead td {
    background-color: #F7F7F7;
    border-bottom: 1px solid #DDDDDD;
    color: #4D4D4D;
    font-weight: bold;
}
.wishlist-product thead .remove, .wishlist-product thead .image, .wishlist-product thead .cart {
    text-align: center;
}
.wishlist-product thead .name, .wishlist-product thead .model, .wishlist-product thead .stock {
    text-align: left;
}
.wishlist-product thead .quantity, .wishlist-product thead .price, .wishlist-product thead .total {
    text-align: right;
}
.wishlist-product tbody td {
    border-bottom: 1px solid #DDDDDD;
    vertical-align: top;
}
.wishlist-product tbody .remove {
    vertical-align: middle;
}
.wishlist-product tbody .remove, .wishlist-product tbody .image, .wishlist-product tbody .cart {
    text-align: center;
}
.wishlist-product tbody .name, .wishlist-product tbody .model, .wishlist-product tbody .stock {
    text-align: left;
}
.wishlist-product tbody .quantity, .wishlist-product tbody .price, .wishlist-product tbody .total {
    text-align: right;
}
.wishlist-product tbody .price s {
    color: #FF0000;
}
.login-content {
    /*margin-bottom: 20px;*/
    overflow: auto;
}
.login-content .left {
    float: left;
    width: 48%;
}
.login-content .right {
    float: right;
    width: 48%;
}
.login-content .left .content, .login-content .right .content {
    min-height: 190px;
}
.order-list {
    margin-bottom: 10px;
}
.order-list .order-id {
    float: left;
    margin-bottom: 2px;
    width: 49%;
}
.order-list .order-status {
    float: right;
    margin-bottom: 2px;
    text-align: right;
    width: 49%;
}
.order-list .order-content {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 0;
    width: 100%;
}
.order-list .order-content div {
    float: left;
    width: 33.3%;
}
.order-list .order-info {
    text-align: right;
}
.order-detail {
    background: none repeat scroll 0 0 #EFEFEF;
    font-weight: bold;
}
.return-list {
    margin-bottom: 10px;
}
.return-list .return-id {
    float: left;
    margin-bottom: 2px;
    width: 49%;
}
.return-list .return-status {
    float: right;
    margin-bottom: 2px;
    text-align: right;
    width: 49%;
}
.return-list .return-content {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 0;
    width: 100%;
}
.return-list .return-content div {
    float: left;
    width: 33.3%;
}
.return-list .return-info {
    text-align: right;
}
.return-product {
    margin-bottom: 20px;
    overflow: auto;
}
.return-name {
    float: left;
    width: 33.3%;
}
.return-model {
    float: left;
    width: 33.3%;
}
.return-quantity {
    float: left;
    width: 33.3%;
}
.return-detail {
    margin-bottom: 20px;
    overflow: auto;
}
.return-reason {
    float: left;
    width: 33.3%;
}
.return-opened {
    float: left;
    width: 33.3%;
}
.return-opened textarea {
    vertical-align: top;
    width: 98%;
}
.return-remove {
    float: left;
    padding-top: 90px;
    text-align: center;
    vertical-align: middle;
    width: 33.3%;
}
.return-additional {
    margin-bottom: 20px;
    overflow: auto;
}
.return-comment {
    float: left;
    width: 49%;
}
.return-captcha {
    float: right;
    width: 49%;
}
.download-list {
    margin-bottom: 10px;
}
.download-list .download-id {
    float: left;
    margin-bottom: 2px;
    width: 49%;
}
.download-list .download-status {
    float: right;
    margin-bottom: 2px;
    text-align: right;
    width: 49%;
}
.download-list .download-content {
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 0;
    width: 100%;
}
.download-list .download-content div {
    float: left;
    width: 33.3%;
}
.download-list .download-info {
    text-align: right;
}
.cart-info table {
    border-collapse: collapse;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    margin-bottom: 20px;
    width: 100%;
}
.cart-info td {
    padding: 7px;
}
.cart-info thead td {
    background-color: #F7F7F7;
    border-bottom: 1px solid #EEEEEE;
    color: #4D4D4D;
    font-weight: bold;
}
.cart-info thead .remove, .cart-info thead .image {
    text-align: center;
}
.cart-info thead .name, .cart-info thead .model {
    text-align: left;
}
.cart-info thead .quantity, .cart-info thead .price, .cart-info thead .total {
    text-align: right;
}
.cart-info tbody td {
    border-bottom: 1px solid #EEEEEE;
    vertical-align: top;
}
.cart-info tbody .remove {
    vertical-align: middle;
}
.cart-info tbody .remove, .cart-info tbody .image {
    text-align: center;
}
.cart-info tbody .name, .cart-info tbody .model {
    text-align: left;
}
.cart-info tbody .quantity, .cart-info tbody .price, .cart-info tbody .total {
    text-align: right;
}
.cart-info tbody span.stock {
    color: #FF0000;
    font-weight: bold;
}
.cart-module .cart-heading {
    background: url("../image/arrow-right.png") no-repeat scroll 10px 50% #F8F8F8;
    border: 1px solid #EEEEEE;
    color: #555555;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 8px 8px 8px 22px;
}
.cart-module .active {
    background: url("../image/arrow-down.png") no-repeat scroll 7px 50% #F8F8F8;
}
.cart-module .cart-content {
    display: none;
    overflow: auto;
    padding: 0 0 15px;
}
.cart-total {

    border-top: 1px solid #EEEEEE;
    margin-bottom: 15px;
    overflow: auto;
    padding-top: 8px;
}
.cart-total table {
    float: right;
}
.cart-total td {
    padding: 3px;
    text-align: right;
}
.checkout-heading {
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #DBDEE1;
    color: #555555;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 8px;
}
.checkout-heading a {
    float: right;
    font-weight: normal;
    margin-top: 1px;
    text-decoration: none;
}
.checkout-content {
    display: none;
    overflow: auto;
    padding: 0 0 15px;
}
.checkout-content .left {
    float: left;
    width: 48%;
}
.checkout-content .right {
    float: right;
    width: 51%;
}
.checkout-content .buttons {
    clear: both;
}
.checkout-content .buttons .right {
    width: 353px;
}

.checkout-content .buttons .right .button{
   float:right;
}
.checkout-product table {
    border-collapse: collapse;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    margin-bottom: 20px;
    width: 100%;
}
.checkout-product td {
    padding: 7px;
}
.checkout-product thead td {
    background-color: #F7F7F7;
    border-bottom: 1px solid #DDDDDD;
    color: #4D4D4D;
    font-weight: bold;
}
.checkout-product thead .name, .checkout-product thead .model {
    text-align: left;
}
.checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total {
    text-align: right;
}
.checkout-product tbody td {
    border-bottom: 1px solid #DDDDDD;
    vertical-align: top;
}
.checkout-product tbody .name, .checkout-product tbody .model {
    text-align: left;
}
.checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total {
    text-align: right;
}
.checkout-product tfoot td {
    border-bottom: 1px solid #DDDDDD;
    text-align: right;
}
.contact-info {
    overflow: auto;
}
.contact-info .left {
    float: left;
    width: 48%;
}
.contact-info .right {
    float: left;
    width: 48%;
}
.sitemap-info {
  /*  margin-bottom: 40px;*/
    overflow: auto;
}
.sitemap-info .left {
    float: left;
    width: 48%;
}
.sitemap-info .right {
    float: left;
    width: 48%;
}
#footer {
    background: url("../image/footer_bg.gif") no-repeat scroll center top transparent;
    clear: both;
    height: 52px;
    padding-right: 15px;
    padding-top: 6px;
}
#footer h3 {
    color: #000000;
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 0;
}
#footer .column {
    float: left;
    min-height: 100px;
    width: 25%;
}
#footer .column ul {
    margin-left: 8px;
    margin-top: 0;
    padding-left: 12px;
}
#footer .column ul li {
    margin-bottom: 3px;
}
#footer .column a {
    color: #000000;
    text-decoration: none;
}
#footer .column a:hover {
    text-decoration: underline;
}
#powered {
    clear: both;
    color: #0579B8;
    font-weight: bold;
    margin-top: 5px;
    text-align: right;
}
#powered a {
    color: #0579B8;
}
.banner div {
    /*width: 100%;*/
}
.banner div img {
}
.mainbanner {
}
.bottom {
    background: url("../image/bottombg.gif") no-repeat scroll center bottom transparent;
    height: 16px;
}
#powered .paypalicon {
    float: left;
}
#powered ul {
    float: left;
    margin: 0 0 8px;
    padding-left: 10px;
}
#powered li {
    background: url("../image/pipe2.gif") no-repeat scroll right center transparent;
    color: #0579B8;
    display: inline;
    padding-left: 9px;
    padding-right: 9px;
}
#powered li a {
    color: #0579B8;
    font-weight: bold;
    text-decoration: none;
}
#powered li a:hover{
    color: #000;
}
#powered .login-logout {
    background: none repeat scroll 0 0 transparent;
}
.shippingbanner {
}
.wraper {
    background: url("../image/bottombg.gif") repeat-x scroll center bottom transparent;
}
.centertopbg {
 
    padding-top: 4px;
}
.centerbottombg {
   
   /* padding-bottom: 9px;*/
   
}
.centermidbg {
     background: none repeat scroll 0 0 #FFFFFF;
    left:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
  margin-top:0;
  overflow-x:hidden;
  overflow-y:hidden;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
  position:relative;
  top:0;
  width:688px;
}
.centermidbg .box-heading {
    background: url("../image/bull_2.gif") no-repeat scroll 0 0 transparent;
    color: #5B5B5B;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 25px;
    line-height: 14px;
    padding: 0 21px 4px;
}
.sitemap-info .box-category1 {
    margin-top: -5px;
}
.sitemap-info .box-category1 ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.sitemap-info .box-category1 > ul > li {
    padding: 8px 8px 8px 10px;
}
.sitemap-info .box-category1 > ul > li + li {
    background: url("../images/bullet.gif") no-repeat scroll left center transparent;
    padding-left: 10px;
}
.sitemap-info .box-category1 > ul > li > a {
    color: #444444;
    font-weight: bold;
    padding-left: 10px;
    text-decoration: none;
}
.sitemap-info .box-category1 > ul > li > a:hover {
    color: #EE7F25;
}
.sitemap-info .box-category1 > ul > li ul {
}
.sitemap-info .box-category1 > ul > li a.active {
    background: url("../images/bullet.gif") no-repeat scroll left center transparent;
    font-weight: bold;
}
.sitemap-info .box-category1 > ul > li a.active + ul {
    display: block;
}
.sitemap-info .box-category1 > ul > li ul > li {
    padding: 5px 5px 0 10px;
}
.sitemap-info .box-category1 > ul > li ul > li > a {
    display: block;
    text-decoration: none;
}
.sitemap-info .box-category1 > ul > li ul > li > a:hover {
    color: #EE7F25;
}
.sitemap-info .box-category1 > ul > li ul > li > a.active {
    font-weight: bold;
}


.box-product-best {
    overflow: auto;
    width: 100%;
}
.box-product-best > div {
   clear: both;
    margin-bottom: 15px;
   
    width: 184px;
}
.box-product-best .image {
    display: block;
    margin-bottom: 5px;
   float:left;
   margin-right:6px;
}
.box-product-best .image img {
    border: 1px solid #E7E7E7;
   
   float:left;
}
.box-product-best .name a {
    color: #5B5B5B;
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
   
    text-decoration: none;
}

.box-product-best .name a:hover {
    color: #000000;
 }

.box-product-best .price {
    color: #EE7F25;
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    margin-right: 20px;
   
}
.box-product-best .price-old {
    color: #FF0000;
    padding-right: 5px;
    text-decoration: line-through;
}
.box-product-best .price-new {
    font-weight: bold;
}
.box-product-best .rating {
    display: block;
    margin-bottom: 4px;
}
.box-product-best .featured-info {
}


url du site : http://www.leshoppingdecesdames.fr


ps : Je vous et envoyé le stylesheet car je ne ces pas vraiment quelle fichier il vous faut , si besoin je les enverrait aussi .

[LeorLindel]

Bonjour et bienvenue parmi nous,

Nous te remercions de tes encouragements mais ce sont aussi les membres qui font vivre un forum et pour cela je tenais par cette réponse aussi à remercier les membres de leur présence et de leur aide.

En ce qui concerne le templating, je te suggère de consulter ce sujet, il t'en apprendra beaucoup.

Cordialement.

[Mathieu]

J'ai lu avec attention ce post suggérer mais je ne trouve la réponse a ma question , j'ai vraiment du mal a comprendre comment il faut faire pour changer le bouton ajouter "que pour la box en question" , comment je fait ?

[LeorLindel]

Si tu as lu le sujet concernant "webdevelopper" tu auras compris comment te servir de cet add-on afin qu'il puisse te montrer quelle est la partie de la feuille de style (stylesheet) qui concerne l'élément que tu détermines.

Il faut, bien entendu avoir quelques bases en CSS.

[Mathieu]

En effet j'utilise déjà ce module pour chrome mais le chemin qu'il me montre et que je modifie , modifie tout les autres éléments aussi , je suis coincé sur ce cou , et peut etre que la réponse et sous mon nez mais je ne vois pas du tout

[LeorLindel]

Crées toi une partie dans la feuille de style, seulement pour ce bouton, alors.

[Mathieu]

en effet ces ceux que j'ai voulu faire , j'ai fait un ajout dans le stylesheet :

.box-product a.button {

background: url("../image/button-left.png") no-repeat scroll left top transparent;
cursor: pointer;
display: inline-block;
margin-bottom: 2px;
padding-left: 10px;
text-decoration: none;
}

Mais aucun effet ces toujours pareil

[LeorLindel]

Je te demanderai :

- pour une meilleure visibilité de bien vouloir mettre le code dans les balises prévues à cet effet [Code] situées dans le menu de l'éditeur de texte, puis
- pour une meilleure compréhension de ton environnement, de compléter ta signature [Lire la mienne].

Ce sera bien mieux à l'avenir, pour l'échange de posts.

Nous t'en remercions.

[Mathieu]

Pas de probleme je ferait ca pour la prochaine fois , par contre j'ai réussi a ajouter un bout du bouton dans le stylesheet :

Code: Tout sélectionner

.box-product a.button {

background: url("../image/button-left.png") no-repeat scroll left top transparent;
cursor: pointer;
display: inline-block;
margin-bottom: 2px;
padding-left: 10px;
text-decoration: none;
}

Mais je n'arrive pas a ajouter le deuxiemes morceaux

Code: Tout sélectionner

.box-product.button span {
    background: url("../image/button-right.png") no-repeat scroll right top transparent;
    color: #FFFFFF;
    display: inline-block;
    font-size: 11px;
    font-weight: bold;
    line-height: 12px;
    padding: 6px 12px 8px 5px;
   }

[Mathieu]

Ces bon j'ai reussi enfaite je fesait des erreur toute bete et je m'en suis aperçu une fois le post envoyé ; merci leor pour ton aide , dit moi par contre tu aurai une idée pour ajouter la description ?

[LeorLindel]

.....dit moi par contre tu aurai une idée pour ajouter la description ?

Pas de but en blanc, comme cela, il faudrait que je potasse un peu le code.

Mais je te conseille d'ouvrir un sujet spécifique pour chaque question, sinon cela risque de devenir très vite un sujet fourre-tout et plus personne ne s'y retrouvera, pas même toi.

[Mathieu]

Pas de problème leor toute manière j'ai réussi un peut a découvrir le stylesheet , et je vait faire des essaie et on verra si je coince je reviendrai avec un signature bien propres et je ferait la demande salut bonne journée

[LeorLindel]

Ce sujet devrait t’intéresser.

Tu n'oublieras pas de mettre la mention [Résolu] dans le titre initial de ton sujet.

[Mathieu]

Resolu comme ca ?

[LeorLindel]

Tu n'oublieras pas de mettre la mention [Résolu] dans le titre initial de ton sujet.

En éditant le titre initial et en le modifiant.