Jak zainstalować szablon Allegro?

Tutoriale

Jak zainstalować szablon allegro

Autor:

Front-end developer i freelancer, fan Star Wars i Terence'a McKenny

Nowa wersja edytora szablonów aukcji Allegro, oprócz wprowadzenia szeregu udogodnień, spowodowała też spore zamieszanie wśród sprzedawców przyzwyczajonych do starego sposobu edycji treści. Z tej okazji podzielimy się z początkującymi użytkownikami dokładnym opisem instalacji i edycji szablonów oraz radzenia sobie z ładowaniem obrazków z zewnętrznego serwera.

Przygotowania

Na początek pobierz stworzony przez nas szablon "Światy Herbaty": szablon_allegro_swiaty_herbaty.zip

Oparliśmy na nim cały opis instalacji i edycji zawarty w tym artykule. Szablon jest w pełni darmowy, również do użytku komercyjnego. Przed użyciem zapoznaj się z licencją w pliku credits.txt . W pliku znajdziesz też informacje na temat autorów zdjęć i ikon.

Do edycji szablonu będzie ci potrzebny dobry edytor, który nie zdeformuje kodu szablonu i ładnie podświetli składnię. W tekście będziemy używać skrótów klawiszowych jednego, konkretnego programu, dlatego przed pójściem dalej zainstaluj edytor Sublime Text 2 ze stronyhttp://www.sublimetext.com/2

Rozpakuj szablon na dysku i otwórz w Sublime Text plik o nazwie template.html - w górnym menu kliknij w File a następnie Open file. Powinieneś zobaczyć ekran podobny do tego z Rys. 1.

Rys. 1 - Ekran edytora Sublime Text z otworzonym plikiem template.html



Wysyłamy obrazki szablonu na serwer imageshack

Większość szablonów zawiera elementy graficzne w postaci plików jpg , gif lub png. W tym momencie czeka cię pierwszy problem do rozwiązania: Allegro nie daje możliwości załączania grafiki bezpośrednio w szablonie. Przed instalacją szablonu musisz więc wysłać wszystkie obrazki na serwer i podmienić w szablonie miejsca, które odwołują się do plików graficznych - na adresy obrazków na serwerze,

Jako serwera obrazków użyjemy darmowej usługi o nazwie Imageshack. Przejdź pod adres: http://www.imageshack.us  i załóż darmowe konto. Po rejestracji i zalogowaniu się, kliknij w odnośnik menu o nazwie Media upload (Przesyłanie Multimediów). Zostaniesz przeniesiony na stronę z Rys. 2

Rys. 2 - Wysyłanie zdjęć i obrazków na imageshack.us


Każdy obrazek z  katalogu szablonu będziemy pojedynczo wysyłać na serwer, kopiować jego nowy adres,  odszukiwać w kodzie szablonu odnośnika/odnośników do obrazka, a następnie podmieniać odnośnik(-i) na  adres obrazka na serwerze. Wysyłanie obrazków na serwer wykonuje się tylko raz - nie licząc ewentualnych, późniejszych ich przeróbek i dodawania zdjęć towarów do konkretnej aukcji.

Opisany sposób wysyłania obrazków na serwer i odnajdywania ich w kodzie szablonu z pewnością jest mało efektywny. Chcieliśmy jednak opisać ten proces w miarę dokładnie i przystępnie dla osób początkujących, stąd ilość powtórzeń i brak optymalizacji działania.

Przy pierwszym wczytaniu ekranu z Rys. 2, zmień ustawienie  Zmiana rozmiaru obrazu na Nie zmieniaj rozmiaru - w przeciwnym razie wysyłane obrazki zostaną automatycznie zmniejszone, co spowoduje rozsypanie się szablonu. Strona zapamięta twój wybór. 

Krok 1: Wysłanie pojedynczego obrazka na serwer 

W oknie przeglądarki kliknij w szary przycisk Browse. Pojawi się okienko dialogowe.  Udaj się do katalogu z szablonem na swoim dysku. Wybierz pierwszy plik graficzny z listy (lub następny, jeśli właśnie powtarzasz kroki dla kolejnych obrazków) i  kliknij OK. Po chwili zobaczysz nazwę obrazka na liście plików do wysłania. Wciśnij granatowy przycisk Prześlij teraz, a po chwili zostaniesz przeniesiony na stronę widoczną na Rys. 3

Rys.3 Obrazek został wysłany na serwer



Krok 2: Skopiowanie nazwy wysłanego pliku obrazka do schowka

Trzymając lewy klawisz myszki zaznacz nazwę pliku razem z rozszerzeniem. W przypadku pierwszego pliku będzie on nosił nazwę jak na Rys. 3 : dotshorizontal.png .  Użyj kombinacji klawiszy CTRL+C, aby skopiować nazwę pliku do schowka.

Krok 3: Podmienienie wszystkich miejsc występowania odnośnika do danego obrazka w szablonie

Przejdź do okna edytora Sublime Text i użyj kombinacji klawiszy CTRL+H. Na dole ekranu pojawi się ramka z dwoma polami: Find What oraz Replace With.  Pole Find What służy do wpisywania frazy, którą program ma odnaleźć w edytowanym szablonie; pole Replace with - ciągu znaków, który ma zastąpić szukaną frazę. 

Edytor wyręcza cię z wklejania nazwy pliku w pole Find What : po wciśnięciu kombinacji CTRL+H automatycznie wypełnia zawartość tego pola tekstem ze schowka, dlatego w Kroku 2 prosiliśmy cię o skopiowanie wytłuszczonej nazwy pliku do schowka. 

Wróć do strony imageshack, gdyż teraz będziesz musiał skopiować do schowka adres www obrazka na serwerze. Kliknij w zawartość pola o nazwie Link Bezpośredni. Skopiuj podświetloną zawartość do schowka (CTRL+C) i przejdź ponownie do okna edytora. Wklej zawartość ze schowka przy pomocy kombinacji klawiszy CTRL+V w pole Replace with,  a następnie kliknij w przycisk Replace All, który znajduje się w prawym dolnym rogu ekranu. 

Po wykonaniu tych trzech kroków wróć do ekranu wysyłania kolejnego pliku, klikając w przycisk Przesyłanie Multimediów (Media Upload). Powtórz kroki dla pozostałych plików graficznych.

Wklejanie szablonu do Allegro

Prawie całą pracę masz już za sobą. W okienku edytora Sublime Text 2 użyj teraz kombinacji klawiszy CTRL+S, aby zapisać gotowy szablon na dysku, następnie CTRL+A aby zaznacz cały szablon, po czym CTRL+C  aby skopiować kod szablonu do schowka. 

Zaloguj się na konto Allegro i przejdź do zakładki Moja sprzedaż, która pokaże się po kliknięciu w menu moje allegro. Wykonaj poniższe kroki:

  • W menu bocznym Ustawienia sprzedaży kliknij w link Szablony

  • W okienku głównym kliknij przycisk Nowy szablon (ikonka z symbolem plusa)

  • W pierwszym polu od góry wpisz nazwę szablonu, np. Światy Herbaty

  • Zjedź na sam dół ekranu i w ramce Dodatkowe informacje o przedmiocie wybierz zakładkę Edytor tekstowy. W duże, puste pole wklej ze schowka (CTRL+V) kod szablonu, który skopiowałeś z edytora.

  • Cały czas będąc w zakładce Edytor tekstowy kliknij link Podgląd, który znajduje się tuż poniżej białego pola do wklejania i edycji szablonu.

Jeśli wykonałeś wszystkie kroki prawidłowo, powinieneś zobaczyć okienko podglądu szablonu, które wyświetla treść identycznie jak na naszej stronie demonstacyjnej: http://www.bazingadesigns.com/demo/darmowy-szablon-allegro-herbata/ . Zamknij okienko podglądu i kliknij na chwilę w zakładkę Edytor wizualny

Jeśli instalujesz nasz szablon Allegro w celach komercyjnych, to w tym momencie nadszedł czas na podmianę wszelkich danych kontaktowych, nagłówków, obrazków czy dodanie treści firmowych, które powtarzane będą na każdej aukcji wystawionej przy pomocy tego szablonu. Wszystkich tych zmian będziesz dokonywał w Edytorze wizualnym. Jako że wstępna edycja szablonu i dodawanie treści do konkretnej aukcji odbywa się tak samo, korzystanie z edytora wizualnego zostanie omówione w punkcie Używanie nowego edytora Allegro.

Aby zakończyć dodawanie szablonu kliknij teraz przycisk Podsumowanie na samym dole ekranu. W następnym widoku jeszcze raz zobaczysz podgląd szablonu - zjedź na dół ekranu i kliknij Zapisz szablon. Twój nowy szablon jest gotowy do użycia.

Przeczytaj, jeśli na podglądzie brakuje obrazków

Może się zdarzyć, że w czasie podmieniania adresów obrazków w pliku szablonu pominiesz przez przypadek niektóre wpisy i szablon wyświetli puste miejsca z ikonką brakującego obrazka. Wróć wtedy do edytora tekstowego i wykonaj następujące kroki aby sprawdzić które miejsca zostały pominięte:

  • Wjedź na samą górę szablonu (CTRL+ klawisz Home)

  • Użyj kombinacji klawiszy CTRL+F aby przywołać na dole ekranu okienko wyszukiwania fragmentu tekstu.

  • Wpisz w puste, jasne pole następującą treść bez cudzysłowia: ".jpg" (kropka-j-p-g)

  • Wciśnij przycisk Find znajdujący się na prawo od tego pola 

Po każdorazowym naciśnięciu przycisku Find program odniesie cię do linijki zawierającej odnośniki do obrazków. Jeśli w którejś linijce widnieje jedynie krótka nazwa pliku - bez długiego adresu kierującego do imageshack, to znaczy, że właśnie znalazłeś brakujący obrazek. Odnajdź tą nazwę pliku w folderze z szablonem na swoim dysku, ponownie wyślij na imageshack, pobierz adres obrazka na imageshack i wklej go w znalezione  miejsce zastępując krótką nazwę pliku długim adresem. Pamiętaj, aby podmieniać jedynie nazwy plików - nie zastępuj całych linijek. Po skończonych poprawkach skopiuj ponownie cały szablon do schowka i wklej do edytora tekstowego Allegro zastępując poprzednie wklejenie. 

Uwaga: te same kroki powtórz dla obrazków typu png - w trzecim kroku zastępując szukanie frazy ".jpg" na ".png" .


Używanie nowego edytora Allegro

Podstawowa edycja treści szablonu jest teraz bardzo łatwa. Wystarczy, że klikniesz w odpowiednie miejsce w edytorze wizualnym i zaczniesz wpisywać swoją treść. Działa to również dla obrazków, o czym za chwilę. 

Jeśli nie otworzyłeś jeszcze szablonu do edycji, udaj się do zakładki z twoimi szablonami (moje allegro-> moja sprzedaż -> ustawienia sprzedaży -> szablony) i w menu Opcje, które widnieje po prawej stronie od nazwy szablonu wybierz Edytuj.  Zjedź na sam dół ekranu i kliknij zakładkę Edytor wizualny.

Chociaż będziemy opisywać w tym punkcie zmiany szablonu przez wczytanie go w zakładce Szablony, to wszystkie informacje będą odnosić się także do edycji treści podczas późniejszego wystawiania konkretnej aukcji: edytor Allegro zachowuje się i wygląda teraz wszędzie tak samo.

Postaramy się teraz zamienić wszystkie przykładowe treści szablonu na prawdziwy opis twojej firmy. Na pierwszy ogień pójdzie duży, biały slogan widoczny na animowanym (po najeździe myszką) tle. Zastanów się chwilę, co chciałbyś przekazać swoim klientom, po czym kliknij na literę "W" w wyrazie "Wybierz" i zacznij pisać. Twoja treść powinna zacząć pojawiać się na ekranie w stylu zdefiniowanym przez szablon, czyli dużą, białą czcionką z delikatnym cieniem. 

Najbezpieczniejszą metodą rozpoczynania nowej lini tekstu jest używanie w Allegro kombinacji klawiszy SHIFT+ENTER (trzymając wciśnięty klawisz SHIFT wciśnij ENTER). Możesz oczywiście używać samego klawisza ENTER, ale może to czasem spowodować efekt inny od zamierzonego. Generalnie trzymaj się takiej zasady: jeśli chcesz przejść do następnej lini wewnątrz danego akapitu, nagłówka, bądź innej jednolitej części treści - używaj SHIFT+ENTER. Jeśli z kolei chciałbyś utworzyć następny element takiego typu, jaki właśnie edytujesz - wciśnij sam ENTER.

Na podobnej zasadzie zmienisz przykładowy tekst w zielonym polu z rączką, które docelowo ma zawierać nazwę sprzedawanego towaru. Zostawimy to dla ciebie jako ćwiczenie do samodzielnego wykonania. Równie dobrze możesz nie zmieniać teraz nazwy towaru i jego ceny obok, gdyż te dane będą prawdopodobnie unikalne dla każdej z wystawionych aukcji.

Zjedź teraz trochę niżej, w miejsce gdzie znajduje się przykładowa treść opisu samej aukcji - z pewnością zauważyłeś, że to miejsce różni się nieco od wersji na podglądzie: brakuje przerw między akapitami. Jest to spowodowane tym, że Allegro automatycznie (na chwilę obecną - 8 czerwca 2012) obcina niektóre elementy stylu przy wczytywaniu szablon do edytora wizualnego, w tym marginesy między akapitami. Nie martw się tym - jeśli chcesz zobaczyć jak aktualnie prezentuje się zmieniony szablon po prostu kliknij w link Podgląd (pod boksem edytora)

Edycja akapitów jest dobrym sposobem na sprawdzenie różnicy w działaniu SHIFT+ENTER i samego ENTER. Zwróć uwagę na to, jak duża przerwa tworzy się w tekście przy zastosowaniu tych dwóch metod. Jeśli popełnisz błąd i będziesz chciał go cofnąć - użyj kombinacji klawiszy CTRL+Z (tzw. undo). Jeśli po zrobieniu undo stwierdzisz, że chciałbyś przywrócić to, co cofnąłeś - wciśnij CTRL+Y (tzw. redo).

Następną rzeczą, której nauczymy się używać przy okazji dostosowywania szablonu są listy. Elementy list nienumerowanych ostylizowane są na szablonie zieloną strzałką. Jeśli nie potrzebujesz w tym miejscu listy - zaznacz myszką jej wszystkie elementy i wciśnij klawisz Delete na klawiaturze. Jeśli po skasowaniu listy zostanie ci na ekranie jedna luźna strzałka - pozbędziesz się jej ustawiając migający kursor edytora tuż za nią i wciskając klawisz Backspace. Podobnie, jak w przypadku paragrafów, nowy element listy tworzysz wciskając ENTER, a do następnej linijki edytowanego obecnie punktu listy przechodzisz przy pomocy SHIFT+ENTER. 

Zauważ, że gdy klikniesz kursorem na istniejącej już liście, w menu narzędzi edycji (Rys. 4) zostanie podświetlona ikonka listy. Ikonki w menu narzędziowym będą podświetlać się za każdym razem, gdy w edytorze wizualnym klikniesz na element rozpoznawalny przez Allegro. 

Rys. 4 Narzędzia edycji


Idąc od lewej do prawej ikonki te oznaczają: 

  • Wstawianie/edycja linków

  • Wstawianie/edycja obrazków

  • Wstawianie tekstu skopiowanego z programu Microsoft Word

  • Edycja/ustawienie koloru czcionki

  • Edycja/ustawienie koloru tła czczionki

  • Włączenie/wyłączenie pogrubienia czcionki

  • Włączenie/wyłączenie pochylenia czcionki

  • Włączenie/wyłączenie podkreślenia czcionki

  • Włączenie/wyłączenie przekreślenia czcionki

  • Włączenie/wyłączenie indeksu dolnego

  • Włączenie/wyłączenie indeksu górnego

  • Wyrównanie tekstu do lewej

  • Wyrównanie tekstu do środka

  • Wyrównanie tekstu do prawej

  • Justowanie tekstu - równomierne rozłożenie po całej szerokości

  • Wstawianie/edycja tabelki

  • Wcięcie tekstu od lewej strony

  • Wcięcie tekstu od prawej strony

  • Wstawianie/edycja listy numerowanej

  • Wstawianie/edycja listy nienumerowanej 

Podmieńmy teraz przykładowe obrazki w szablonie na adekwatne do twojej aukcji. Najpierw zajmiemy się górnym logo. Cały górny pas zawierający napis, czerwony chiński znaczek i numer telefonu to jeden obrazek o wymiarach 960 pikseli na 40 pikseli. Do wprowadzenia tej zmiany nie potrzebujesz znajomości języka HTML. 

Korzystając ze swojego ulubionego edytora graficznego stwórz obrazek-logo o wspomnianych 980x40 - najlepiej na białym tle i zapisz go na swoim dysku jako plik jpg. Ponownie użyjemy imageshackdo wysłania obrazka na serwer.  Postępuj tak samo jak w punkcie Wysyłamy obrazki szablonu na serwer imageshack i wróć do czytania dalszego opisu gdy w schowku będziesz miał już skopiowany adres obrazka z imageshack. 

Gotowe? Świetnie. Kliknij myszką na górny pas logo w edytorze wizualnym. Zauważysz, że w menu narzędzi edycji (Rys. 4) podświetliła się ikonka obrazka. Kliknij na tą ikonkę, a otworzysz nowe okienko przeglądarki, jak na Rys. 5. 

Rys. 5 Wyskakujące okienko wstawiania/edycji obrazków w edytorze wizualnym Allegro

Przy pomocy kombinacji CTRL+V wklej ze schowka adres obrazka logo w pole o nazwie URL obrazka. Zwróć uwagę, czy zastąpiłeś cały stary adres nowym adresem ze schowka. Kliknij przycisk Aktualizuj i... prawdopodobnie nie zobaczysz jeszcze swojego nowego obrazka w edytorze wizualnym. Ten błąd zdarzał się nam bardzo często - edytor nie odświeża na czas nowego obrazka. Nie wpływa to na pojawienie się obrazka w samym szablonie, ale może być dosyć mylące. Obejdziesz to w następujący sposób: kliknij ponownie ikonkę obrazka w menu narzędzi i jeszcze raz kliknij Aktualizuj. Teraz wszystko powinno być na swoim miejscu.

Analogicznie podmienisz przykładowe zdjęcie z kawą w opisie. Co jednak, jeśli chciałbyś wprowadzić jeszcze jedno miejsce na zdjęcie z podpisem? Jeśli użyłbyś jedynie ikonki wstawiania obrazka, uzyskałbyś zwykły obrazek bez podpisu. W trakcie pisania artykułu sprawdziliśmy najpierw, czy można w łatwy sposób klonować całe stylizowane okienko obrazka w edytorze wizualnym; doszliśmy jednak do wniosku, że dużo łatwiej będzie to zrobić wprowadzając cię do prostej edycji kodu szablonu, ponieważ dokładny opis tego, co należy wykonać, aby uniknąć błędów przy klonowaniu mógłby przekroczyć granice twojej cierpliwości. Po informacje na ten tema zapraszamy więc do punktów Zawawansowana edycja szablonu oraz Zaawansowana edycja szablonu - obrazki z podpisami.

Edycja treści prawej kolumny nie powinna sprawić ci żadnych trudności, więc ostatni temat w tym punkcie poświęcimy podmianie linków w menu górnym.  Na początek zdobądź adresy poszczególnych zakładek używając poniższej rozpiski lub własnego doświadczenia. Wyniki poszukiwań adresów zapisz sobie dla ułatwienia w nowym pliku tekstowym - użyjemy ich za chwilę do wypełnienia szablonu.

Nasze aukcje 

Skąd pobrać adres: Przejdź do zakładki moje konto, rozwiń w bocznym menu zakładkę Ustawienia. Kliknij w Strona o mnie. Zjedź na dół i kliknij w przycisk Pokaż moją stronę- pokaże się nowe okno przeglądarki. Rozszerz okno na cały ekran i kliknij w zakładkę Sprzedaję. Skopiuj adres strony z paska adresu przeglądarki.

Komentarze

Skąd pobrać adres: Przejdź do zakładki moje konto, a następnie rozwiń w bocznym menu zakładkę Komentarze i ocena sprzedaży. Kliknij w Moja karta użytkownikai skopiuj adres strony z paska adresu przeglądarki 

Strona o nas

Skąd pobrać adres: Przejdź do zakładki moje konto, rozwiń w bocznym menu zakładkę Ustawienia. Kliknij w Strona o mnie. Zjedź na dół i kliknij w przycisk Pokaż moją stronę- pokaże się nowe okno przeglądarki. Skopiuj adres strony z paska adresu przeglądarki.

Kontakt

Skąd pobrać adres: Dodaj do poniżego adresu (od razu po znaku zapytania, bez spacji) swój numer identyfikacyjny użytkownika: 

http://allegro.pl/SendMailToUser.php? 

Numer identyfikacyjny (ciąg cyfr) możesz skopiować z wcześniejszych adresów, które pobrałeś - znajduje się na końcu każdego z nich.

Dodaj do ulubionych

Skąd pobrać adres: Przejdź na stronę http://allegro.pl/myaccount/favourites/favourites_sellers.php i zjedźna sam dół, aż zobaczysz napis w ramce: Ikona "Dodaj mnie do listy". Skopiuj pełny adres znajdujący się w pierwszych cudzysłowiach. Adres będzie wyglądać podobnie do:

http://allegro.pl/myaccount/favourites/favourites_sellers.php/addNew/?userId=

Zaawansowana edycja szablonu

Nie wszystkie elementy graficzne lub tekstowe można w intuicyjny sposób zmienić lub dodać z poziomu edytora wizualnego. W naszym szablonie dotyczy to szczególnie górnego zmieniacza zdjęć oraz zdjęć z podpisami w opisie aukcji. Nie jest to trudne, jednak wymaga ponownego wczytania szablonu do edytora Sublime Text.

Nie chcielibyśmy stracić wszystkich zmian w szablonie, które wprowadziliśmy w międzyczasie, wkleimy więc do edytora Sublime Text - jako nowy plik -  ostatnią wersję szablonu zapisaną w Allegro. 

Przejdź do edycji szablonu i przełącz się na zakładkę Edytor tekstowy. Kliknij w okienko zawierające kod szablonu formularz, wciśnij CTRL+A (zaznacz wszystko), a potem CTRL+C. 

Powinieneś mieć teraz szablon w schowku. Przełącz się na okno edytora Sublime Text, kliknij File, a nastepnie New file. Wklej zawartość schowka (CTRL+V) i zapisz całość jako nowy plik nazywając go szablon01.html . Po zapisaniu pliku z rozszerzeniem .html ponownie zobaczysz kod z podświetlonymi elementami jak wcześniej. 

Jesteś już gotowy do wprowadzenia bardziej zaawansowanych zmian. W kodzie szablonu zostawiliśmy specjalne komentarze, które ułatwią ci odszukanie miejsc, które będziemy zmieniać.

Zaawansowana edycja szablonu - animowane tła

Będzie to prawdopodobnie pierwsza rzecz, która będzie ci potrzebna do przejęcia pełnej kontroli firmowej nad szablonem. Pomimo wrażenia, że animacja składa się z wielu małych obrazków - tak naprawdę zmieniane są tylko 3 tła, z odpowiednim opóźnieniem czasowym poszczególnych segmentów. 

Wszystkie tła mają ustaloną stałą wielkość, która wynosi 960 x 450 pikseli. W takiej rozdzielczości powinieneś też przygotować własne trzy slajdy. Jeśli potrzebujesz szablonu graficznego do pomocy - użyj oryginalnych plików graficznych z tłami, nazywają się: slider01.jpgslider02.jpgslider03.jpg.

Dla ułatwienia, do nazwy pliku obrazka, który ma wyświetlić się jako pierwszy - dodaj cyfrę 1, do środkowego - 2, a do obrazka na samym spodzie - 3. Gotowe obrazki wyślij na serwer imageshack i pobierz ich adresy z pól Link Bezpośredni

Podmieńmy pierwszy obrazek prezentacji: będąc pod edytorem Sublime Text użyj kombinacji klawiszy CTRL+F (odnajdywanie tekstu) i jako poszukiwaną frazę (na dole okna edytora) wpisz: 

Tło numer 1

Zostaniesz odniesiony do miejsca, które należy zmienić. Tuż pod znalezioną frazą zobaczysz kod podobny do poniższego:

#user_field ul#shTopChanger li div.top {
background:url(http://adres.obrazka/slider01.jpg);
}

Twoim zadaniem będzie podmienienie adresu zaczynającego się od słowa http na adres nowego obrazka numer 1, który właśnie wysłałeś na imageshack.

Adres drugiego obrazka do podmiany znajduje się parę linijek niżej, pod napisem Tło numer 2. Postępuj analogicznie jak z pierwszym obrazkiem.

Aby odnaleźć trzeci obrazek, wciśnij jeszcze raz CTRL+F i tym razem wpisz:

Tło numer 3

Sublime Text przeniesie cię nieco wyżej, w kierunku początku pliku, a tuż pod znalezionym tekstem zobaczysz poniższy kod:

#user_field ul#shTopChanger {
background:url(http://adres.obrazka/slider03.jpg);
display:block;
height:450px;
list-style-type:none;
margin:0;
padding:0;
width:960px;
}

Tak samo jak w przypadku poprzednich obrazków - podmień adres w nawiasie na nowy.

Gotowe! Postawiłeś właśnie pierwsze kroki w samodzielnej edycji kodu szablonu. Jeśli to już wszystkie zmiany, jakie chciałeś wprowadzić, zapisz plik na dysku i skopiuj nową wersję szablonu na Allegro.

Zaawansowana edycja szablonu - obrazki z podpisami

Dodanie większej ilości miejsc na obrazki z podpisami jest bardzo łatwe. Czynność tą wykonamy podobnie jak podmianę animowanych teł w poprzednim punkcie. Otwórz plik szablonu w edytorze Sublime Text i odnajdź (CTRL+F) frazę:

Zdjęcie z podpisem

Zostaniesz odesłany do miejsca, które zawiera poniższy kod:

<div class="captionImage">
  <img src="http://adres.obrazka/zdjeciekawa.jpg">
  <div class="captionText">
    Kubek gorącej kawy cappuccino - fot. Igor Wnuk
  </div>
  <div class="shMagnify"></div>
</div>

Zaznacz wszystkie powyższe i skopiuj zaznaczenie do schowka (CTRL+C).  Ustaw migający kursor edytora tuż za zamknięciem ostatniego elementu div

</div> <- tu ustaw kursor

i wciśnij klawisz ENTER aby stworzyć pustą linijkę. Użyj kombinacji CTRL+V aby wkleić zawartość schowka porządaną ilość razy, zależną od ilości nowych miejsc na obrazki, którą chciałbyś zobaczyć na szablonie. Zapisz następnie zmieniony plik szablonu na dysku i wklej do edytora tekstowego Allegro. 

Dlaczego tła nie zmieniają się same? (dla programistów)

Nie wszystkie elementy języka CSS3  przechodzą bez szwanku przez filtr Allegro. Część jest odrzucana a inne zostają (celowo lub nie) uszkodzone po drodze i nie są rozpoznawalne przez przeglądarki. Tak sprawa wygląda obecnie przy próbie wprowadzenia samoczynnych animacji do szablonu Allegro. 

Aby używać zapętlonych animacji CSS3 definiuje się tzw. klatki kluczowe (ang. keyframes) pisząc kod w stylu:

@keyframes nazwaAnimacji {
           
    0%   { opacity: 0 }
    20%  { opacity: 0.3 }
    50%  { opacity: 0.7 }
    100% { opacity: 1.0 }
         
}

Tu niestety pojawia się problem, gdyż Allegro traktuje definicję klatek kluczowych animacji jak zasady dla zwykłych elementów HTML i dodaje automatycznie swój prefix #user_field, który niszczy znaczenie wpisanego przez nas kodu, zamieniając go na:

#user_field @keyframes nazwaAnimacji {
          
    0%   { opacity: 0 }
    #user_field 20%  { opacity: 0.3 }
    #user_field 50%  { opacity: 0.7 }
    #user_field 100% { opacity: 1.0 }
         
}

Reasumując: dopóki Allegro nie doda do silnika szablonów reguły, która uwzględnia keyframes, nie możemy użyć zapętlonych, automatycznych animacji. Możemy za to - tak, jak ma to miejsce w naszym szablonie - użyć animowanych przejść (tzw. CSS3 transitions) . Niestety, owe przejścia działają tylko w trakcie zmiany stanu danego elementu przez użytkownika, jak np. użyte przez nas najechanie na banner.

Przydatne linki i dokumentacja

Tester szablonów - pokazuje np. które elementy kodu zostaną usunięte (musisz być zalogowany):

http://allegro.pl/auction_test.php

Najczęściej zadawane pytania odnośnie pisania szablonów:

http://cafe.allegro.pl/showthread.php?39007-Najcz%C4%99stsze-problemy-z-opisami-aukcji

http://cafe.allegro.pl/showthread.php?38315-FAQ-czyli-najcz%C4%99%C5%9Bciej-zadawane-pytania

Na zakończenie

Bardzo dziękujemy za odwiedzenie Bazinga Designs! Mamy nadzieję, że ten artykuł pomoże wam w drodze do stworzenia lepiej wyglądających, atrakcyjniejszych stron aukcji internetowych. Jak zawsze służymy pomocą i z chęcią odpowiemy na pytania - jeśli będziecie mieli ochotę zostawić je w komentarzach.

Newsletter

Zapisz się na bezpłatny newsletter aby jako pierwszy dowiedzieć się o nowościach i promocjach.

 

Zapisz się

 

 
 

Zobacz: 

Lubią nas

Bazinga Designs

Bazinga Puławy :

Ul. PCK 5/20

24-100 Puławy

tel. 667-200-706


Bazinga Warszawa :

Ul. Hlonda 2a/23

02-972 Warszawa

tel. 722-188-134

 

bazingadesigns@gmail.com

 

REGON 060622686

NIP: 716-255-43-47

 
 
 

Pracujemy na: