W celu zastosowania własnego wyglądu należy wykonać czynności poniżej:
- Należy utworzyć nowy folder na swoim twardym dysku o nazwie np. "nowy":
- Następnie należy wejść na serwer, na którym znajdują się pliki Twojego sklepu i odszukać folder public_html -> templates -> szablony. W folderze szablony odszukujemy szablon, który obsługuje Twój sklep. Na rzecz przewodnika użyłem szablonu szablon2014 szaro_zielony, po czym kopiujemy jego całą zawartość do nowo stworzonego folderu "nowy":
- Po skopiowaniu otwórzmy plik install.sql, odszukajmy linijkę values ('szablon2014 szaro_zielony'... i zamieńmy wartość szablon2014_szaro_zielony na "nowy": values('nowy'... Po edycji zamykamy plik i zapisujemy przyciskając przycisk "Tak/Yes" gdy wyskoczy komunikat z zapytaniem.
Czynności przygotowujące mamy za sobą. Teraz zajmiemy się pocięciem Twojego wcześniej zaprojektowanego szablonu.
Uprzednio jeszcze zapoznajmy się z plikami, z którymi będziemy pracować podczas dostosowywania szablonu.
- Przede wszystkim pliki graficzne zawarte w podfolderach folderu images
- Plik stylesheet.css Kaskadowych Arkuszy Styli opisujących nasz sklep
- Przejdźmy do czynności pocięcia grafiki i podmiany plików.
W tym celu potrzebne nam będzie narzędzie do cięcia zaprojektowanej grafiki, np.: 30 dniowa wersja Adobe Photoshop lub 30 dniowa wersja Corel Draw.
- Otwórz plik z Twoim szablonem, na początku zajmiemy się tłem.
- Wytnij starannie grafikę z tłem
- Nadpisz grafikę za plik tlo.jpg znajdujący się w folderze images/. (podczas zapisywania naciśnij w okienku na plik tlo.jpg i wciśnij zapisz)
- najlepiej jakby Twoje tło miało taką samą wysokość i szerokość jak tło, które się znajduję w folderze images
- Żeby pociąć i dostosować grafikę kolumn bocznych należy wiedzieć jak są one skonstruowane i gdzie można znaleźć ich grafiki.
- Grafiki znajdują się w folderze images/infobox/
Górna część kolumny składa się z 3 elementów graficznych. Dwa z nich są rogami - lewym i prawym - niezmiennymi, natomiast środkowy jest tłem i jest dostosowany w taki sposób by podczas rozciągania się kolumny on również się rozciągał. Wzór:
Zatem widać, że górna część składa się z trzech osobnych obrazków, mianowicie: box1.jpg, box2.jpg, box3.jpg. Występuję również plik czwarty, tzw. specjalny, box3_a.jpg, w momencie kiedy tworzysz plik box3.jpg stwórz taki sam plik z elementem wyróżniającym się i zapisz go jako plik box3_a.jpg.
Oczywiście wszystkie pliki zapisujemy podmieniając już istniejące!
Taka konstrukcja działa na każdej warstwie, środkowa część wygląda tak:
Ta metoda dotyczy lewej kolumny (z kategoriami sklepu etc), prawej kolumny oraz kolumny środkowej (z informacjami głównymi sklepu). Jedyna różnica w tym, że kolumna środkowa czerpie pliki źródłowe z katalogu images/contentbox/.
PLIK STYLESHEET.CSS
W wypadku, w którym nie są Ci obce kaskadowe arkusze stylów, możesz sam definiować wysokość i szerokość grafik, które umieszczasz na sklepie poprzez edycję pliku stylesheet.css.
W pliku każda sekcja jest oznaczona widocznym komentarzem, stąd edycja staje się prostsza.
Najważniejsze części skryptu to część z nagłówkiem, stopką, kolumnami bocznymi i kolumną środkową.
Kod opisujący nagłówek rozpoczyna się w linii 21:
/* ------------------------------------------------------------------------------------------------------------------------------------- naglowek */
#header { margin: 0 auto; margin-top: 0px; }
#header a { color: #464646; }
#naglowek { min-width: 1000px; height: 123px; position: relative; margin-top: -15px; background: transparent !important; }
.tloPodLogo { position: absolute; left: -250px; top: 0; width: 900px; height: 134px;
ackground: url('images/header/tlo-pod-logo.png') left bottom no-repeat transparent; }
#logo { display: inline-block; position: absolute; left: 0; top: 0; }
#logo a img { }
Oznaczone są wysokości, które można zmienić bez większych późniejszych problemów.
Kod opisujący stopkę rozpoczyna się od linii 313:
/* ------------------------------------------------------------------------------------------------------------------------------------- stopka */
#footer { margin: 0 auto;
/* background: url('images/footer/footer_bg.png') repeat top; */
background: linear-gradient(to bottom, #EEEEEE 85%, #AFAFAF 100%) repeat scroll 0% 0% transparent;
background-color: rgb(100,100,100); text-align:center; padding-bottom:10px; box-shadow:0px -11px 24px 0px rgba(170,170,170, 0.3); position: relative; min-height: 250px; }
#stopka { min-height: 150px; margin-top: 0px; text-align: center; }
#stopka a{color:#212121; }
#linki { margin-right: 0px; padding: 10px; padding-top: 30px; text-align: left; font-size: 12px; list-style: none; display: inline-block; }
#linki td { vertical-align: top; }
#linki .kolumna {
display: inline-block;
vertical-align: top;
min-width: 210px;
border-left: 1px solid #212121;
padding: 5px;
margin: 0 5px 5px 0;
}
Natomiast kod opisujący kolumny boczne można odnaleźć w linii 121:
/* infobox */
.infoBox { padding: 0px 0px 0 0; }
.infobox a {color:#eee;}
.infoBoxText { padding-top: 0px; font-family: Arial; font-size:12px;color:#eee; }
.infoBoxContents { table-layout: fixed; overflow: hidden; }
.infoBoxHeading { padding: 15px 0; border-bottom: none; color: #464646; font-size:17px; font-weight: bold; background: #bbb; text-align: center; }
.infoBoxHeading a { padding: 0; color: #464646; font-size:17px; font-weight:bold; }
.infoBoxHeading_left { width: 0px; height: 30px; }
.infoBoxHeading_right { width: 0px; height: 30px; }
.infoBoxHeading_right_link { width: 35px; height: 30px;}
.infoBoxContents { background: url('images/infobox/ibox5.png'); }
.infoBoxContents_left { width: 0px; }
.infoBoxContents_right { width: 0px; }
.infoBoxFooter { border-bottom:none; background: white; }
.infoBoxFooter_left { width: 0px; height: 10px; }
.infoBoxFooter_right { width: 0px; height: 10px; }
INSTALACJA SZABLONU
Aby zainstalować Twój szablon na sklep, należy skopiować folder nowy do folderu public_html - > templates -> szablony , oraz przejść do instalacji nowego szablonu spod panelu administracyjnego.
Zobacz także opis zakładek z okna Wygląd
- Wybór szablonu,
- Logo,
- Nagłówek,
- Edytor stylu,
- CSS,
- Grafika,
- Układ strony - moduły,
- Pobierz nowe szablony,
- Edycja szablonów przez FTP (Dla zaawansowanych),
Zobacz również
