Opublikowane w przez Grzegorz Rusin

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”

  3. 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.

  4. 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

Dodaj komentarz