Skin Synthetic dla v4.0

stacjonarny

2012-03-26 00:57

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">
<div class="container">
<div id="logo">
<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">
<div class="container">
<div id="copy">$config[foot_info]</div>

<div class="foot" id="powered">
Designed by <a href="http://www.alphastudio.pl/">Alpha Studio</a> | <a href="http://opensolution.org/">$sLangFooter</a> | 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 */

body,h1,h2,h3,h4,h5,h6,p,form,fieldset,img,ul{margin:0;padding:0;border:0;}
body,table{color:#444444;font-size:0.75em;font-family:Verdana, Arial, sans-serif;}

body{padding:0;background:#000 url('img/bg.gif') repeat-x;text-align:center;}

.input, select, textarea{padding:2px;border-width:1px;border-style:solid;font-size:1em;border-color:#fea500 #ff6600 #ff6600 #fea500;font-family:Verdana}
.submit{padding:5px 14px;border-width:1px;border-style:solid;border-color:#ffc000 #fa4010 #fa4010 #ffc000;background:#ff6600;color:#fff;font-weight:bold;font-size:1em;font-family:Verdana}
.submit:hover{background:#8abe27;cursor:pointer;}
* html .submit{padding:3px 1px !important;}
* html .input{height:28px;}
.form{background:#f3f3f3;border:1px solid #c8cccf;}
.form label{font-size:1em;color:#fa4010;font-weight:bold;}
.hide{display:none;}

a{background-color:inherit;color:#ff6600;text-decoration:none;}
a:hover{background-color:inherit;color:#fea500;text-decoration:underline;}
a:focus { outline:none;}
.clear{clear:both;height:0px;font-size:0px;line-height:0px;}
.skiplink{position:absolute;top:-500px;left:0px;overflow:hidden;}
.left{text-align:left;}
.center{text-align:center;}
.right{text-align:right;}

#container{position:relative;width:100%;margin:0 auto;padding:0;}
#header{background:#000000;}
#body, #foot{float:left;width:100%;margin:0 auto;padding:0;}
#head1, #head3, #head2{width:960px;margin:0 auto;text-align:left;}
#body .container, #foot .container{width:960px;margin:0 auto;text-align:left;}

/* HEADER WITH TOP MENU ABOVE LOGO */
#head1 .container{float:left;width:100%;height:30px;background:#000000}

/* MENU TOP 1 */
#menu1 ul{float:right;margin:8px 3px 0 0;list-style:none;}
#menu1 li{float:left;padding:0 5px 0 15px;}
#menu1 li a{float:left;padding-left:10px;font-size:1.083em;text-decoration:none;color:#778f99;background:url('img/dot.png') no-repeat 0 7px;}
#menu1 li a:hover, #menu1 .selected{text-decoration:underline;}

/* LOGO, HEADER BACKGROUND AND SLOGAN */
#head2{clear:both;background:#fea500;}
#head2 .container{height:123px;background:#fea500 url('img/header_bg.jpg') no-repeat left bottom;}
#logo{float:left;padding:15px 20px 10px 20px;}
#logo #title{float:left;}
#logo #title a, #title h1{color: #fea500;font: normal 48px Georgia, Times, serif;}
#logo #slogan{float:left;clear:left;padding:0 0 0 14px;background:inherit;color:#cccccc;font: 24px Georgia, Times, serif;}
#title a, #title a:hover{text-decoration: none;color: #fea500;}
#slogan h2{color:#cccccc;font: 24px Georgia, Times, serif;}
/* HEADER WITH TOP MENU BELOW LOGO */
#head3{background:#fea500}
#head3 .container{background:#fea500 url('img/menu2_bg.jpg') no-repeat;overflow:hidden;height:47px;}

/* MENU TOP 2 */
#menu2 {
float: right;
height: 47px;
}
#menu2 ul li {
display: block;
float: left;
margin-right: 6px;
font-size: .92em;
line-height: 44px;
text-transform: uppercase;
}
#menu2 ul li a {
display: block;
float: left;
height: 44px;
padding: 0 8px 0 0;
color: #ffffff;
background: url('img/menu.gif') no-repeat right;
}
#menu2 ul li a span{
display: block;
float: left;
height: 44px;
padding: 0 25px 0 33px;
cursor: pointer;
background: url('img/menu2.gif') no-repeat left;
}
#menu2 .selected, #menu2 ul li a:hover {
height: 47px;
background: url('img/menuover.gif') no-repeat right;
color: #322100;
}
#menu2 .selected span, #menu2 ul li a:hover span {
height: 47px;
background: url('img/menuover2.gif') no-repeat left;
color: #322100;
}

/* BODY STYLES - LEFT AND RIGHT COLUMN */
#body{clear:both;margin:0;background:#ffffff;}
#body .container{background:#ffffff;overflow:hidden;}

/* LEFT COLUMN STYLES */
#column{float:left;width:270px;padding:10px 0;}
#column .type{margin-top:25px;padding:7px 0 7px 10px;color:#ff6600;font-size:1.75em;letter-spacing:1px;border:0;}
#menu3, #menu4{padding:0 20px 10px;}

/* LEFT MENU */
#menu3 ul, #menu4 ul{padding:15px 0;list-style:none;background:#ffffff /;border-bottom:2px solid #ff6600;}
#menu4 ul{border-bottom:2px solid #ff6600;}
#menu3 li, #menu4 li{padding:4px 0 4px 15px;background:url('img/menu3_arrow.png') no-repeat 13px 12px;}
#menu3 a, #menu4 a{display:block;width:87%;padding:2px 2% 4px 7%;color:#fea500;font-size:1.083em;background:none;text-decoration:none;}
#menu3 a:hover, #menu4 a:hover, #menu3 .sub1 a:hover, #menu4 .sub1 a:hover{color:#fea500;background:none;text-decoration:underline;}
#menu3 .selected, #menu4 .selected{color:#ff6600;background:none;text-decoration:underline;}

#menu3 .sub1, #menu4 .sub1{margin:0;padding:0;border:0;background:none;}
#menu3 .sub1 li, #menu4 .sub1 li{padding:2px 0 2px 24px;background:url('img/circle.png') no-repeat 11px 10px;}
#menu3 .sub1 a, #menu4 .sub1 a{display:block;width:100%;padding:2px 0;}

/* RIGHT COLUMN STYLES */
#content{float:left;width:690px;padding:20px 0 5px;text-align:center;}
* html #content{width:660px;}
* html #page{width:100%;}
#page{position:relative;width:94%;margin:0 auto;text-align:left;}

/* PAGE TITLE */
#page h1{margin:18px 0 10px;padding-left:10px;background:inherit;color:#ff6600;font-size:2.417em;font-weight:normal;background:inherit;}

/* NAVIGATION PATH - TREE */
#page h4{position:absolute;top:-25px;padding:2px 0;color:#ff6600;background:inherit;font-size:1em;}
#page h4 a{background-color:inherit;color:#FF6600;text-decoration:none;font-weight:normal;}
#page h4 a:hover{text-decoration:underline;}
*:first-child+html #page h4{top:-5px;} /* IE 7 hack */
* html #page h4{top:-5px;} /* IE 6 hack */

/* PAGE CONTENT */
#page div.content{padding-top:5px;font-size:1.083em;line-height:1.5em;}
#page div.content ul, .subpagesList li ol{margin:0 0 0 30px;padding:0;}
#page div.content li{margin:8px 0;padding:0;border-left:0;}

#page .tS{float:right;margin:17px 0 3px;}
#page .tS div{display:inline;}
#page .tS a{margin:0 4px;text-decoration:none;background:inherit;color:#fea500;font-weight:bold;font-family:Arial;}
#page .tS a:hover{color:#ff6600;background:inherit;}
#page .tS0{font-size:0.917em;}
#page .tS1{font-size:1.083em;}
#page .tS2{font-size:1.333em;}

.pages{padding:8px 0;text-align:right;font-size:1.083em;}
.pages ul, .pages li{display:inline;}
.pages li{padding:0 2px;}
.pages a, .pages strong{padding:0 1px;font-size:1.083em;}

/* 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;}

/* OPTIONS LINK */
#options{clear:both;float:right;width:100%;margin:10px 10px;background:inherit;color:#7f7f66;font-size:1em;text-align:right;}
#options a{padding:0 10px 0;color:#FF6600;background:inherit;}
#options a:hover{color:#fea500;background:inherit;}
#options .back, #options .print{float:right;}
#options .print a{border-left:2px solid #ff6600;}

.message{padding:50px 0;text-align:center;}
.message h3{background:inherit;color:#cc0000;font-weight:normal;font-size:2.4em;}

/* FOOTER - SITE AND SCRIPT COPYRIGHTS STYLES */
#foot{clear:both;height:100px;background:#fff;color:#fea500;font-size:.85em;text-transform: uppercase;border-top: 4px solid #fea500;}
#foot .container{width:960px;margin:0 auto;padding:22px 0;overflow:hidden;}
#foot a{background:inherit;color:#fea500;text-decoration:none}
#foot a:hover{color:#fea500;background:inherit;text-decoration:underline;}

#copy{float:left;padding:0 25px;}
.foot{float:right;padding:0 25px;}

@media print{
/* PRINT STYLES */
body{margin:1cm 0;background:#ffffff;color:#000000;}
#container{width:16cm;height:auto;background:#ffffff;}
#head2 .container, #head2{height:auto;}
#logo{padding:0 0 0.2cm;}
#logo #title{padding:0;}
#logo #title a span, #logo #title a, #logo #slogan, #logo #title a strong, #logo #title a span{color:#000000;background:inherit;}
#title h1{color: #000000;}
#slogan h2{color: #000000;}
#foot{border-top:solid #000000;}
.subpagesList li img, .imagesList li img, .subpagesList li img:hover, .imagesList li img:hover{border:1px solid #444444;}
#header .container, #body .container, #foot .container, #content{background:#fff;float:none;width:16cm;padding:0;margin:0;}
#column, #head1, #head3, #back, #page .tS{display:none;}
a, #head2, #logo h2, #page h1, #foot, .subpagesList li, #page h3, #filesList em, .imagesList li, .form label, table, .message h3{background:inherit;color:#000000 !important;}
.submit{border-color:#808;background:#d4d0c8;color:#000000;}
}

/* PLUGINS */

Krok 4) Konieczna zmiana w pliku templates/default/menus.tpl.

w tej linii:

<a href="$aData[sLinkName]" class="selected">$aData[sName]</a>

dodajemy span:

<a href="$aData[sLinkName]" class="selected"><span>$aData[sName]</span></a>

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;}

.input, select, textarea{padding:1px;font:normal 1em Arial, sans-serif;}
.submit{padding:1px 3px;font:normal 1em Arial, sans-serif;}
.hide{display:none;}

#menu1, #menu2{margin:2px 0;padding:2px;background:#fff;}
#menu2{background:#fff;}
#menu1 li, #menu2 li{display:inline;margin:0;padding:3px;}
#menu1 li a{color:blue;}

#logo #title a, #logo #title h1{font-weight:bold;font-size:1.133em;background:#fff;}
#slogan h2{font-size:1.083em;}
#column .type{font-weight:bold;}
#menu3{margin-bottom:3px;border-top:1px solid #f3f2f1;border-bottom:1px solid #f3f2f1;}
#menu3 ul{margin-left:7px;list-style:none;}

#page .tS a{padding:0 1px;font-weight:bold;text-decoration:none;}
#page .tS div{display:inline;}
#page .tS0{font-size:0.917em;}
#page .tS1{font-size:1.083em;}
#page .tS2{font-size:1.333em;}

#page h1{padding:3px 0;font-weight:bold;font-size:1.333em;}

#page div.content ul, .subpagesList li ol{margin:0 0 0 20px;}

.pages{padding:3px 0;}
.pages ul, .pages li{display:inline;}
.pages li{padding:0 2px;}

.imagesList{margin:4px 0;padding:0 3px 3px;list-style:none;background:#f8f8f7;border-top:1px solid #e6e3e3;border-bottom:1px solid #e6e3e3;}
.imagesList li img{margin:5px 0 0;}

#imagesList1{float:left;margin:5px 5px 0 0;}
#imagesList2{clear:right;float:right;margin:5px 0 0 5px;}

#filesList{margin:5px 0 5px 10px;list-style:none;}
#filesList li{margin:0 0 5px;}
#filesList img{margin:0 3px 0 0;vertical-align:middle;}

.subpagesList{margin:4px 0;list-style:none;}
.subpagesList li{margin:2px 0;}
.subpagesList li h2{font-weight:bold;font-size:1.182em}

#options{clear:both;margin:5px 0;}
#options a{padding:0 5px 0 0;}
#options .back{display:inline;}
#options .print{display:none;}

.message h3{padding:20px 0 10px;color:red;font-size:1.182em;font-weight:bold;}

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

» Quick.Cms v4.x

freetemplatescms.com

treewood (OpenSolution)

2012-03-26 10:55

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 :)

Skin Synthetic dla v4.0

stacjonarny

» Quick.Cms v4.x

freetemplatescms.com

treewood (OpenSolution)

Ponad 32 tys. wdrożeń Quick.Cart i Quick.Cms. Zobacz najciekawsze...