wdrożenia PrestaShop

Zmiana tla tylko na stronie glownej a reszta sklepu

  • 13 Odpowiedzi
  • 3920 Wyświetleń

0 użytkowników i 1 Gość przegląda ten wątek.

*

Offline artforma.dk

  • Nowy
  • *
  • 6
  • 0
  • prestashop
  • PrestaShop: PS
  • Status: forum
Zmiana tla tylko na stronie glownej a reszta sklepu
« dnia: Lipiec 13, 2015, 05:04:12 pm »
Witam
mam pewien problem przez ktory nie moge przebrnac. Chcialbym zmienic tlo strony glownej uzywajac tla z obrazkiem ktore idealnie dopasowywuje sie pod slider. a na reszcie sklepu chcialbym uzyc innego tla juz zwyklego bez obrazka
Gdy wpisuje w globall.css
#page, .columns-container {background: #FFF url(.../img/tlo.png)!important;} header, .columns-container {background: #FFF url(.../img/tlo.jpg)!important;}
zmienia mi sie tlo z obrazkiem co ladnie wyglada na glownej jak i w calym sklepie co juz wyglada znacznie gorzej.
Czy jest jakas mozliwosc wskazania tylko i wylacznie jednego tla dla strony glownej i drugiego tla dla calego sklepu??
« Ostatnia zmiana: Lipiec 13, 2015, 05:42:52 pm wysłana przez artforma.dk »

*

Offline endriu107

  • user
  • Mieszkaniec
  • *****
  • 1,197
  • 51
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej
« Odpowiedź #1 dnia: Lipiec 13, 2015, 05:08:22 pm »
Dla strony głównej użyj #index lub w header.tpl zastosuj osobne nazwy klas dla strony głównej i innych stron.

*

Offline artforma.dk

  • Nowy
  • *
  • 6
  • 0
  • prestashop
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej
« Odpowiedź #2 dnia: Lipiec 13, 2015, 05:24:51 pm »
Zrobilem cos takiego w global.css teraz uzywa #page w calym sklepie

#index, .columns-container {background: #FFF url(/../img/tlo.png)!important;}
#page, .columns-container {background: #FFF url(/../img/tlo.jpg)!important;}
#header, .header-container .......... ( takie samo dla calego sklepu ) tutaj nie ma problemu


tlo.png - tlo z obrazkiem
tlo.jpg - tlo bez obrazka


Gdzie dokladnie w .tlp moge rozdzielic strone glowna od reszty sklepu?

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #3 dnia: Lipiec 13, 2015, 06:04:32 pm »
tylko na przykladzie tego:

#index, .columns-container {}

wytlumacze jaki masz blad.  taki zapis odnosi sie osobno dla elementu id="index" oraz elementu class="columns-container". co do indexta to sprawa oczywista, jednak jest toprzypisane dla calego elementu <body id="index"> a nie jego containera. drugi czlon odnosie sie do kazdej storny w ktorej zawarte jest 'class="columns-container" czyli czy to bedziesz index czy to bedzie page czy to bedzie contact czy inne zawsze bedzie onosilo sie do tego stylu. oczywsice ten drugi zapis z #page zastepuje tego pierwszego z #index 

jak chcesz cos przypisac dokladnie dla danej stony musisz pominac przecinek ;) czyli byloby #index . columns-container {} co mowi wprost, ze styl bedzie dziala tylko w 'columns-container' na stornei o id="index"
design4VIP z innej strony...

*

Offline artforma.dk

  • Nowy
  • *
  • 6
  • 0
  • prestashop
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #4 dnia: Lipiec 13, 2015, 06:20:04 pm »
Dzieki
A ja od 12 siedzialem i kombinowalem !!!
po wpisaniu w global.css

#index .columns-container {background: #FFF url(/../img/tlo.png)!important;}  - strona glowna z obrazkiem
#page, .columns-container {background: #FFF url(/../img/tlo.jpg)!important;} - reszta sklepu bez obrazka
 
Wszystko dziala jak nalezy !!! Dzieki wielkie :D

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #5 dnia: Lipiec 13, 2015, 06:43:56 pm »
ale tutaj:

#page, .columns-container {background: #FFF url(/../img/tlo.jpg)!important;}

masz jeszcze blad, bo obrazek bedziesz mial tak dla calego diva "page" jak i class-y 'column-container' na calej stornie.

to raczej powinno wygladac:

.columns-container {background: none;}
#index .columns-container {background: #FFF url(/../img/tlo.png);}

celowo pierwszy laduje glowny styl containera dla calej storny a pozniej dopeiro styl targetowy dla indexa i takim sposobem pozybasz sie !important-a a bedzie dzialac ;)
design4VIP z innej strony...

*

Offline artforma.dk

  • Nowy
  • *
  • 6
  • 0
  • prestashop
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #6 dnia: Lipiec 14, 2015, 04:32:20 pm »
Witaj
A nie wiesz moze jak dodac tlo dla slidera ?? zrobilem tlo na cala strone wstawilem obrazek ustawilem go idealnie na stronie przy pelnych wymiarach przegladarki ale gdy tylko zmniejszam wielkosc przegladarki to wszystko mi sie wywala. zdjecia w zalaczniku. I chcialbym podczepic tlo tej kanapy do slidera tylo zeby te zdjecia sie wyswietlaly i zmienialy co juz ustawilem ale brakuje mi stalego tla :( zeby pod zmiana wygladu przegladarki sie nie porzesuwalo

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #7 dnia: Lipiec 14, 2015, 07:42:07 pm »
to sie nazywa responsive ;) po pierwsze, na pewno to tlo nie mzoe byc na stale, te cegielki jak nabradziej w powtarzaniu XY ale tlo kanpy.... musisz sobie zlokolizowac kontener slidera id="homepage-slider" i wg niego spozycjonowac sobie tego obrazka (rzeczywisty <ul> slidera. jednak pamietaj, ze tak kontener (ten obrazaek kanapy) jak i sam rozmair tego slidera (obrazy) bedzie sie zmienial wraz z rozdzielczoscia. tu pomine fakt, ze na telefonach w ogole slider jest wylaczony, ale to usuwajac 2 linijki z kontrolera modulu mozna odblokowac. przy takiej kombinacji bedziesz musial sie nagimnastykowac stylami @media dla tych elementow.... to juz wyzsza szkola jazdy ;) ale... nei ma rzeczy niemozliwych ;) 
design4VIP z innej strony...

*

Offline endriu107

  • user
  • Mieszkaniec
  • *****
  • 1,197
  • 51
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #8 dnia: Lipiec 14, 2015, 08:34:30 pm »
Jeszcze tylko dodam że przy każdej zmianie rozdzielczości dobrze jest odświeżyć stronę, ponieważ niektóre elementy dopiero wtedy zajmują właściwą pozycje.

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #9 dnia: Lipiec 14, 2015, 08:40:51 pm »
Jeszcze tylko dodam że przy każdej zmianie rozdzielczości dobrze jest odświeżyć stronę, ponieważ niektóre elementy dopiero wtedy zajmują właściwą pozycje.
raczej, jezeli tak sie dzieje to trzeba szukac bledow... poprawny responsive powinien plynnie przelaczac sie miedzy wszystkimi rodzielczosciami. owszem, na poczatku bootstrampa byl problem np. z zmiana wygladu menu z poziomego na kontekst ale to juz zostalo poprawione.
design4VIP z innej strony...

*

Offline endriu107

  • user
  • Mieszkaniec
  • *****
  • 1,197
  • 51
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #10 dnia: Lipiec 14, 2015, 09:44:30 pm »
Ale co ma bootstrap do przeglądarki? W chrome nawet jak klikniesz f12 później na ikonkę mobilna to też masz taki komunikat, że przeglądarka może nie załadować poprawnie widoku i żeby odświeżyć zawartość strony po każdej zmianie rozdzielczości.

*

Offline artforma.dk

  • Nowy
  • *
  • 6
  • 0
  • prestashop
  • PrestaShop: PS
  • Status: forum
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #11 dnia: Lipiec 15, 2015, 05:32:39 am »
Troszke poszperalem udalo mi sie ustawic tlo slidera jednak musze chyba troszke wiecej pogrzebac bo tlo nie jest przezroczyste pomimo ze wrzucam kanape z tlem transparentnym. obrazy przeskakuja jak powinny .. ale design4Vip jak pisales przy zmniejszeniu strony obraz leciutko ucieka i zmniejsza swoja rozdzielczosc tak jak i kanapa jednak nie boli to tak oka jak wczesniej. Pytanie teraz ile zwyklych zjadaczy chleba bawi sie wielkoscia przegladarki.

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #12 dnia: Lipiec 15, 2015, 08:56:31 am »
ile "zjadaczy chleba" bawi sie rozdzielczoscia przegladarki... a tak szacuje sie, ze 40-60%. tyle urzytkownikow ecommerce korzysta z urzadzen mobilnych, a co za tym idzie mniejszymi rozdzielczosciami itp.

to, ze obraz ucieka, jak pisalem, teraz zostaje zabawa w style i @media dla poszczegolnych rozdzielczosci. w defaulcie masz o tyle plus, ze poszczgolne rozdzielszczosci wprowadzane sa skokowo czyli raczej beda to stale wartosci w px a nie zabawa w % ;)
design4VIP z innej strony...

*

Offline design4VIP

  • user
  • Mieszkaniec
  • *****
  • 3,866
  • 131
    • design4VIP z innej strony...
  • PrestaShop: PS
  • Status: Programista
Odp: Zmiana tla tylko na stronie glownej a reszta sklepu
« Odpowiedź #13 dnia: Lipiec 15, 2015, 09:02:14 am »
Ale co ma bootstrap do przeglądarki? W chrome nawet jak klikniesz f12 później na ikonkę mobilna to też masz taki komunikat, że przeglądarka może nie załadować poprawnie widoku i żeby odświeżyć zawartość strony po każdej zmianie rozdzielczości.
a gdzie ja pisalem, ze bootstramp ma cos wspolnego z przegladarka? pisalem tylko, ze pierwsze wersje mialy problemy z wysweitlaniem zmiany elementow. teraz juz tego problemu nie ma. a, ze chrome wyrzuca komunikat to wlasnie do tych storn, ktore maja albo nie zaktualizowanego BS albo maja bledy ;0 jak strona jest dobrze zrobiona, porapawnie poustawiane kolumny dla xs, sm, md, lg, a przez to malo zabawy w @media, to nie ma bata, zeby plynnie sie nie zmienialo ;) jedyne co... ponizej 768px moze byc problem bo tego juz boot nie obsluguje i tutaj trzeba sie nakombinowac ;/ ale z tego co czytalem nadchodzaca nowa wersja ma juz byc rozdzilona dodatkowo dla 480 i 240 i ma byc mozliwy podzial na 5 i 10 ;)
design4VIP z innej strony...