ForumCa│a strona

Nawigacja

Aktualnie online

GoÂci online: 7

U┐ytkownikˇw online: 1
Pieka

ú▒cznie u┐ytkownikˇw: 25,375
Najnowszy u┐ytkownik: martyna23

Logowanie

Nazwa u┐ytkownika

Has│o



Zarejestruj siŕ

Odzyskaj has│o

Shoutbox

Musisz zalogowaŠ siŕ, aby mˇc dodaŠ wiadomoŠ.

JazOOn
17.05.2023 21:20:44
Wasze zdrowie!

hoopak
06.05.2023 14:23:43
Pierwsze konto w 2005 roku, wi├¬c mi r├│wnie┬┐ wychodzi pe┬│noletno┬Â├Ž Grin

JazOOn
16.04.2023 22:02:01
krasnal i websrv u mnie ca┬│y czas na kompie :-) no i nie┬Âmiertelny paj┬▒czek

Szapko
16.04.2023 02:42:07
Kusi mnie troche wr├│ci├Ž do korzeni i stworzy├Ž jak┬▒┬ stron├¬ na PF Smile

JazOOn
28.03.2023 20:46:59
uuu, Szapko to najwy┬┐ej piwo mo┬┐esz :-)

Pobierz now± wersjê
Pobierz podrêcznik
Zobacz inne oficjalne Supporty
Statystyki supportu
PHP-Fuson PL na Facebooku

RSS

Nawigacja

Konwersja sk├│rek do PHP-Fusion v7 cz.2

Napisane przez jantom dnia 23 lutego 2009 20:48 · 2 komentarze · 15619 czyta˝ · Drukuj · Facebook · Wykop

Streszczenie:

Artyku┬│ w ca┬│o┬Âci po┬Âwi├¬cony systemowi sk├│rek, jaki jest wykorzystywany w PHP-Fusion v7. Znajdziesz w nim wszystkie informacje dotycz┬▒ce tworzenia, modyfikowania oraz konwersji starszych sk├│rek do najnowszej wersji PHP-Fusion. W tej cz├¬┬Âci dowiesz si├¬ o zmianach, jakie zosta┬│y wprowadzone w pliku styles.css - podstawowym pliku opisuj┬▒cym wygl┬▒d ka┬┐dej sk├│rki dla PHP-Fusion.

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

Komentarze

#1 | zezol dnia 25 lutego 2009 13:51
Dodam tylko, ┬┐e Matanor zapomnia┬│ wspomnie├Ž o klasie "news-category", kt├│ra odpowiada za wy┬Âwietlanie i pozycj├¬ obrazka kategorii newsa w newsie. Standardowo wygl┬▒da tak:
Rozwi˝ Kod ╝rˇd│owy CSS
#2 | lomcskw dnia 25 lutego 2009 18:28
zezol: dzi├¬ki za t├¬ uwag├¬, na w┬│asnej stronie musia┬│em to poprawi├Ž, ale jako┬ podczas t┬│umaczenia umkn├¬┬│o z pami├¬ci Smile

Dodaj komentarz

Zaloguj siŕ, aby mˇc dodaŠ komentarz.

Oceny

Tylko zarejestrowani u┐ytkownicy mog▒ oceniaŠ zawartoŠ strony
Zaloguj siŕ lub zarejestruj, ┐eby mˇc zag│osowaŠ.

Žwietne! Žwietne! 75% [3 g│osy]
Bardzo dobre Bardzo dobre 25% [1 g│os]
Dobre Dobre 0% [0 g│osˇw]
Žrednie Žrednie 0% [0 g│osˇw]
S│abe S│abe 0% [0 g│osˇw]
Created by Arox Copyright (C) 2004
Copyright (C) 2004 - 2018 Ekipa PHP-Fusion.pl