Modyfikacja szablonu na 100% szerokości i inne pytania

[Zares]

Edit: Jeśli temat jest w złej kategorii, to proszę o przeniesienie i z góry przepraszam. Nie nadaje się bardziej do "Dyskusji ogólnej"?

 

Pierwszy raz mam kontakt z PS i już mam dość kombinowania - proszę o pomoc.

 

Próbuję przekształcić domyślny szablon tak, by header, slider, centralna kolumna i stopka były na 100% szerokości.

 

Co już zrobiłem?

 

W global.css ustawiłem width:100%; dla page, header, footer

 

1. Na razie jest ok, problem z kolumnami. Lewą mogę wywalić z pliku header.tpl, tak? A co z prawą? W tym pliku jest jedynie lewa i centralna. Czy tego nie ruszać tam i jakoś inaczej można dezaktywować boczne kolumny?

Edit 2: Ok, prawa była w footer.tpl

 

2. Zainstalowałem blocktopmenu, ale niestety jest przesunięte w prawo i nie jest pod nagłówkiem, jak to zmienić?

 

3. Na nagłówku jest coś takiego jak "* home" - w jakim to module jest, jak to usunąć?

 

4. Na nagłówku również jest wyszukiwarka, wybór kraju, waluty, koszyk, itp. To tam jest domyślnie, czy po prostu jakoś wskoczyło do nagłówka? Gdzie mogę znaleźć kod odpowiedzialny za pozycjonowanie tych elementów? Może zostać w nagłówku, z tym że wszystko jest tak "w kupie", chciałbym to porozmieszczać jakoś.

 

5. Jak mam edytować treść stron i podstron? (w centralnej kolumnie) Kiedyś pracowałem w jakimś CMSie i było to przejrzyście, tutaj grzebałem godzinami w panelu i nie mogę do tego dojść...

 

Więcej pytań nadejdzie wkrótce, mam nadzieję, że nikogo tutaj nie zamęczę i mogę liczyć na pomoc Nigdy nie miałem do czynienia z niczym poza czystym HTML, CSS, tak więc z takim systemem jest mi ciężko, bo plików jest multum, jak i linijek kodu

 

Strona: http://bamboocraftsman.cn/shop

Edited July 27, 2013 by Zares (see edit history)

[vekia]

Edit: Jeśli temat jest w złej kategorii, to proszę o przeniesienie i z góry przepraszam. Nie nadaje się bardziej do "Dyskusji ogólnej"?

temat przeniesiony

 

 

1. Na razie jest ok, problem z kolumnami. Lewą mogę wywalić z pliku header.tpl, tak? A co z prawą? W tym pliku jest jedynie lewa i centralna. Czy tego nie ruszać tam i jakoś inaczej można dezaktywować boczne kolumny?

prawa kolumna jest w pliku footer.tpl. możesz ją usunąć. To jest najlepszy sposób, usunąc je z tpl (pod warunkiem, ze nie chcesz ich wcale)

 

2. Zainstalowałem blocktopmenu, ale niestety jest przesunięte w prawo i nie jest pod nagłówkiem, jak to zmienić?

wszystko zależy od tego co do tej pory było zmieniane w sklepie. Zerknąłem tam, niezły bałagan Do ustawienia masz style css dla tego menu. jak narazie ma on przypisane klasy container_9 oraz grid_9 czyli 980px; Musisz zmienić grida na 100% + dodatkowe style css dla samego menu.

 

reasumując zacznij od edycji grid_prestashop.css - podstawowa wiedza z zakresu budowy templatki jest konieczna jak podejmujesz takie wyzwanie

 

 

3. Na nagłówku jest coś takiego jak "* home" - w jakim to module jest, jak to usunąć?

w nagłówku? jedyne home jake widzę, to jest to w module top horizontal menu, aby je usunąć po prosty skonfiguruj moduł.

 

 

4. Na nagłówku również jest wyszukiwarka, wybór kraju, waluty, koszyk, itp. To tam jest domyślnie, czy po prostu jakoś wskoczyło do nagłówka? Gdzie mogę znaleźć kod odpowiedzialny za pozycjonowanie tych elementów? Może zostać w nagłówku, z tym że wszystko jest tak "w kupie", chciałbym to porozmieszczać jakoś.

 

 

tak, domyślna pozycja to nagłówek. Aby zmieniać pozycję modułów w nagłówku idziesz do moduły > pozycja odszukujesz listy modułow "displayTop" i zmieniasz ich pozycje + dodatkowo edytujesz style css i budowę tpl tak aby ze sobą współgrały.

 

5. Jak mam edytować treść stron i podstron? (w centralnej kolumnie) Kiedyś pracowałem w jakimś CMSie i było to przejrzyście, tutaj grzebałem godzinami w panelu i nie mogę do tego dojść...

Nie wiem o jakie treści Ci chodzi. Jest tego całe mnóstwo, musiałbyś sprecyzować.

 

Więcej pytań nadejdzie wkrótce, mam nadzieję, że nikogo tutaj nie zamęczę i mogę liczyć na pomoc Nigdy nie miałem do czynienia z niczym poza czystym HTML, CSS, tak więc z takim systemem jest mi ciężko, bo plików jest multum, jak i linijek kodu

 

polecam zacząć od podstaw, czyli smarty - jest niezbędne do modyfikacji o jakich mówisz. ABsolutnym minimum jest CSS + html. No i owczywiście podstawowa wiedza o prestashop (jak to działa, jak zmieniać moduły itp.) jak i budowie templatki.

link do dokumentacji: http://doc.prestashop.com/dashboard.action wprawdzwie po angielsku, ale jest to kopalnia wiedzy, szczególnie na samym początku przygody.

 

ps. następnym razem rozbij pytania na osobne wątki. 1 temat = 1 pytanie

łatwiej będzie odpowiadać i drążyć temat

[Zares]

wszystko zależy od tego co do tej pory było zmieniane w sklepie. Zerknąłem tam, niezły bałagan Do ustawienia masz style css dla tego menu. jak narazie ma on przypisane klasy container_9 oraz grid_9 czyli 980px; Musisz zmienić grida na 100% + dodatkowe style css dla samego menu.

Czyli mam stworzyć grida, który będzie mieć 100% i wystarczy, że pozmieniam w header.tpl i footer.tpl klasy wszystkich elementów na tego grida ze 100%?

Edit: Zrobiłem width: 100% dla container_9 oraz grid_9 - wygląda na to, że jest ok.

Z global.css powywalałem te width: 100%, które wpisywałem ręcznie zamiast w gridzie.

Elementy z nagłówka szukaj, koszyk, itp. są teraz poniżej loga - co jest źle?

Edit3: Header_right miało też przypisane grid_9, po nadaniu mniejszego elementy ponownie są w nagłówku, ale tym razem zmniejszyło się to menu poziome, a niestety gridów tam nie widzę.

Proszę o pomoc, jak to ogarnąć, bo już wymiękam powoli... Jak zmniejszam grida dla header_right, to elementy typu koszyk, szukaj, itp. wracają do nagłówka, ale dodatkowo menu poziome się zmniejsza, tak jakby było zależne od tego header_right. Lewy bok menu jest zależny od tego nieszczęsnego "* Home", a prawy bok menu jest zależny od pozycji prawego boku koszyka, zmiany języka, itp. Jak to zmienić, by menu było po prostu pod headerem, tzn. pod tym zielonym tłem?

Edit4: A może edytuję zły styl, który po prostu "nie obsługuje" menu poziomego? Jak się do tego zabrać, jak to zrobić? Byłbym na prawdę wdzięczny za pomoc. To menu mnie wykończy.

 

Nie wiem o jakie treści Ci chodzi. Jest tego całe mnóstwo, musiałbyś sprecyzować.

Chcę porobić podstrony oraz je wyedytować (tekst + ewentualny inny kod) - no wiesz, "o nas", "kontakt", "regulamin". Do każdej podstrony jest inny moduł, czy jest coś w stylu tworzenia podstron i ich edycji?

 

Edit2:

w nagłówku? jedyne home jake widzę, to jest to w module top horizontal menu, aby je usunąć po prosty skonfiguruj moduł.

Tak, jest na środku w nagłówku. Znalazłem to w kodzie źródłowym przez przeglądarkę.

 

<!-- /Block user information module HEADER -->

<div style="margin-top:8px">

<a href="http://bamboocraftsman.cn/shop/" class="v2-blockcategoryhome"> </a>

<ul class="v2-blockcategoriestop">

<li>

<a href="http://bamboocraftsman.cn/shop/index.php?id_category=1&controller=category&id_lang=1">

<span>Home</span>

</a>

</li>

<ul>

<div class="flatclear"> </div>

</div>

<!-- Menu -->

Edited July 27, 2013 by Zares (see edit history)

[vekia]

1) cssy dla menu masz tutaj: /modules/blocktopmenu/css/superfish-modified.css

.sf-menu {
margin: 0px 0;
padding: 0;
width: 980px;
background: #383838;
}

jak widzisz wciąż tam jest 980px;

[Zares]

Wiem, Vekia, dzięki, że jeszcze tu jesteś

 

Sęk w tym, że na tamtym jakbym nie zwymiarował tego menu, to i tak było styczne tak, jak to opisałem. Zrobiłem od nowa theme i rzeczywiście działa.

 

A ten nieszczęsny "* Home" Dalej tam siedzi - coś chyba jest nie tak z tym modułem menu. Zawsze to Home (nie to w menu, a to w nagłówku) jest w tej samej pozycji, co lewy bok menu, z tym że właśnie nie w menu, a nad nim - w nagłówku.

Kod pokazuje, że "przykleja" się to przed menu:

 

<!-- /Block user information module HEADER -->
<div style="margin-top:8px">
<a href="http://bamboocraftsman.cn/shop/" class="v2-blockcategoryhome"> </a>
<ul class="v2-blockcategoriestop">
<li>
<a href="http://bamboocraftsman.cn/shop/index.php?id_category=1&controller=category&id_lang=1">
<span>Home</span>
</a>
</li>
<ul>
<div class="flatclear"> </div>
</div>
<!-- Menu -->

 

Edit: Już jest ok, wystarczyło wyłączyć w modułach blockcategoriestop.

 

Można prosić o wytłumaczenie, jak edytować te podstrony? Przykładowo domyślnie w menu są: Delivery czy też Legal Notice - jak wyedytować ten tekst tam? Oraz jak zrobić nowe podstrony. Od tych produktów i kategorii produktów wiem, że są chyba odpowiedzialne za to moduły. A takie zwykłe podstrony, na których jest sam tekst + ew. jakiś swój kod?

Edited July 28, 2013 by Zares (see edit history)

[vekia]

dopiero to zauważyłem na tym zielonym tle nie było tego dobrze widać hehe

wygląda mi to na jakiś dodatkowy moduł, "blockcategoriestop"

 

powinieneś zerknąć w moduły > pozycje

odnajdź listę modułów "displayTop", być może uda Ci się ten dodatkowy moduł zidentyfikować.

Trudno mi powiedzieć co to jest za moduł, gdyż wygląda mi na jakiś niestandardowy

[Zares]

To było dokładnie to: Categories block (top); Wersja 1.0 - ja tego nie instalowałem

 

Można prosić o wytłumaczenie, jak edytować te podstrony? Przykładowo domyślnie w menu są: Delivery czy też Legal Notice - jak wyedytować ten tekst tam? Oraz jak zrobić nowe podstrony. Od tych produktów i kategorii produktów wiem, że są chyba odpowiedzialne za to moduły. A takie zwykłe podstrony, na których jest sam tekst + ew. jakiś swój kod?

 

Edit: Chyba znalazłem - Preferences - CMS - to to?

 

To to by było chyba na tyle. Jeżeli z czymś będę miał problem, to nowy temat założyć, tak?

Edited July 28, 2013 by Zares (see edit history)

[vekia]

tymi stronami zarządzasz w zakładce preferences > CMS, możesz tam edytowac te ktore już istnieją oraz tworzyć nowe.

mówisz również, że chciałbyś tam umieścić swój kod. Zapytam więc: o jaki kod chodzi?

[Zares]

I temat wraca... jak bumerang. Przepraszam, vekia, że tak zawracam Ci głowę.

 

Do tej pory poradziłem sobie tak, że elementy podciągnąłem minusowym marginesem (wiem, nie robi się tak). No i wyszło - na innych przeglądarkach źle są "podciągnięte".

 

Wywaliłem minusowe marginesy, odpaliłem stronę i zastanowiłem się, dlaczego header_right nie jest po prawej, zaraz obok loga, tylko poniżej.

 

Część kodu header.tpl:

<div id="page" class="container_9 clearfix">
  <!-- Header -->
  <div id="header" class="grid_9 alpha omega">
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
</a>
<div id="header_right" class="grid_9 omega">
 {$HOOK_TOP}
</div>
  </div>

...gdzie:

.container_9 {
margin:0 auto;
width: 100%;
}

 

.container_9 .grid_9 {width:100%;}

 

W/w kody po to, by rozszerzyć stronę na 100%.

 

Po zastanowieniu doszedłem do wniosku, że skoro #header ma 100% oraz #header_right również, to najpierw jest #header na 100%, a poniżej #header_right, również na 100%.

Tak to wygląda na screenie:

http://bamboocraftsman.cn/1.jpg

 

Po wywaleniu w header.tpl - .grid_9 z #header_right elementy wróciły na dobrą pozycję (u góry po prawej). Niestety wygląda na to, że blocktopmenu jest umieszczone w #header_right i jest zależne od jego szerokości mimo, że szerokość jest na 100% w css blocktopmenu:

.sf-menu {[/i]
[i]padding:0;
width:100%;/* 980 */
background: rgba(255, 175, 21, 0.8);
}

 

Tak to wygląda na screenie:

http://bamboocraftsman.cn/2.jpg

 

Bardzo proszę o pomoc, jak umieścić menu zaraz pod napisem bamboo craftsman (pod logiem) rozciągnięte na 100%, z tym że nie pod zielonym tłem, a na nim. Oraz żeby po tej operacji elementy po prawej u góry strony zostały na miejscu, a nie wędrowały razem z menu.

 

Mam nadzieję, że jasno opisałem i że nie robię zbytnio problemów.

Edited August 4, 2013 by Zares (see edit history)

[vekia]

header_right może mieć 100% szerokości.

Element wyozycjonuj za pomocą position:absolute;

 

nastepnie klasę menu: tj. sf-contener wypozycjonuj również z position:absolute; top:326px;

 

efekt:

[Zares]

...

 

Takie proste rozwiązania, a ja kombinowałem i kombinowałem - sprawdzałem CSSy modułów, zmieniałem TPLy, próbowałem przetransplantować menu do center_column - NIC, a Ty takie hop-siup

 

Jak Ty sprawdzasz i prezentujesz zmiany na stronie? Masz jakiś plugin do przeglądarki do "edycji live"? Bo takie grzebanie w FTP w multum katalogów i wgrywanie coraz to innych cssów jest trochę męczące.

 

Edit: Nie lubiłem nigdy pozycjonowania absolutnego, ponieważ pamiętam, że zawsze na innych przeglądarkach nieraz elementy różniły się pozycją o kilka px. Oby w tym przypadku było wszystko ok

 

Edit 2: Elementy wypozycjonowane wg. Twoich instrukcji. Niestety menu nie "łapie" 100% szerokości.

 

Edit 3: Pomogło dodanie do .sf-contener left i right. Choć jestem ciekaw, jak u Ciebie kod wyglądał, że było rozciągnięte na 100% Przychodzi mi na myśl pozycja relatywna elementu, w którym ma się rozciągać, ale z kolei header_right jest też pozycjonowany absolutnie - tak czy siak - nie wypaliło nawet po nadaniu position: relative temu header_right.

Edited August 5, 2013 by Zares (see edit history)

[vekia]

korzystam ze standardowego dodatku do chrome: developer tools ctrl+shift+i

[vekia]

tak to wygląda u mnie (wygląda na to, że jest ok?)

[Zares]

Wszystko jest ok po takich zmianach:

Edit 3: Pomogło dodanie do .sf-contener left i right. Choć jestem ciekaw, jak u Ciebie kod wyglądał, że było rozciągnięte na 100% Przychodzi mi na myśl pozycja relatywna elementu, w którym ma się rozciągać, ale z kolei header_right jest też pozycjonowany absolutnie - tak czy siak - nie wypaliło nawet po nadaniu position: relative temu header_right.

 

Można by w sumie już zostawić ten problem. A masz może jakiś pomysł, dlaczego nie działa Twój kod, który nadaje id elementom <li>?

Edited August 5, 2013 by Zares (see edit history)

[vekia]

idę obadać dokładnie go raz jeszcze, dzięki za info