Napisane przez jantom dnia 23 lutego 2009 20:48 · 2 komentarze · 16081 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ć.