Szukaj w:
.

 Zobacz Temat

Strona Główna Forum | eXtreme-fusion 5.0 | Poradniki
1 2 »
#127810 18.02.2013 17:22:31 - [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1846
Post napisano: 18.02.2013 17:22:31
Skórka jest to szablon strony. Pliki wyglądu popularnie nazywane są również themem.

Skórki znajdują się w katalogu \themes\. Każdy taki szablon posiada osobny katalog, który jest jej nazwą. W poniższym poradniku przedstawie jak stworzyć własną skórkę do eXtreme-Fusion 5.

Na początku jednak zacznijmy od struktury wewnętrznej plików i katalogów:

mojaSkorka/templates/ <- pliki odpowiedzialne za część graficzną skórki
- mojaSkorka/templates/ajax/ <- pliki wyglądu skryptów (opcjonalne)
- mojaSkorka/templates/images/ <- grafika skórki
- - jquery/ <- grafika do elementów jQuery (opcjonalne)
- mojaSkorka/templates/javascripts/ <- skrypty jQuery skórki
- mojaSkorka/templates/pages/ <- wygląd HTML poszczególnych podstron (opcjonalnie)
- - javascripts/
- - stylesheet/
- mojaSkorka/templates/pre/ <- zawiera pliki ogólnego skryptu stony jeśli chcemy dodać nowe skrypty tylko dla danej skórki
- mojaSkorka/templates/stylesheet/ <- zawiera style kaskadowe skórki
- - jquery/ <- style kaskadowe dla skryptów jquery (opcjonalne)
- - main.css <- pliki ogólne eXtreme-Fusion CMS
- - styles.css <- pliki wyglądu skórki
- middle_panel.tpl <- wygląd środkowego panelu
- page.tpl <- wygląd strony
- side_panel.tpl <- wygląd panelu bocznego
view.php <- cały kod PHP skórki


Skoro struktura została już przedstawiona, czas przejść do kodowania.

CZĘŚĆ I: plik mojaSkorka/view.php

Na początku wypadałoby umieścić nagłówek, licencje i pozostałe standardowe komentarze do pliku ;)
<?php
/***********************************************************
| eXtreme-Fusion 5.0
| Content Management System
| Theme: MojaSkorka  
|
| Copyright (c) 2013 Andrzejster (eXtreme-Fusion Crew)     
| http://extreme-fusion.org/          
|
| This program is released as free software under the
| Affero GPL license. You can redistribute it and/or
| modify it under the terms of this license which you
| can read by viewing the included agpl.txt or online
| at www.gnu.org/licenses/agpl.html. Removal of this
| copyright header is strictly prohibited without
| written permission from the original author(s).
|    
***********************************************************/


Struktura thema różni się bardzo mocno od poprzedniej wersji systemu. Przede wszystkim nie są to powrzucane byle jak funkcje, a porządnie zbudowana klasa, które praktycznie nie trzeba edytować.

Zacznijmy od otwarcia klasy:
class Theme extends Themes implements Theme_Intf
{


Pierwszą funkcją będzie funckja page z informacjami o wyświetlaniu logo, menu górnego, paneli lewych i prawych oraz stopki. Jej wygląd definiuje się w pliku mojaSkork/templates/page.tpl

Opis funkcji:
/**
* Funkcja odpowiedzialana za sposób prezentowania twojej strony.
* To tutaj określasz jak są ustawione kolumny z panelami bocznymi:
* czy po lewej i prawej stronie, czy obie kolumny po tej samej.
*
* W tym miejscu załączane jest również menu poziome,
* nagłówek strony oraz stopka.
*
* Poszczególne elementy szablonu mogą być wyłączone z poziomu modułu, dzięki parametrom.
* Z tego powodu zalecamy korzystać z warunków if ($parametr).
*
* THEME/templates/page.tpl
*/


public function page($logo = TRUE, $menu = TRUE, $left = TRUE, $right = TRUE, $footer = TRUE)
{


I kolejne parametry.

Przekazanie loga do szablonu:
if ($logo) $this->assign('logo', trim($this->showBanners()));


Przekazanie menu poziomego do szablonu:
if ($menu) $this->assign('menu', $this->showSubLinks('', 'menu'));


Czas na przekazanie kolumn paneli bocznych do szablonu, lewe, prawe:
if ($left) $this->assign('LEFT', LEFT);

if ($right) $this->assign('RIGHT', RIGHT);


Oraz kolumna środkowa (panele górne, treści podstron, panele dolne):
$this->assign('CONTENT', TOP_CENTER.CONTENT.BOTTOM_CENTER);


Stopka - pobierana z panelu admina:
if ($footer) $this->assign('footer', $this->obj('sett')->get('footer'));


Wymagane informacje o autorach systemu i licencji:
$this->assign('copyright', $this->showCopyright(TRUE));


Link do panelu admina widoczny tylko dla uprawnionych osób:
$this->assign('admin_panel_link', $this->showAdminPanelLink());


Sprawdzenie czy licznik wizyt jest włączony i wyświetlenie go:
if ($this->obj('sett')->get('visits_counter_enabled'))
   {
     // Przekazywanie ilości unikalnych wizyt do szablonu
     $this->assign('visits_count', $this->getVisitsCount());
   }


Najważniejsza rzecz - wywołanie pliku z szablonem strony:
$this->render('page');


i zamknięcie funkcji:

}


Czas na funkcje wywołującą pojedyńczy panel boczny:
public function sidePanel($title = NULL)
  {
   // Przekazywanie nazwy panelu do szablonu
   $this->assignGroup(array(
     'title' => $title,
     'open' => (bool) $title
   ));

   // Wyświetlanie szablonu: THEME/templates/side_panel.tpl
   $this->render('side_panel');
  }


Wszystko jest opisane w komentarzach ;)

Oraz funkcja z pojedyńczym panelem środkowym:
public function middlePanel($title = NULL)
  {
   // Przekazywanie nazwy panelu do szablonu
   $this->assignGroup(array(
     'title' => $title,
     'open' => (bool) $title
   ));

   // Wyświetlanie szablonu: THEME/templates/middle_panel.tpl
   $this->render('middle_panel');
  }


Jest jeszcze jedna opcjonalna funkcja news(), która odpowiada za dodatkowowe moduły do newsów, ale jest ona jak już wspomniałem opcjonalna, dlatego nie będę się na niej skupiał i przedstawie tylko pustą strukturę.

/**
  * Dodatki do newsów.
  *
  * BASE/templates/news.tpl
  * THEME/templates/news.tpl
  */
  public function news()
  {
   // Assign addons for news (optional).
  }


I zamknięcie klasy:
}


To by było na tyle jeśli chodzi o plik view.php

CZĘŚC II: pliki mojaSkorka/templates/

Najpierw zacznijmy od umieszczenia domyślnych plików stylów eXtreme-Fusion 5 CMS, plik mojaSkorka/templates/stylesheer/main.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font: inherit;
  border: 0;
  outline: none;
}

body {
  margin: 0 auto;
  font: 12px 'Tahoma', Geneva, 'Kalimati', sans-serif;
  line-height: 120%;
  resize-x: none;
}

ol, ul {list-style: none;}
hr {margin: 10px 0; height: 1px; background: #feffff;}
sup {font-size: 12px; font-weight: bold; color: #ff0000;}

h4 {
  margin: 12px 0 4px 0;
  padding: 9px 12px 2px 12px;
  font-size: 14px;
  font-weight: bold;
  color: #999;
  border-bottom: 1px solid #eee;
}
/* tuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu */

.tbl {overflow: hidden; padding: 5px 0}
.tbl1 {background: #2e2e2e; padding: 4px; overflow: hidden; vertical-align: middle}
.tbl2 {background: #3a3a3a; padding: 4px; overflow: hidden}
.tbl2 img, .tbl2 img {vertical-align: middle}

.margin-vertical-10{margin:10px 0 !important}
.margin-top-10{margin-top:10px !important}

/****** Statusy (Messages) ******/
.status, .info, .error, .valid {
  margin: 10px 0;
  padding: 9px 15px;
  font-size: 12px;
  text-align: center;
  background: #feffff;
  border-radius: 5px;
}

.status a, .info a, .error a, .valid a {
  font-weight: bold;
  text-decoration: underline;
}

.status-right, .info-right, .error-right, .valid-right {
  position: absolute;
  top: 0;
  right: -6px;
  width: 55px;
}

.status-right a, .info-right a, .error-right a, .valid-right a {
  cursor: pointer;
}

.status, .status a {color: #e79300;}
.info, .info a {color: #2e74b2;}
.error, .error a {color: #ce2700;}
.valid, .valid a {color: #97be7a;}


.center {text-align:center}

.form_label {
  width: 170px;
  margin: 3px 10px;
  float: left;
  }
  
.form_input {
  float: left;
}


/* Rejestracja (Register)*/

.rules {
  padding:8px 5px;
  max-height:250px;
  overflow:auto;
  width:90%;
  margin:auto;
  border-radius:8px;
  background-color: #222;
}

input[type=submit],
.button {
  min-height: 28px;
  line-height: 28px !important;
  color: #272727;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  border: 0;
  background: url(../images/button_bg.png) repeat-x;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

input[type=submit]:hover,
.button:hover {
  color: #272727;
}

input[type=submit]:active,
.button:active {
  text-shadow: 0 -1px 0 rgba(255,255,255,.2);
  background-position: 0 -40px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}

  
/* Tekst sformatowany ------------------------------------------------------------------------- */
.formated_text hr,
.formated_text p,
.formated_text pre,
.formated_text div,
.formated_text table,
.formated_text ul,
.formated_text ol,
.formated_text blockquote,
.formated_text form,
.formated_text section,
.formated_text aside,
.formated_text video,
.formated_text audio,
.formated_text embed,
.formated_text object,
.formated_text iframe,
.formated_text address,
.formated_text h1,
.formated_text h2,
.formated_text h3,
.formated_text h4,
.formated_text h5,
.formated_text h6 {
  margin:10px 0;
}

.formated_text img,
.formated_text canvas {
  margin: 10px;
}

.formated_text sub,
.formated_text sup,
.formated_text small {
  font-size: 10px;
  font-weight: normal;
  color: inherit;
}

.formated_text sub {
  vertical-align: sub;
}

.formated_text sup {
  vertical-align: super;
}

.formated_text strong,
.formated_text b {
  font-weight: bold;
}

.formated_text em,
.formated_text i,
.formated_text q {
  font-style: italic;
}

.formated_text u {
  text-decoration: underline;
}

.formated_text strike,
.formated_text s {
  text-decoration: line-through;
}

.formated_text h1,
.formated_text h2,
.formated_text h3,
.formated_text h4,
.formated_text h5,
.formated_text h6 {
  padding: 0;
  font-size: 16px;
  font-weight: bold;
}

.formated_text ul li,
.formated_text ol li {
  margin-left: 30px;
}

.formated_text ul li {list-style:disc outside none;}
.formated_text ol li {list-style:decimal outside none;}

.formated_text table td,
.formated_text table th {
  padding:5px;
}

.formated_text table th {
  text-align: center;
  font-weight: bold;
}

.formated_text blockquote {
  font-family: inherit;
  font-size: inherit;
  font-style: italic;
  font-weight: normal;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}

/* Menu zakładek ----------------------------------------------------------------------------------------------- */
.tab_menu ul {
  float: left;
  padding: 0;
}

.tab_menu ul li {
  display: inline;
}

.tab_menu ul li a {
  font-size: 12px;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  padding: 4px 15px;
  text-decoration: none;
}

/* Zawartość zakładek --------------------------------------------------------------------------------------- */
.tab_cont {
  position: relative;
  float: left;
  padding: 7px 0;
  width: 100%;
}

/* Short posts -------------------------------------------------------------------------------- */
.short_post {
  margin: 10px 20px;
  position: relative;
}

.short_post .arrow {
  display: block;
  position: absolute;
  z-index:99;
  width: 20px;
  height: 20px;
  top: 5px;
  left: 65px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.short_post .avatar {
  display: block;
  float: left;
  width: 40px;
  border-width: 5px;
  border-style: solid;
  border-radius: 5px;
}

.short_post .pw_cont {
  position: relative;
  font-size: 11px;
  margin-left: 75px;
  padding: 7px 20px;
  border-radius: 0 5px 5px 5px;
}

.short_post .pw_cont header {
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.short_post .pw_cont header {border-bottom-width: 1px; border-bottom-style: dashed;}
.short_post .pw_cont header strong {font-size: 12px;}

.short_post .pw_cont header time {
  width: auto;
  float: right;
  font-style: italic;
  line-height: 12px;
}

/* Wybrany element z rozwijanej listy-------------------------------------------------------------------------------------- */
#defender_user {
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
}

#defender_user img {
  width: 7px;
  height: 7px;
  cursor: pointer;
}

/* Rozwijana lista ajaxowa----------------------------------------------------------------------------------------------- */
#defenders ul,
#defenders .defender_error {
  display: block;
  position: absolute;
  width: 200px;
  font-size: 11px;
  margin: 0;
  padding: 2px 10px;
  border: 0;
}

#defenders ul {
  list-style: none;
}

#defenders .defender_error {
  text-align: center;
  padding: 5px 10px;
}

#defenders ul li {
  margin: 0;
  padding: 0;
  cursor: pointer;
  list-style: none;
  line-height: 180%;
}


Możemy w nim zdefiniować nagłównki, w liniach ~43-46 wygląd klas .tbl (odpowiedzialnych za komórki tabel) oraz w liniach ~109-129 wygląd przycisku (buttona).

Ja zmienie sobie kolory klas na:
.tbl1 {background: #720A0A; padding: 4px; overflow: hidden; vertical-align: middle}
.tbl2 {background: #3D1515; padding: 4px; overflow: hidden}


oraz buttona:
input[type=submit], 
.button {
 background: #CC3838;
 border: 1px solid #801C1C;
 color: #fff;
 }
 
input[type=submit]:hover, 
.button:hover {background-position: 0 -40px; color: #fff;}


Teraz zabierzmy się za edycję pozostałych stylów - plik mojaSkorka/templates/stylesheet/styles.css (są to style globalne, stylów poszczególnych podstron należy szukać w /templates/stylesheet/) oraz budowe pliku mojaSkorka/templates/page.tpl.

Główne style, których raczej nie trzeba opisywać.

/****** Główne klasy (Main class) ******/
body {
 background: #3D2323;
 color: #fff;
 min-width: 960px;
 max-width: 1200px;
}


/****** Odnośniki (Links) ******/
a {color: #BE2121; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}
a.white {color: #fff;}
a.white:hover {color: #BE2121;}


Teraz przełączamy się do pliku page.tpl

{if $logo}
<header id="site_top">
  <h1>{$logo}</h1>
</header>
{/if}


Sprawdzenie, czy jest $logo i wyświetlenie go.

Jako, że brak u mnie wielkich zdolności graficznych to posłuże się tym logo:

extreme-fusion.pl/kursef5/theme/logo.png


Plik ten należy zapisać w katalogu mojaSkorka/templates/images/ pod nazwą logo.png.

Wracamy do styli:

/****** Nagłówek (Header) ******/
#site_top {
 margin: 0 0 -8px;
 height: 164px;
 background: url('../images/header.png') right no-repeat;
}
 
#site_top img {
 margin: 45px 0 0 40px;
 height: 69px;
 width: 199px;
}


Plik header.png u mnie wygląda następująco:
extreme-fusion.pl/kursef5/theme/header.png


Skoro header jest gotowy zabierzmy się za menu poziome:
{if $menu}
<nav id="main_nav">
  <ul>
  {section=menu}
   <li{if $menu.selected} class="selected"{/if}>{$menu.sep}<a href="{$menu.link}"{if $menu.target} target="_blank"{/if}>{$menu.name}</a></li>
  {/section}
  </ul>
</nav>
{/if}


Sprawdza czy menu istnieje i je wyświetla.

Objaśnienie:
$menu - tablica przechowująca menu strony
$menu.selected - sprawdza czy link jest aktualnie aktywny (czy znajdujemy się na danej podstronie)
$menu.sep - separator linku
$menu.link - adres linku
$menu.target - ew. otwarcie w nowym oknie
$menu.menu - nazwa pozycji w menu


Style menu:
/****** Główna nawigacja (Main navigation) ******/
#main_nav {
 position: relative;
 padding: 0 6px;
 min-height: 54px;
 background: url('../images/main_nav.png');
 border-radius: 5px;
 overflow: hidden;
}
  
#main_nav ul li {
 float: left;
 margin: 10px 0;
 font-weight: bold;
}
 
#main_nav ul li a {
 display: block;
 margin: 0 6px;
 padding: 9px 15px;
 text-decoration: none;
 color: #41080F;
 border: 1px solid transparent;
}
  
#main_nav ul li a:hover, 
#main_nav ul li.selected a {
 color: #fff;
 border: 1px solid #793939;
 background: #751313;
 box-shadow: inset 0 0 8px #151515;
 border-radius: 5px;
}


Obrazek main_nav.png wygląda następująco:
extreme-fusion.pl/kursef5/theme/main_nav.png


Po skończeniu zabawy z topem strony pora zająć się najważniejszą jej częścią, czyli środkiem.
W pliku page.tpl wygląda to następująco:

<section id="site_mid" >
  {if $LEFT}<aside id="s_left">{$LEFT}</aside>{/if}
  {if $RIGHT}<aside id="s_right">{$RIGHT}</aside>{/if}
  <section id="{if $LEFT && $RIGHT}s_center{/if}{if !$LEFT && !$RIGHT}no_both{/if}{if !$LEFT && $RIGHT}no_left{/if}{if !$RIGHT && $LEFT}no_right{/if}">
   {if $getTryLogin}
     <div class="error bold">
      Logowanie nie powiodło się. Sprawdź poprawność wprowadzanych danych i spróbuje jeszcze raz.
     </div>
   {/if}
   {$CONTENT}
  </section>
</section>


Pierwsza linijka odpowiada za panele po lewej stronie, druga za panele po prawej, kolejne za środek, w tym pliku znajduje sie także komunikat o błędnym logowaniu.

Style przedstawiają się następująco:
/****** Zawartość (Content) ******/
#site_mid {
  margin: -8px 0 20px;
  border: 1px solid #704B4B;
  background: #490C0C;
   box-shadow: inset 0 0 8px #552020;
  border-radius: 5px;
  overflow: hidden;
}

#site_mid .side_body {
  font-size: 11px;
  background: url('../images/side_body_header.png') 0 6px no-repeat;
}

#site_mid .side_body + .side_body {
  margin-top: 10px;
}

#site_mid .side_body header {
  background: -moz-linear-gradient(top, #fff, #e6e6e6);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
  background: -o-linear-gradient(top, #fff, #e6e6e6);
  background: -ms-linear-gradient(top, #fff, #e6e6e6);
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

#site_mid .side_body h3 {
  background: url('../images/side_body_header.png') 0 6px center no-repeat;
  font-weight: bold;
  padding: 10px 12px 10px 30px;
  font-size: 12px;
  color: #C0C0C0;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

#site_mid .side_body .content {
  padding: 10px;
  border: 1px solid #B85D5D;
  border-top: 0;
  box-shadow: inset 0 0 8px #E7E7E7;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}

#site_mid .main_body {margin: 0 0 10px;}
  
#site_mid h2, .exception h3 {
  padding: 12px 5px 14px 10px;
  font-size: 14px;
  font-weight: bold;
  border-left: 1px solid #812727;
   border-right: 1px solid #812727;
  background: url('../images/main_body_header.png') repeat-x;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#site_mid h2 .decoration {
   background: url('../images/decoration_main_body.png') right no-repeat;
   width: 200px;
   height: 35px;
   float: right;
   margin-top: -8px;
}
  
#site_mid .main_body .content {
  padding: 8px;
  font-size: 11px;
  line-height:16px;
  border-left: 1px solid #812727;
   border-right: 1px solid #812727;
  background: #521010;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

#site_mid #s_left {
  float: left;
  padding: 25px 0 20px 12px;
  width: 210px;
}
  
#site_mid #s_right {
  float: right;
  padding: 25px 12px 20px 0;
  width: 210px;
}  

#site_mid #s_center {padding: 25px 234px;}
#site_mid #no_left {padding: 25px 234px 20px 12px;}
#site_mid #no_right {padding: 25px 12px 20px 234px;}
#site_mid #no_both {padding: 25px 12px 20px 12px;}


W powyższym kodzie znajdują się również klasy odpowiedzialne za panele boczne oraz środek. Za panele boczne odpowiadają klasy #site_mod .side_body, natomiast za środek odpowiadają klasy #site_mid .main_body.

Oczywiście dodaje obrazki, które wykorzystałem:

side_body_header.png
extreme-fusion.pl/kursef5/theme/side_body_header.png

main_body_header.png
extreme-fusion.pl/kursef5/theme/main_body_header.png

decoration_main_body.png
extreme-fusion.pl/kursef5/theme/decoration_main_body.png


Na koniec stopka:

{if $footer}
<footer id="site_bot">
  {if $copyright}
   <address>{$copyright}</address>
  {/if}
  <p>{$footer}</p>
  <address>Theme by <a href="http://extreme-fusion.org/" title="eXtreme-Fusion CMS">Andrzejster</a></address>
  {if $admin_panel_link}<p>{$admin_panel_link}</p>{/if}
  {if $visits_count}<p>{i18n('Unique visits:')} {$visits_count}</p>{/if}
</footer>
{/if}


Objaśnienie:
$copyright - wyświetlenie praw autorskich
$footer - wyświetlenie zawartości stopki definiowanej w Panelu Admina
$admin_panel_link - link do panelu admina widoczny dla uprawnionych
$visits_count - licznik unikalnych wizyt


Oczywiście także style:
/****** Stopka (Footer) ******/
#site_bot {
 padding: 10px 0 0;
 height: 80px;
 font-size: 11px;
 line-height: 150%;
 text-align: center;
 color: #9E3030;
}


Na tym kończy się edycja pliku page.tpl.
Przejdźmy od razu do pliku paneli bocznych - side_panel.tpl, którego kod wygląda następująco:
{if $open}
  <section class="side_body">
   <header>
     <h3>{$title}</h3>
   </header>
   <div class="content">
{else}
   </div>
  </section>
{/if}

Objaśnienie:
$open - sprawdza czy jest to początek panelu czy jego koniec
$title - zawiera tytuł danego panelu


Kolejnym plikiem będzie plik odpowiedzialny za panele środkowe - middle_panel.tpl, który wygląda tak:
{if $open}
  <section class="main_body">
   <header>
     <h2><div class="decoration"></div>{$title}</h2>
   </header>
   <div class="content">
{else}
   </div>
  </section>
{/if}

Objaśnienie:
$open - sprawdza czy jest to początek panelu czy jego koniec
$title - zawiera tytuł danego panelu


Zapisujemy i skórka jest praktycznie gotowa.
Dodajmy jeszcze do pliku styles.css kilka linijek by ominąć niespodzianki.

/****** Boczna nawigacja (Side navigation) ******/
#side_nav {
  margin: 0;
  list-style: none;
}

#side_nav li + li {
  margin-top: 1px;
}

#side_nav li a {
  display: block;
  padding: 4px 8px;
}

#side_nav li a:hover {
  background-color: #d0ef00;
  text-decoration: none;
  color: #151515;
  border-radius: 3px;
}

#side_nav li.header {
  margin: 2px 8px 4px;
  font-weight: bold;
  text-transform: uppercase;
  color: #999;
}

#side_nav li.separator {
  display: block;
  margin: 4px 0;
  border-top: 1px solid #404040;
}

/****** Aktualnie online ******/
#users_online {
  font-size: 10px;
}

#users_online dt {
  width: 110px;
  float: left;
  overflow: hidden;
  font-weight: bold;
  line-height: 20px;
  text-align: right;
}

#users_online dd {
  margin-left: 120px;
  line-height: 20px;
}

#users_online + .links {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #404040;
}

.links {
  color: #999;
}

/* Klasy określające kolory -------------------------------------------------------------------------*/
  /* Główne schematy */
  .light {background: #3a3a3a;border-color: #525252;}
   .light_child > * {background: #3a3a3a;border-color: #525252;}
   .light_all_child * {background: #3a3a3a;border-color: #525252;}
  .dark {background: #2e2e2e;border-color: #363636;}
   .dark_child > * {background: #2e2e2e;border-color: #363636;}
   .dark_all_child * {background: #2e2e2e;border-color: #363636;}
  /* Kolory tekstów */
  .text_light {color: #626262;}
   a.text_light:hover {color: #626262;text-decoration:underline;}
   .text_light a {color: #626262;text-decoration:none;}
     .text_light a:hover {color: #626262;text-decoration:underline;}
  .text_dark {color: #525252;}
   a.text_dark:hover {color: #525252;text-decoration:underline;}
   .text_dark a {color: #525252;text-decoration:none;}
     .text_dark a:hover {color: #525252;text-decoration:underline;}
  .text_other {color: #9fd10f;}
   a.text_other:hover {color: #9fd10f;text-decoration:underline;}
   .text_other a {color: #9fd10f;text-decoration:none;}
     .text_other a:hover {color: #9fd10f;text-decoration:underline;}
  /* Obramowania */
   /* Obramowania jasne */
   .border_light {border-color: #3a3a3a;}
     .border_top_light {border-top-color: #3a3a3a;}
     .border_right_light {border-right-color: #3a3a3a;}
     .border_bottom_light {border-bottom-color: #3a3a3a;}
     .border_left_light {border-left-color: #3a3a3a;}
     /* Obramowania jasne dzieci */
     .border_light_child > * {border-color: #3a3a3a;}
      .border_top_light_child > * {border-top-color: #3a3a3a;}
      .border_right_light_child > * {border-right-color: #3a3a3a;}
      .border_bottom_light_child > * {border-bottom-color: #3a3a3a;}
      .border_left_light_child > * {border-left-color: #3a3a3a;}
     /* Obramowania jasne dla wszystkich dzieci */
     .border_light_all_child * {border-color: #3a3a3a;}
      .border_top_light_all_child * {border-top-color: #3a3a3a;}
      .border_right_light_all_child * {border-right-color: #3a3a3a;}
      .border_bottom_light_all_child * {border-bottom-color: #3a3a3a;}
      .border_left_light_all_child * {border-left-color: #3a3a3a;}
   /* Obramowania ciemne */
   .border_dark {border-color: #2e2e2e;}
     .border_top_dark {border-top-color: #2e2e2e;}
     .border_right_dark {border-right-color: #2e2e2e;}
     .border_bottom_dark {border-bottom-color: #2e2e2e;}
     .border_left_dark {border-left-color: #2e2e2e;}
     /* Obramowania ciemne dzieci */
     .border_dark_child > * {border-color: #2e2e2e;}
      .border_top_dark_child > * {border-top-color: #2e2e2e;}
      .border_right_dark_child > * {border-right-color: #2e2e2e;}
      .border_bottom_dark_child > * {border-bottom-color: #2e2e2e;}
      .border_left_dark_child > * {border-left-color: #2e2e2e;}
     /* Obramowania ciemne dla wszystkich dzieci */
     .border_dark_all_child * {border-color: #2e2e2e;}
      .border_top_dark_all_child * {border-top-color: #2e2e2e;}
      .border_right_dark_all_child * {border-right-color: #2e2e2e;}
      .border_bottom_dark_all_child * {border-bottom-color: #2e2e2e;}
      .border_left_dark_all_child * {border-left-color: #2e2e2e;}
   /* Obramowania inne */
   .border_other {border-color: #9fd10f;}
     .border_top_other {border-top-color: #9fd10f;}
     .border_right_other {border-right-color: #9fd10f;}
     .border_bottom_other {border-bottom-color: #9fd10f;}
     .border_left_other {border-left-color: #9fd10f;}
     /* Obramowania inne dzieci */
     .border_other_child > * {border-color: #9fd10f;}
      .border_top_other_child > * {border-top-color: #9fd10f;}
      .border_right_other_child > * {border-right-color: #9fd10f;}
      .border_bottom_other_child > * {border-bottom-color: #9fd10f;}
      .border_left_other_child > * {border-left-color: #9fd10f;}
     /* Obramowania inne dla wszystkich dzieci */
     .border_other_all_child * {border-color: #9fd10f;}
      .border_top_other_all_child * {border-top-color: #9fd10f;}
      .border_right_other_all_child * {border-right-color: #9fd10f;}
      .border_bottom_other_all_child * {border-bottom-color: #9fd10f;}
      .border_left_other_all_child * {border-left-color: #9fd10f;}
  /* Cienie elementów blokowych */
  .box_shadow1 {
   -webkit-box-shadow: 0px 10px 17px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0px 10px 17px rgba(0, 0, 0, 0.15);
   box-shadow: 0px 10px 17px rgba(0, 0, 0, 0.15);
  }
      
/* Tekst sformatowany ----------------------------------------------------------------------------------- */
.formated_text table td,
.formated_text table th {
  border:1px #3a3a3a solid;
}

.formated_text table th {
  background:#3a3a3a;
}

.formated_text blockquote {
  color: #d2d1d1;
  background: #3a3a3a;
}

.dark_child .formated_text blockquote,
.dark_all_child .formated_text blockquote,
.dark .formated_text blockquote,
.formated_text.light blockquote {background: #3a3a3a;}
.light_child .formated_text blockquote,
.light_all_child .formated_text blockquote,
.light .formated_text blockquote,
.formated_text.dark blockquote {background: #2e2e2e;}

/* Menu zakładek ----------------------------------------------------------------------------------------------- */
.tab_menu ul li a {
  background: #3a3a3a;
  border-top: 2px solid #9fd10f;
  color: #fafafa;
  text-shadow: 1px 1px 1px #000;
  border-radius: 5px 5px 0 0;
}

.tab_menu ul li a.selected {
  background-color: #2e2e2e;
  color: #fafafa !important;
}

/* Zawartość zakładek --------------------------------------------------------------------------------------- */
.tab_cont {
  background: #2e2e2e;
  border-radius: 0 5px 5px 5px;
}

/* Wybrany element z rozwijanej listy-------------------------------------------------------------------------------------- */
#defender_user {
  background: #fff;
  color: #333;
  border-radius: 5px;
}

/* Rozwijana lista ajaxowa----------------------------------------------------------------------------------------------- */
#defenders ul,
#defenders .defender_error {
  background: #fff;
  color: #333;
  border-radius: 0 5px 5px 5px;
  -webkit-box-shadow: 0px 3px 21px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 3px 21px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 3px 21px rgba(50, 50, 50, 0.75);
}

#defenders ul li {
  border-bottom: 1px #e5e5e5 dashed;
}

#defenders ul li:last-child {
  border: 0;
}

#defenders ul li:hover {
  color: #000;
  text-decoration: underline;
}

/* KONIEC --------------------------------------------------------------------------------------------- */


No i zapisujemy również ten plik.

Żeby zmienić kolory pól tekstowych i buttonów musimy niestety pogrzebać trochę w systemie i edytować odpowiednie klasy w pliku templates/stylesheet/common/jquery-ui.css w systemie, a nie w skórce.

CZĘŚĆ III: pozostałe uwagi

1) Wstawianie skryptów js
Tutaj trzeba dodać trochę więcej niż sam kod skryptu, ponieważ trzeba jeszcze użyć tzn. literala, który powie systemowi, że to jest kod js, a nie element wyglądu. Przykładowe użycie wygląda następująco:
{literal}
 <script> 
  var addr_images = "{/literal}{$ADDR_IMAGES}{literal}";
  var addr_site = "{/literal}{$ADDR_SITE}{literal}";
 </script>
{/literal}


2) Własny wygląd podstrony
Jeśli nie podoba Ci się wygląd podstrony dajmy na to z profilem, nie musisz już teraz edytować pliku profile.tpl z katalogu templates/pages/. Wystarczy, że skopiujesz go (wraz ze stylami) do odpowiednich katalogów w mojaSkorka/templates/pages

3) Wykorzystanie otwarcia i zamknięcia paneli
Otóż w pliku .tpl danego panelu wystarczy dać taki oto fragment:
{php} $this->sidePanel('Tytul panelu'); {/php}

aby otworzyć panel (w tym przypadku boczny), a taki fragment:
{php} $this->sidePanel(); {/php}


Panel środkowy tworzy się dokładnie w ten sam sposób tylko, że zamiast sidePanel trzeba zastosować []middlePanel[/b].

Jak wygląda gotowa skórka możecie zobaczyć w załączniku.
__________________________________________________________
Copyright 2013 by Andrzejster All rights reserved.


Andrzejster dodał/a następującą grafikę:

Wyślij Prywatną Wiadomość
#127866 25.02.2013 22:52:17 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1435
Post napisano: 25.02.2013 22:52:17
Nie napisałeś, że oprócz news.tpl każdą podstronę można kopiować do szablonu i modyfikować jej wygląd. Jest kilka literówek, ale polecam każdemu poradniksmiley Autor postarał się.

Informacja od moderatora Andrzejster z dnia 26.02.2013 16:38:17:

Poganiałeś mnie lekko więc się nie czepiaj smiley
Wyślij Prywatną Wiadomość
#127867 25.02.2013 23:07:24 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 300
Post napisano: 25.02.2013 23:07:24
A nie lepiej żeby classy uniwersalne pozostawić w main.css a rozmiary i kroje fontów, czy kolory dawać w styles.css ? Bo tak to rozdzielenie tego na 2 pliki traci trochę sens. ;)

P.S. Zamiast tbl1 i tbl2 w tabelach można używać konstrukcji typu:
<div class="formated_text">
<table class="light border_light">
<tr class="dark">...


umożliwia to dowolną konfigurację za pomocą class light coś tam i dark coś tam.
Wyślij Prywatną Wiadomość
#127870 26.02.2013 16:37:37 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1846
Post napisano: 26.02.2013 16:37:37
Lisu - faktycznie, nie pomyślałem o tym, ew. można również przerzucić .tbl do głównych styli, ale to jak komu wygodniej.
Wyślij Prywatną Wiadomość
#127871 01.03.2013 18:19:01 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 20
Post napisano: 01.03.2013 18:19:01
motyw ładny ale czy nie łatwiej by było jak w ef5 był edytor wyglądu?
wtedy nawet mało zaawansowany użytkownik mógłby łatwo zrobic skórke
Wyślij Prywatną Wiadomość
#127872 02.03.2013 14:48:22 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1846
Post napisano: 02.03.2013 14:48:22
Mała aktualizacja pozwalająca dodać licznik Unikalnych wizyt.
Wyślij Prywatną Wiadomość
#127908 09.03.2013 16:53:15 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1435
Post napisano: 09.03.2013 16:53:15
Ze struktury plików proponuje usunąć pliki index.php.

Trochę się ostatnio zmieniło w szablonach.
Przykładowo wyświetlanie logo możliwe z ustawień.
Aktualizacja by się przydała.
Wyślij Prywatną Wiadomość
#127910 10.03.2013 15:30:36 - RE: [Kurs EF5] Tworzenie skórek
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 8
Post napisano: 10.03.2013 15:30:36
Poradnik bardzo dobry, rozjaśnia przede wszystkim całą strukturę i jak to wszystko do kupy poskładać. Gratuluję stworzenia i wymyślenia fajnego systemu themów, który jest może trochę mniej przejrzysty i bardziej skomplikowany niż w czwórce, ale zdecydowanie bardziej elastyczny i przystosowany do nowoczesności smiley.
Wyślij Prywatną Wiadomość
1 2 »


Szybka Odpowiedź


Musisz się zalogować by móc zamieszczać posty w tym temacie.