Trzy kolumny w popularne produktu Presta 1.7

[MyJoy]

Witam

Proszę o pomoc chcę na stronie  www.sanderus.com.pl/prestashop/ na głównej stronie gdzie wyświetlają się popularne produkty zmienić aby wyświetlały się w trzech kolumnach w tym momencie mam w dwóch mogę prosić o pomoc

[() Maciej ()]

Cytat

Zaraz wracam

Niewiele daje link do wyłączonego sklepu

Trochę ciężko określić z czego korzystasz nie mając dostępu do strony. Ale strzelam, że jedziesz na standardowym module, więc najprościej byłoby edytować plik CSS modułu. Jaki ? Sprawdzasz sobie to opcją "Zbadaj kod" lub podobną (zależnie od przeglądarki) i patrzysz jaki CSS odwołuje się do konkretnego fragmentu strony.

Później edytujesz odpowiednie linijki, które będą pewnie zawierały klasy np. " col-md-3 col-sm-6 col-xs-12 "

Więcej poczytaj sobie na np. https://kursbootstrap.pl/rusztowanie-szablonu/

Edited January 9, 2018 by () Maciej ()
uzupełnienie (see edit history)

[MyJoy]

Dziękuję za zainteresowanie problem został zażegnany przez zmniejszenie marginesów:

#products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature .product-miniature {
    margin: 0px 0.315rem;
}

[piasek2000]

Podpinam się do tematu, w moim przypadku zmiana zaproponowana przez MyJoy nie zadziałała. Próbuje znaleźć sposób na zmniejszenie prawego i lewego marginesu jednak nie wiem gdzie szukać, czy w global.css czy w theme.css czy gdzieś indziej.

Link do sklepu www.saip.ndl.pl/2/

Szablon jest klasyczny z powyższą poprawką. Działam dalej i proszę o jakąś podpowiedź.

Znalazłem rozwiązanie:

Wszystkich potrzebnych zmian musimy dokonać w pliku: themes/aktualny szablon/assets/css/theme.css

ja zrobiłem to w następujący sposób:

Przeszukałem treść pliku słowem kluczowym "257px" ponieważ taką domyślną szerokość mają "boxy" z polecanymi produktami. Zmieniłem wartości width na "200px" ale pewnie można na więcej.

Poniżej dla mniej kumatych wklejam linijki z kodem i opisem. Zmieniamy za każdym razem wartość width:

1. Zmieniamy szerokość wyskakującego okienka "szybki podgląd"

#products .highlighted-informations,.featured-products .highlighted-informations,.product-accessories .highlighted-informations,.product-miniature 
	.highlighted-informations{
		position:absolute;
		bottom:1.25rem;
		padding-top:.625rem;
		z-index:0;
		background:#fff;
		text-align:center;
		width:257px;
		height:3.125rem;
		box-shadow:0 -5px 10px -5px rgba(0,0,0,.2);
		transition:bottom .3s}

Zmieniamy na :

#products .highlighted-informations,.featured-products .highlighted-informations,.product-accessories .highlighted-informations,.product-miniature 
	.highlighted-informations{
		position:absolute;
		bottom:1.25rem;
		padding-top:.625rem;
		z-index:0;
		background:#fff;
		text-align:center;
		width:200px;
		height:3.125rem;
		box-shadow:0 -5px 10px -5px rgba(0,0,0,.2);
		transition:bottom .3s}

2. Następnie zmieniamy szerokość ramki pod nazwą produktu:

#products .product-description,.featured-products .product-description,.product-accessories .product-description,.product-miniature .product-description{
	position:absolute;
	z-index:1;
	background:#fff;
	width:257px;
	bottom:0;
	height:70px}

zmieniamy na:

#products .product-description,.featured-products .product-description,.product-accessories .product-description,.product-miniature .product-description{
	position:absolute;
	z-index:1;
	background:#fff;
	width:200px;
	bottom:0;
	height:70px}

3. I jeszcze szerokość całej ramki:

#products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container{
	position:relative;
	margin-bottom:1.563rem;
	height:318px;
	width:257px;
	background:#fff;
	box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}

zmieniamy na :

#products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container{
	position:relative;
	margin-bottom:1.563rem;
	height:318px;
	width:200px;
	background:#fff;
	box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}

4. Zapisujemy plik.

5. Zmieniamy nazwę szablonu w pliku: aktualny_szablon/config/theme.yml wpisujemy swoją nazwę szablonu :

name: twoja_nazwa_szablonu
display_name: twoja_nazwa_szablonu

6. Pakujemy pliki do archiwum ZIP

7. Wgrywamy za pomocą przycisku dodaj szablon w panelu admina wygląd -> szablony

8. Ustawiamy nowy szablon jako aktywny

9. Na koniec musimy zmienić w panelu admina w zakładce wygląd -> zdjęcia rozmiar zdjęć home_default na wcześniej ustawioną szerokość. W opisanym przykładzie na 200px

Edited March 29, 2018 by piasek2000
Problem rozwiązany (see edit history)

[Prowodyr]

Natknąłem się na ten sam problem, ale rozwiązałem go prościej. Może komuś  się przyda:

w katalogu /themes/ aktualny_szablon /assets/css/theme.css  dodajemy na końcu linijkę 

 ".products{margin-right:-15px;margin-left:-15px}"

 

[design4VIP]

1 hour ago, Prowodyr said:

Natknąłem się na ten sam problem, ale rozwiązałem go prościej. Może komuś  się przyda:

w katalogu /themes/ aktualny_szablon /assets/css/theme.css  dodajemy na końcu linijkę 

 ".products{margin-right:-15px;margin-left:-15px}"

 

A wystarczyło w kontenerze nadać klasę "rów" i zrobi dokładnie to samo