Tło sklepu Shoper RWD oraz wyśrodkowanie menu górnego – poradnik

W dzisiejszym wpisie zajmiemy się pracą z wyglądem Shoper w wersji RWD. Na prośbę jednego z czytelników bloga przedstawię Wam jak wstawić tło do sklepu, aby było na całą szerokość okna przeglądarki (np tak jak twojakawa.pl ) oraz jak wyśrodkować elementy (linki) w menu głównym (w nagłówku).

1) Wstawienie tła do sklepu.

Krok 1. Do rozpoczęcia prac potrzebujemy zdjęcie o szerokości co najmniej 1920px (czyli HD) jak w przykładzie podanym powyżej.

Krok 2. przejdź do działu Konfiguracja/Wygląd/Galeria stylów i wykonaj duplikat aktywnego stylu graficznego.
Krok 3. otworzy Ci się tryb edycji nowego stylu więc przejdź na zakładkę „pliki graficzne” i wgraj zdjęcie które chcesz mieć w tle.
Krok 4. przejdź na zakładkę Własny CSS, gdzie stworzymy kod CSS

// Różnica między LESS a CSS jest wytłumaczona w naszym poprzednim wpisie:

Edycja szablonu RWD oprogramowania Shoper – Poradnik cz. 1

Krok 5.

.wrap{
background: url("../images/user/nazwapliku.jpg") no-repeat 50% 0 transparent;
}

zapis ten mówi że: do elementu o klasie „wrap” dodajemy tło w formie obrazka o nazwie „nazwapliku” i formacie jpg, który w kroku 3 wgrywaliśmy do Plików Graficznych, definiujemy że ma się nie powtarzać (możecie użyć powtórzenia w pionie lub poziomie), pozycję (w tym wypadku wyśrodkowanie w osi x i góra ekranu) a następnie kolor, który ma wypełnić stronę, gdy obrazek się „skończy”. W przykładzie został zdefiniowany kolor transparentny (choć to chyba ciężko kolorem nazwać 🙂 )

Krok 6.

Gdy nasze zdjęcie załaduje się a w niektórych elementach znajdzie się wypełnienie kolorem,
należy ustawić im tło przezroczyste, np.


header .logo-bar, header .login-bar{background-color: transparent;}

Pamiętajcie o poprawnych nazwach plików i wyczyszczeniu pamięci cache przeglądarki oraz sklepu.

2) Wyśrodkowanie elementów w menu górnym.

 

Krok 1. przejdź do działu Konfiguracja/Wygląd/Galeria stylów i wykonaj duplikat aktywnego stylu graficznego (chyba że masz juz taką kopie),
Krok 2. przechodzimy na zakładkę Własny CSS

Dodajemy tam następujące zapisy:


.menu .innermenu .menu-list{text-align: center;}
.menu .innermenu .menu-list li{float: none; display: inline-block; text-align: left;}
.menu .innermenu .menu-list li ul li{display: block;}

Krok 3. Zapisujemy własny CSS, włączamy podgląd skórki. Wszystko powinno działać poprawnie :).

To tyle na dzisiaj, mam nadzieję, że mój pierwszy wpis wam się spodoba.

14 odpowiedzi do “Tło sklepu Shoper RWD oraz wyśrodkowanie menu górnego – poradnik”

  1. Witam,
    Dziękuję za opis. Mam dwa pytania:
    1. Po wgraniu zdjęcia (szer.1920px), na stronie jest powiększone i nie widać całości – dlaczego?
    2. Czy jest możliwość ustawienia nieruchomego tła, np jak tu: http://www.milkface.com

    Pozdrawiam!

    1. Ad 1 – pytanie na jakiej rozdzielczości oglądasz sklep? Może masz mniejsza niż 1920px
      Ad 2 – wystarczy dodać dodatkowo taki kod css background-position: fixed;

  2. Witam,

    Będą jakieś lekcje poświęcone JQuery w shoperze? Chciałbym się tym trochę pobawić, ale potrzebuję kilku wskazówek, jak odnosić się do konkretnego obiektu etc. (tak, googluje cały czas i próbuje różnych metod, ale jak dotąd nic nie skutkuje).
    Np. coś prostego czyli zmiana koloru tekstu „Polecane produkty” na stronie głównej po najechaniu nań kursorem myszy.

  3. Panie Grzegorzu,

    jaka będzie poprawna nazwa elementu odpowiedzialnego za tło zdjęcia produktu? Pomimo, iż zdjęcia w sklepie są wstawiane jako pliki .png z tłem transparentnym, na stronie sklepu widać ich tło.

    Pozdrawiam

  4. Panie Grzegorzu,

    jaka będzie poprawna nazwa elementu odpowiadającego za kolor tła produktu? Pomimo, że wgrane zdjęcia są .png, na stronie widać je z białym tłem.

    Pozdrawiam

      1. Czy istnieje zatem możliwość, aby zdjęcia pozostały w formacie .png? Czy Shoper automatycznie każde zdjęcie zawsze kompresuje do .jpg?

  5. Dziękuję za pomocny artykuł!!! Jest Pan skarbnicą wiedzy 😉 Moje menu nareszcie wygląda tak jak chciałam. Przydałby się jeszcze poradnik jak wyśrodkować logo. Pozdrawiam ciepło!

Odpowiedz na „DariAnuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany.