W celu zastosowania własnego wyglądu należy wykonać czynności poniżej:

1. Należy utworzyć nowy folder na swoim twardym dysku o nazwie np. "nowy":

2. 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":

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

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

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

6. Ż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.