Nowa skórka w/g http://www.alphastudio.pl/preview/131 dla quick.Cms v4.0.
Krok 1) Po pobraniu i rozpakowaniu pliku zip kopiujemy pliki graficzne z folderu images do folderu templates/default/img w Quick.Cms. Zmieniamy nazwę plików header.jpg i menu.jpg na header_bg.jpg i menu2_bg.jpg. Z bottom.jpg możemy zrezygnować. Zbędne są także "oryginalne": menu2_bg.png, menu3_bg.png, menu4_bg.png, menu2_bg_hover.png, items_shade.png, shade.png, menu3_items_bg.png, dot.png. W np. Gimpie edytujemy:circle.png oraz menu3_arrow.png zmieniając ich kolor na #FF6600.
Krok 2) W pliku templates/default/container.tpl zmiany w div head2:
<div id="head2"><!-- banner, logo and slogan starts here --> <div class="container"> <div id="logo"><!-- logo and slogan --> <div id="title"><h1><a href="$config[index]" tabindex="1">Quick.Cms</a></h1></div> <div id="slogan"><h2>$config[slogan]</h2></div> </div> </div> </div>
oraz w bloku FOOT:
<div id="foot"><!-- footer starts here --> <div class="container"> <div id="copy">$config[foot_info]</div><!-- copyrights here --> <!-- LICENSE REQUIREMENTS - DONT DELETE/HIDE LINK "CMS by Quick.Cms" TO www.OpenSolution.org and link "Designed by Alpha Studio" to www.alphastudio.pl --> <div class="foot" id="powered"> Designed by <a href="http://www.alphastudio.pl/">Alpha Studio</a> | <!-- dont delete or hide this line please --><a href="http://opensolution.org/">$sLangFooter</a> | <!-- dont delete or hide this line please -->Adapted by <a href="http://www.freetemplatescms.com/">freetemplatescms.com</a> </div> </div> </div> Na zachowanie w skrypcie info o mojej stronce nie nalegam, ale było by miło.
Krok 3) Pora na style. Zmieniamy kolorystykę i niektóre wymiary. Największa zmiana w menu drugim. Przycisk menu2 składa się z dwóch obrazków i tła. Bez <span> się nie obędzie. W lewym gifie mamy kolor pierwszoplanowy na przezroczystym tle w prawym na czarnym tle (dla dropDownMenu po obu stronach czarno, ale o tym nie teraz). to jest minus tej skórki bo przy jasnym bannerze wygląda kiepsko i trzeba dokonywać przeróbek ( nie są takie trudne). W stylach do wydruku też trzeba coś dodać.
/* Quick.Cms default stylesheet */ /* GLOBAL STYLES */
/* IMAGES STYLES */ .imagesList{list-style:none;} .imagesList li{margin:0 0 15px 0;background:inherit;color:#5d6771;text-align:center;} .imagesList li div{text-align:center;} .subpagesList li img, .imagesList li img{padding:1px;border:2px solid #fea500;} .subpagesList li img:hover, .imagesList li img:hover{border-color:#ff6600;}
#imagesList1{float:left;margin:9px 20px 0 0;} #imagesList2{clear:right;float:right;margin:8px 0 0 15px;}
/* FILES LIST STYLES */ #filesList{width:100%;float:left;margin:15px 0 5px;list-style:none;vertical-align:middle;border-left:2px solid #fea500;} #filesList li{width:100%;float:left;clear:left;margin:5px 0 5px 10px;padding-left:10px;} #filesList li a{background:inherit;} #filesList li a:hover{background:inherit;} #filesList img{margin:0 8px 0 0;vertical-align:middle;} #filesList em{padding-left:2px;background:inherit;color:#5d6771;background:inherit;}
/* SUB PAGES LIST STYLES */ .subpagesList{float:left;width:100%;margin:7px 0;list-style:none;} .subpagesList li{clear:left;float:left;width:96%;margin:10px 0;padding:13px 2%;} * html .subpagesList li{width:100%;} .subpagesList li .photo{float:left;margin:0 18px 5px 0;} .subpagesList li h2{padding-bottom:10px;font:Georgia, Times, serif;} .subpagesList li h2, .subpagesList li h2 a{color:#ff6600;font-size:1.25em;font-weight:normal;background:none;font:Georgia, Times, serif;} .subpagesList li h2 a:hover{color:#ff6600;background:none;} .subpagesList li div.description{font-weight:normal;font-size:1em;line-height:1.4em;} .subpagesList li ul, .subpagesList li ol{float:left;width:100%;margin:5px 0 0 30px;padding:0;} .subpagesList li li{padding:0;border-left:0;background:none;} .subpagesList li ul{list-style:disc;} .subpagesList li ol{list-style:decimal;}
Krok 5) Plik templates/default/mobile.css nie jest doskonały. W demo to widać: http://opensolution.org/Quick.Cms/demo/mobile.php?pl_litora-torquent,3. Przy innym bannerze może być już całkiem nieczytelnie. Wszystkie background wybieliłem. Plus inne konieczne zmiany.
/* Quick.Cms mobile default stylesheet */ body,h1,h2,h3,h4,h5,h6,p,form,fieldset,img,ul{margin:0;padding:0;border:0;} body,table{background-color:#fff;color:#000;font-size:0.688em;font-family:Verdana,Arial;} table{font-size:1em;}
.subpagesList{float:left;width:100%;margin:5px 0;list-style:none;} .subpagesList li{clear:left;float:left;width:100%;margin:2px 0;padding:3px 0;background:#f9f9f9;} .subpagesList li .photo{float:left;margin:0 5px 2px 0;} .subpagesList li h2{font-size:1.091em;font-weight:bold;} .subpagesList li .description{font-size:1em;font-weight:normal;} .subpagesList li h6{font-size:0.909em;font-weight:normal;}
#foot{clear:both;}
/* PLUGINS */
Proszę zapoznać się z licencją alphastudio.pl
Efekt pracy, bez dodatków, można zobaczyć tutaj: http://freetemplatescms.com/synthetic/ . Myślę nad jeszcze jedną wersją tej skórki, bez konieczności dopasowywania gifów po zmianie bannera. Trochę to potrwa bo zaczynam pracę nad nową, trudniejszą skórką a czasu brakuje. Na co dzień zajmuję się czymś całkiem innym i tylko w wolnych chwilach siadam przy komputerze.
fajny 1. pobierz sobie jakas skorke i przeczytaj instrukcje instalacji i zrob podobna 2. zamiast zmuszac do zmian w plikach css po prostu zrob katalog nowy i wrzuc do niego plik style.css oraz container.tpl z blokiem, ktory tylko zmieniasz.
Jak przeczytasz sobie dzialanie instrukcji instalacji skorek to zobaczysz jak to dziala. Uzytkownik nie bedzie musial pozniej wykonywac tych modyfikacji, ktore podales a wystarczy, ze wgra katalog i wybierze w administracji skorke.
Latwiejsza dla uzytkownika instalacja to gwarancja wiekszej ilosci wdrozen skorki co jest Ci pewnie na reke bo masz tego reklame :)