Jump to content

Zmiana rozmiaru przycisku koszyka - Prestashop 1.6


Recommended Posts

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 by Gunship (see edit history)
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

×
×
  • Create New...