Napisane przez jantom dnia 23 lutego 2009 20:48 · 2 komentarze · 16407 czytań ·  ·  · 

Aktualizacja skórki PHP-Fusion 6 do PHP-Fusion 7

W poprzedniej cz??ci artyku?u mo?na by?o zapozna? si? ze zmianami, jakie zosta?y wprowadzone do pliku theme.php. Ta b?dzie w ca?o?ci po?wi?cona plikowi opisuj?cemu wygl?d skórki - styles.css. Zapraszam wszystkich do dalszej lektury.

Aktualizacja pliku styles.css

Po obejrzeniu swojej strony po zmianach dokonanych w pliku themes.php, prawdopodobnie stwierdzisz, ?e nie wszystko wygl?da tak, jak to by?o w wersji dla PHP-Fusion 6. Nie jest to nic niezwyk?ego, gdy? nie zaktualizowany jest jeszcze plik styles.css, który w PHP-Fusion 7 steruje wygl?dem skórki.

Ustawianie szeroko?ci

Ogl?daj?c stron? po dotychczasowych zmianach, na pewno stwierdzisz b??dy w szeroko?ciach elementów. Przyczyna jest prosta – dla ?atwiejszego sterowania wygl?dem strony te ustawienia nie s? ju? zawarte w pliku theme.php, a w pliku style.css. Aby ustawi? ca?kowit? szeroko?? skórki musimy mie? mo?liwo?? odwo?ania si? do najwi?kszej (zewn?trznej) tabeli/bloku skórki z poziomu css. W niektórych skórkach ta tabela ju? posiada klas? lub identyfikator, które mo?emy wykorzysta?. W innych, jak np. Prime, trzeba j? doda?. Wracamy do pliku theme.php i upewniamy si?, ?e zewn?trzna tabela posiada klas?/identyfikator. Je?li nie – dodajemy j? wg poni?szego przyk?adu:
Przed:

function render_page($license=false) {
 
global $settings;
 
echo "<table align='center' cellspacing='0' cellpadding='0'>

Po:

function render_page($license=false) {
 
global $settings;
 
echo "<table align='center' cellspacing='0' cellpadding='0' id='main'>

Skoro mo?emy ju? identyfikowa? g?ówn? tabel?, ustawmy jej szeroko?? z poziomu css. Wystarczy w pliku style.css w dowolnym miejscu doda? :

#main {width: 100%;}

Oczywi?cie nale?y u?y? identyfikatora takiego jak powy?ej, w pliku theme.php (u nas “main”) oraz po??danej szeroko?ci. Je?li zastosujemy klas?, trzeba u?y? nieco innego kodu:

.main {width: 100%;}

Skórka powinna ju? wygl?da? lepiej, ale kolumny boczne mog? nadal by? zbyt szerokie. Aktualizuj?c plik theme.php u?yli?my ju? odpowiednich klas, a wi?c mo?emy teraz okre?li? ich szeroko?ci. Wi?kszo?? plików styles.css zawiera definicje w?a?ciwo?ci dla klas .side-border-left i .side-border-right . Wystarczy je odnale?? i doda? w?a?ciwo?? width (lub ca?? klas?, je?li nie wyst?puje), jak pokazano w poni?szym przyk?adzie. W skórce Prime obydwie klasy ju? s? na miejscu, wi?c wystarczy?o doda? definicj? szeroko?ci:
Przed:

.side-border-left { padding:0px 10px 0px 10px; }
.side-border-right { padding:0px 10px 0px 10px; }

Po:

.side-border-left {
	padding:0px 10px 0px 10px;
	width: 170px;
}
 
.side-border-right {
	padding:0px 10px 0px 10px;
	width: 170px;
}

Szeroko?ci powinny ju? by? poprawne, ale ci?gle jeszcze mamy do wykonania kilka rzeczy.

Styl dla nowych elementów

Okre?limy teraz wygl?d elementów, które dzia?aj? inaczej ni? w PHP-Fusion 6 lub po prostu s? ca?kiem nowe.

Nawigacja pozioma

Jedn? ze wspomnianych nowych dodatków s? listy u?ywane w nawigacji poziomej i w panelach nawigacyjnych opartych na css. Poni?szy kod umo?liwia poprawne dzia?anie nawigacji poziomej. Wystarczy doda? go do styles.css.

.white-header ul{
	margin: 0;
	padding: 0;
}
.white-header ul li{ display: inline; }
.white-header ul li.first-link .bullet{ display: none; }

Je?li w nawigacji poziomej u?ywasz innej klasy ni? white-header – u?yj jej w tym miejscu. Co robi ten fragment? Po pierwsze usuwa domy?lne marginesy i padding dla ca?ej listy (ul), dzi?ki czemu poszczególne pozycje nie maj? wci?? a ca?a lista nie zajmuje za du?o miejsca.
Po drugie ustawia elementy listy (li) jeden za drugim (a nie pod). I wreszcie, po trzecie, usuwa punktor dla pierwszego elementu listy. Wszystko to sprawia, ?e nawigacja pozioma powinna wygl?da? tak, jak w wi?kszo?ci skórek PHP-Fusion 6. Pozycja i rozmieszczenie hiper??czy powinno ju? by? prawid?owe, ale mo?liwe, ?e ich kolory s? niew?a?ciwe. Przyczyn? jest fakt, ?e w PHP-Fusion 6 klasa dla nawigacji poziomej odnosi?a si? do hiper??czy, a w PHP-Fusion 7 dotyczy elementów listy. W skórce Prime odpowiednia klasa to .white, a poprawki wygl?daj? nast?puj?co:
Przed:

a.white { color:#fff; text-decoration:none; }
a:hover.white { color:#fff; text-decoration:underline; }

Po:

 
li.white a, a.white{ color:#fff; text-decoration:none; }
li.white a:hover, a:hover.white { color:#fff; text-decoration:underline; }

Je?li twoje hiper??cza korzystaj? z innej klasy (zwró? uwag? na argumenty funkcji showsublinks() , której wywo?anie znajdziesz wewn?trz funkcji render_page() - zastosuj zmiany do tej klasy. W naszym przyk?adzie pozostawimy klas? .white , gdy? niektóre inne hiper??cza (np. w stopce strony) równie? z niej korzystaj?.

Panel nawigacyjny w wersji css

Dostosujemy teraz wygl?d listy wy?wietlanej w panelu nawigacyjnym. Po pierwsze dodamy poni?szy kod, aby móc sterowa? wygl?dem listy:

#navigation ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

Nast?pnie zajmiemy si? etykietami kategorii w menu. Kolory jakich nale?y u?y?, zale?? od klasy side-label i dla ka?dej skórki mog? by? inne:

#navigation h2 {
	font-size: 12px;
	color: #555;
	background-color: #fff;
	margin: 0;
	padding: 2px;
}

Okre?limy teraz wygl?d hiper??czy, u?ywaj?c kolorów, które pasuj? do skórki:

#navigation a {
	display: block;
	color: #777;
	padding: 2px;
	text-decoration : none;
}
#navigation a:hover {
	color: #f6f6f6;
	background-color: #ccc;
}
 

I jeszcze poni?szy fragment - konieczny, aby zapewni? poprawne wy?wietlanie pod IE6:

* html #navigation ul li{
   height: 1%;
}
 

Wszystkie powy?sze definicje nale?y doda? w pliku styles.css.

Podzia? na strony (paginacja)

W PHP-Fusion 7 nawigacja “mi?dzy stronami”, czyli lista stron, jak? cz?sto spotykamy na witrynach PHP-Fusion, nie korzysta ju? z tego samego stylu co tabele u?ywane w forum. Do tego celu w PHP-Fusion 7 s?u?y dedykowana klasa .pagenav. Dodajmy zatem odpowiedni fragment do pliku styles.css. Kolory nale?y dobra? zgodnie z kolorystyk? skórki (w razie potrzeby mo?na zerkn?? na klasy tbl1 i tbl2):

.pagenav span {
	color: #777;
	background-color: #f0f0f0;
	border: 1px solid #e1e1e1;
	padding: 2px 4px;
	margin: 2px;
}
 
.pagenav a {
	color: #000;
	background-color: #fff;
	border: 1px solid #e1e1e1;
	padding: 2px 4px;
	margin: 2px;
	text-decoration: none;
}
 
.pagenav a:hover {
	color: #ccc;
	background-color: #444;
	text-decoration: none;
}

Pierwszy fragment ustala parametry dla strony bie??cej, drugi dla pozosta?ych, a trzeci wygl?d hiper??czy w stanie wskazania mysz?.

Centrowanie elementów

W PHP-Fusion 6 wiele elementów strony by?o centrowanych z u?yciem atrybutu align (np. <table align='center' [...]>). W PHP-Fusion 7 takie przypadki s? nieliczne, a w wi?kszo?ci centrowanie jest realizowane z u?yciem nowej klasy css, przewidzianej do tego celu. Je?li do pliku styles.css dodamy poni?szy wiersz, zapewnimy poprawne dzia?anie obu mo?liwo?ci, i to w zarówno w skórkach opartych na blokach (div) jak i tabelach (table):

.center, *[align="center"] {margin: 0 auto;}

Klasa admin_message

W PHP-Fusion 7 jest ona u?ywana do okre?lenia wygl?du wa?nych komunikatów. Dla skórki Prime wygl?da nast?puj?co:

.admin-message {
	border: 1px solid #666;
	border-left: 3px solid #999;
	padding: 8px;
	margin-bottom: 8px;
}

Oczywi?cie powy?szy styl nale?y dopasowa? kolorystycznie do swojej skórki.

Kody BBCodes

Wygl?d przycisków BBCode mo?na w PHP-Fusion 7 dostosowywa? indywidualnie. W Prime dodamy tylko cienk? ramk?:

.bbcode { border: 1px solid #ccc; }

Przywrócenie efektu funkcji tablebreak()

Je?li podejrzymy stron? na dotychczasowym etapie naszych prac, mo?emy stwierdzi?, ?e jej wygl?d jest ju? bliski oczekiwanemu (przynajmniej powinien by?). Do poprawienia ci?gle s? marginesy mi?dzy panelami, które zosta?y usuni?te wraz z funkcj? tablebreak(). Aby to osi?gn?? musimy zastosowa? w?asno?? css do elementu nadrz?dnego (rodzica) paneli (lub elementu, po którym panel nast?puje, je?li brak elementu nadrz?dnego). Je?li brak odpowiedniego elementu, mo?emy zawsze u?y? w?asnej klasy (np. wiele skórek v6 stosuje klas? border dla tabeli b?d?cej rodzicem paneli), oczywi?cie w tym celu nale?y j? zdefiniowa?. W skórce Prime istnieje klasa border, ale jest ona u?ywana tylko w stosunku do ?rodkowych paneli skórki. Dodamy zatem now? klas? o nazwie tablebreak i zastosujemy j? wsz?dzie, gdzie potrzebny jest margines generowany poprzednio przy u?yciu funkcji tablebreak(). Oto pi?? miejsc, gdzie u?yjemy wspomnianej klasy w skórce Prime:

Nawigacja pozioma/Data

<table cellpadding='0' cellspacing='0' width='100%' class='tablebreak'>
    <tr>
        <td class='white-header'>".showsublinks(" ".THEME_BULLET." ", "white")."</td>
        <td align='right' class='white-header'>".showsubdate()."</td>
    </tr>
</table>

Newsy

<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
    <tr>
        <td class='main-body'>
            $news
        </td>
    </tr>

Artyku?y

<table cellpadding='0' cellspacing='0' width='100%' class='border tablebreak'>
    <tr>
        <td class='main-body'>
	    ".($info['article_breaks'] == "y" ? nl2br($article) : $article)."
	</td>
    </tr>

Panele boczne

function openside($title, $collapse = false, $state = "on") {
 
global $panel_collapse; $panel_collapse = $collapse;
$boxname = str_replace(" ", "", $title);
 
echo "<table cellpadding='0' cellspacing='0' width='100%' class='tablebreak'>
    <tr>
        <td colspan='2' class='side-body'><img src='".THEME."images/blank.gif' alt='' height='2' width='1'></td>
    </tr>

Panele ?rodkowe

function opentable($title) {
 
echo "<table cellpadding='0' cellspacing='0' width='100%' style='margin-bottom:2px;'>
    <tr>
        <td class='capmain'>$title</td>
    </tr>
</table>
<table width='100%' cellpadding='0' cellspacing='0' class='border tablebreak'>

Skoro w powy?szych tabelach odwo?ujemy si? do naszej nowej klasy, mo?emy doda? poni?szy wiersz to pliku styles.css co ustawi odpowiedni? wielko?? marginesów:

.tablebreak { margin-bottom: 8px; }

Ostatnie poprawki

Na zako?czenie powinni?my upewni? si?, ?e nasza skórka ma czysty i poprawny kod. Kolejno realizujemy:

1. sprawdzenie i usuni?cie zb?dnych wywo?a? funkcji tablebreak(),
2. poprawienie znacznika otwieraj?cego php <? do wersji pe?nej <?php, aby unikn?? problemów z niektórymi konfiguracjami php5,
3. zamkni?cie znaczników <br> (<br/>),
4. oraz znaczników <img […]> (<img […]/>) i innych znaczników nieparzystych (które nie u?ywaj? znacznika zamykaj?cego w postaci </znacznik>),
5. uzupe?nienie atrybutu alt dla obrazów,
6. dodanie wpisu img {border: 0;} w pliku styles.css, co usunie ramk? wokó? hiper??czy obrazkowych,
7. usuni?cie wpisów filter z pliku styles.css (wiele starszych skórek u?ywa tej techniki do uzyskania efektu hover dla obrazów w galerii).

Przegl?d ko?cowy

Po zaktualizowaniu pliku styles.css mo?emy przyjrze? si? efektom naszej pracy. Tym razem wi?kszo?? elementów powinno wygl?da? i zachowywa? si? podobnie jak w PHP-Fusion 6. Je?li tak nie jest, powiniene? poszuka? pomocy na forum http://themes.php-fusion.co.uk/forum/viewforum.php?forum_id=14 .

Zapraszamy do lektury pierwszej cz??ci artyku?u

Orygina? tego artyku?u pochodzi z PHP-Fusion Wiki.

Autor: Matonor
T?umaczenie: lomcskw
Korekta i sk?ad: jantom

Tylko zarejestrowani użytkownicy mogą oceniać zawartość strony
Zaloguj się lub zarejestruj, żeby móc zagłosować.