Zmiany w wyświetlaniu na urządzeniach mobilnych

[Macko777]

Witam,

 

korzystam z PrestaShop w wersji 1.6, ze standardowym motywem. Motyw jest trochę przeze mnie przerobiony, w zasadzie są to zmiany kosmetyczne arkuszy stylów. Chcę jednak zrobić rzecz, która wykracza poza moje umiejętności - chodzi o zmiany w wyświetlaniu strony na urządzeniach mobilnych. Prestashop to skrypt responsywny i wiem, że jakieś wielkie zmiany będą trudne do wykonania, jednak myślę, że to co chcę zrobić jest dosyć nieskomplikowane. Są to dwie rzeczy:

 

1. Blokada wyświetlania elementu graficznego w sekcji "Top". Mam tam standardowy slider oraz obok graficzny odnośnik w postaci pliku .jpg dopasowany do rozmiarów slidera. Na komputerze wygląda to dobrze, ale na smartfonach ten plik źle się skaluje i wygląda źle. Chciałbym aby on w ogóle nie był wyświetlany poniżej pewnej rozdzielczości. Czy jest taka możliwość?

 

2. W pliku theme8.css w sekcji "header" ustawiłem sobie tło tego elementu jako plik graficzny (tekstura). Czy jest możliwość aby w tym miejscu był wyświetlany inny plik graficzny, zależnie od rozdzielczości? Znowu chodzi o słaby wygląd na smartfonach, chciałbym w tym miejscu na urządzeniach mobilnych wyświetlać inną teksturę.

 

Pozdrawiam.

[endriu107]

Poczytaj o @media w css.

[properart]

1. W stylu css:

@media(max-width:767px){
.usun-mobilne{display:none;}
}

Dla elementu który ma nie być wyświetlany na mobilnych czyli do max 767px dajesz class="usun-mobilne". Element wtedy do tej szerokości nie będzie wyświetlany.

 

 

2. Alternatywnie do 1, tylko robisz kilka rozdzielczości i w zależności od rozdzielczości inny obrazek.

[Macko777]

Dziękuję bardzo za odpowiedzi, wiele pomogły. Udało mi się zrobić teksturę nagłówka wyświetlaną zależnie od rozdzielczości. Męczę się tylko z wyświetlaniem tej grafiki o której pisałem, bo nie wiem gdzie ona jest definiowana, tzn. w którym z plików .tpl. Konkretnie chodzi o grafikę, która jest obok homeslidera, w sekcji "Top". Identyfikator klasy w której znajduje się ta grafika to "htmlcontent_top", ale nie mogę znaleźć pliku w którym ona się znajduje. Przejrzałem wszystkie pliki szablonu i nie widzę tego. Czy mógłby ktoś podpowiedzieć?

[endriu107]

To jest moduł themeconfigurator.

[Macko777]

Dzięki za podpowiedź. Nadal jednak nie mogę znaleźć tego, gdzie definiowany jest ten obrazek. Próbowałem edytować plik hook.tpl w katalogu /modules/themeconfigurator/views/templates/hooks ale to chyba nie ten plik bo nadal nie działa.

[endriu107]

To jest moduł który wyświetla zdjęcia w kilku miejscach nie tylko obok slidera ale również np. w sekcji home, edycja plików tpl może nie być najlepszym rozwiązaniem. Podaj link do sklepu.

[Macko777]

Moja strona jest jeszcze na localhoście, ale wrzucam link do dema presty ze standardowym szablonem. U mnie jest dokładnie to samo, bo ja edytuję tylko domyślny szablon.

 

http://demo16.presta-shop-modules.com/

 

W moim przypadku chodzi konkretnie o obraz, który jest w miejscu "3 days sale" po prawej stronie od homeslidera.

[endriu107]

W css tak sobie go obsłużysz:

 

#htmlcontent_top > ul > li.htmlcontent-item-1 {
    display: none;
}

[Macko777]

Dzięki, wszystko działa.