Shoper 5.1.2 – edycja tła

Tekst o edycji tła w systemie Shoper zapowiadałem już jakiś czas temu. Dostałem jednak informacje z wiarygodnego źródła ;), iż w następnej aktualizacji ma zostać wprowadzona dodatkowa funkcjonalność ułatwiająca zarządzanie tym elementem.

Zdecydowałem więc nie pisać posta tłumacząc coś co za chwile będzie nie aktualne. Informacje o aktualizacji dostałem już ponad 3 tygodnie temu a wciąż jej nie widać więc prezentuję krótkie info jak zadbać o tło Shoper`a i zaznaczam, że to co tu opisuje może być nieaktualne w kolejnej wersji oprogramowania (po wyjściu nowej aktualizacji oprogramowania sprawdzę czy proponowane tu zmiany wprowadzają jakiś chaos 🙂 ).

Wpis będzie dość krótki bo edycja tła nie jest wielkim zadaniem. Najważniejsze jest to, że standardowa skórka shoper`a podzielona jest na kilka sekcji (wierszy), które mają z góry określone kolory tła to też wykorzystanie np jednego dużego pliku graficznego jako tło może wydać się zadaniem niełatwym dla początkujących  🙂

Poniżej przedstawiam podział na sekcje tła standardowej skórki Shoper:

 

Jak widać poza głównym blokiem klasy „container” macie również poziome sekcje w których znajdują się podstawowe elementy sklepu:

  • sekcja header – znajdują się w niej linki do logowania oraz koszyk (można ja wyłączyć w panelu admina),
  • sekcja logo – znajduje się w niej logo oraz tło nagłówka, możliwe jest także włączenie wyszukiwarki oraz banerów reklamowych,
  • sekcja menu – w której umieszczone jest menu nawigacji zarządzane w panelu administracji,
  • sekcja breadcrumbs – w której wyświetlają się „okruszki” (ścieżka do miejsca w którym znajduje się użytkownik),
  • sekcja main – czyli główna sekcja w której wyświetla się zawartość sklepu (produkty, moduły),
  • sekcja footer – wyświetlająca linki w stopce zarządzane w panelu administracyjnym,
  • sekcja shoper-foot wyświetlająca link do Shoper`a.

Tło poziomych sekcji nadpisuje wartość tła głównego bloku także chcąc wstawić plik graficzny musimy najpierw pozbyć się stylów określających poszczególne sekcje. Aby tego dokonać należy przypisać im przezroczystość.

Czyli dodajemy do user.css następujący kod:

.header, div.logo, .menu, .breadcrumbs, .main, .footer { background: none transparent; }

teraz mamy już przezroczyste tło poszczególnych sekcji więc pozostało ustawić jakiś plik graficzny jako tło głównego bloku:

.container {background: url(„../images/user/nazwa_pliku.jpg”) no-repeat center bottom white;}

ustaliliśmy odpowiednio: url czyli link do zdjęcia dodanego przez panel administracyjny, no-repeeat by nie powtarzać grafiki, ustalamy pozycję w poziomie i w pionie oraz kolor tła pod zdjęciem.

Mam nadzieję, że wszystko jest zrozumiałe. Myślę, że nie już wkrótce Shoper wprowadzi aktualizacje która ułatwi Wam zarządzanie tłem a do tego czasu mam nadzieję, że ten post wystarczy.

 

Pozdrawiam

 

 

14 odpowiedzi do “Shoper 5.1.2 – edycja tła”

  1. Czy istnieje możliwość dodawania ikon z logo np kuriera w formach dostawy przy składaniu zamówienia i jak to zrobic??

    1. teoretycznie istnieje taka możliwość. Wszystko zależy gdzie dokładnie chcesz umieścić taką ikonę no i czy chcesz edytować pliki HTML czy tylko CSS`em. Jeżeli chodzi o zmianę czystym CSS`em to proponuję wykorzystać klasę .delivery która odpowiada za wyświetlanie form dostawy a jak chcesz rozróżnić konkretne dostawy to sprawdź ich id. Najczęściej wygląda ono tak id=”shipping_1″ cyfra jest zależna od rodzaju dostawy.

  2. Witam ponownie

    Potrzebuję pomocy i właściwie już z samej ciekawości pragnę rozwiązać mój problem.

    W powyższym szablonie shopera class container zajmuje całe okienko przeglądarki i nie składa się z żadnego pionowego podziału (dopiero „innermain pagewidth” to leftcol,centercol i rightcol).
    – próbuję wyrażać się jak najsensowniej :p
    jak widać na mojej stronie (sklep zostawiam włączony) szerokość innermain pociągnąłem w pionie przez całość jako jedna kolumna z dwoma bokami -gdzie jako tło containera jakiś tam szlaczek…
    Brakuje mi więc tylko połączenia pionowej kolumny z tłem np. cienia ,czy ramki.
    Próbowałem utworzyć stylem css do tabelek ale przez brak podziału pionowego nie potrafię wyodrębnić tej części – jestem amatorem i wydaje mi się ,że jedyny na to sposób to ograniczenie container do szerokości np.1000px (tyle mam główne) i tło wstawić w html a cień nadać (lub border) przez css dla container. Dobrze myślę?

    Przepraszam ,że tak zagmatwałem ale już trochę zmęczony :/
    Ps. Mile widziana konstruktywna krytyka odnośnie całości – to mój pierwzsy skład.

    Dziekuję i pozdrawiam

    1. hmm, proponuje aktualne tło przenieść do body a dla container dodać jako tło plik graficzny z cieniem tak powinno być najłatwiej

  3. Bardzo przydatne info o tym backgroundzie. Zmieniłem dzięki temu bezproblemowo. Mam natomiast pytanie: w jaki sposób zmienić tło obrazków produktów(na stronie głównej i na stronie produktu w galerii)? Nawet pomimo tego że to pliki *.png, wyświetla białe tło – tło na stronie jest czarne. Jak to można zrobić?Szukam i niemogę tego odnaleźć…

    1. a w jakiej przeglądarce masz to czarne tło? z tego co pamiętam starsze IE miały problem z formatem PNG. Jeżeli dodajesz normalnie zdjęcia to tła nie powinno pokazywać bo zdjęcie ma swoje a jak dodajesz zdjęcia z tłem prześwitującym to tło pod zdjęciem możesz kontrolować np przez klasę .mainimgsize

  4. Zmieniałem właśnie tę klasę, ale niestety tło nadal jest białe. Teraz robię kolejny sklep, jednak tym razem zrobię obrazki z tłem czarnym żeby nie było tego problemu. Oczywiście dodawałem png z prześwitem. Sprawdzałem na IE 8 i nowych wersjach Firefox-a.

  5. Nie mogę podmienić kolory tła na wybrany obrazek wczytany do katalogu user, wyświetla się białe tło nie wczytuje się grafika.co mogę robić żle ? Ten sam problem jest przy edycji menu kategorii, nie wczytują się grafiki przy linkach

    Pozdr

  6. A ja mam pytanie z innej beczki.
    Czy jest możliwość edycji wyglądu sklepu lokalnie na serwerze testowym, gdzie mamy możliwość edycji szablonów za pomocą IDE a nie poprzez interfejs sklepu?

Dodaj komentarz

Twój adres email nie zostanie opublikowany.