Zmiana rozmiaru przycisku koszyka - Prestashop 1.6

[Gunship]

Cześć!

Problem dotyczy przycisku koszyka. 

Skorzystałem z tutoriala jak szablon w wersji 1.6 skonfigurować do układu 3 kolumnowego.

Wszystko poszło zgodnie z planem, poza jedną rzeczą - przyciskiem koszyka w szczegółach produktu. 

 

http://store.smwarehouse.co.uk/index.php?id_product=8&controller=product

 

Jak widać na linku przycisk wchodzi pod prawą kolumnę. Czy da się zmniejszyć jego rozmiar i ewentualnie usunąć ikonę wózka sklepowego? Jakieś inne konstruktywne rozwiązanie?

 

Pozdrawiam,

 

Edited April 11, 2014 by Gunship (see edit history)

[vekia]

witaj

jasne, że sie da

 

tylko pytanie co by CI najbardziej odpowiadało, zwykły "add to cart"

 

czy np. sam piktogram koszyka?

 

 

troche tam "ciasno" aby upchać tyle rzeczy

[Gunship]

Hej.

Jedno i drugie rozwiązanie jest właściwe aczkolwiek lepiej będzie z ikonką koszyka. Jak to mam uczynić?

[tmk]

Proponuję abyś rozplanował najpierw szerokości wszystkich trzech kolumn.

Na laptopowych ekranach bedzie jeszcze jako tako ale już przy rozdziałce 1152px i mniejszej (niektóre starsze monitory oraz tablety) wszystkie elementy: cena, pola formularzy oraz przycisk koszyka wyjeżdzają poza kolumnę z koszykiem.

Tak jak vekia napisał: trochę tam ciasno

 

Style dotyczące koszyka znajdziesz w 

themes/your_theme/css/product.css

[vekia]

product.css linia 427

dodaj dispaly:none!important; do:

(tak jak dodałem na początku)

i usuwamy linie: border: 1px solid #06b2e6;

.box-info-product .exclusive:before {
display:none!important;
      font-family: "FontAwesome";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      color: white;
      font-size: 25px;
      line-height: 47px;
      text-shadow: 0 1px #015883;
      content: "\f07a";
      z-index: 2;
      width: 51px;
      text-align: center;
      -webkit-border-radius: 5px 0 0 5px;
      -moz-border-radius: 5px 0 0 5px;
      -ms-border-radius: 5px 0 0 5px;
      -o-border-radius: 5px 0 0 5px;
      border-radius: 5px 0 0 5px; }

+

 

cały padding zmieniamy na 5px;  w:

.box-info-product .exclusive span {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
font-weight: 700;
font-size: 20px;
line-height: 22px;
border-top: 1px solid #06b2e6;
border-right: 1px solid #06b2e6;
border-left: 1px solid #06b2e6;
border-bottom: 1px solid #06b2e6;
text-shadow: 0 1px #015883;
padding: 5px;
color: white;
display: block !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

i w tym też:

.box-info-product .exclusive span {
padding: 12px 22px 14px 55px;
font-size: 14px;
}

no i ostatnia rzecz, usuwamy:

background: url(../img/border-1.gif) repeat-y 0 0; 

 

z:

.box-info-product .exclusive:after {
background: url(../img/border-1.gif) repeat-y 0 0;
position: absolute;
top: 0;
bottom: 0;
left: 51px;
content: "";
width: 1px;
z-index: 2;
}

efekt będzie taki jak na zdjęciu powyżej

[Gunship]

Rewelacja! Dzięki serdeczne za pomoc. Zamierzony efekt został osiągnięty

Edited April 11, 2014 by Gunship (see edit history)