PDA

Zobacz pełną wersję : Stylowanie paginacji?



pmlvl
04-02-2010, 03:58
W jaki sposób mogę stylować paginację na stronie głównej? Dokładnie to o co mi chodzi znajduje się na http://www.rockettheme.com. Icha paginacja została zmieniona na divy a nie tak jak domyslnie jest w joomli na spanach - został dodany tez nowy div z classą przez co mogą stylować przyciski w dowolny sposób(określać ich długość).

Rozumiem że chodzi o plik /libraries/joomla/html/pagination.php

Ale dokladnie jaki wpis trzeba zmodyfikować aby osiągnąć efekt
Domyslny kod joomli to:
<span class="pagination"><span>&laquo;</span><span>pierwsza</span><span>poprzednia</span><strong><span>1</span></strong><strong><a href="/index.php?limitstart=5" title="2">2</a></strong><a href="/index.php?limitstart=5" title="następna">następna</a><a href="/index.php?limitstart=5" title="ostatnia">ostatnia</a><span>&raquo;</span></span>

A chodzi aby ten kod był wyświetlany:

<div class="pagination">
<div class="tab">
<div class="tab2">Start</div></div>
<div class="tab">
<div class="tab2">Prev</div></div>
<div class="page-block">1</div>
<div class="page-block"><strong><a href="/index.php?start=5" title="2">2</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=10" title="3">3</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=15" title="4">4</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=20" title="5">5</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=25" title="6">6</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=30" title="7">7</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=35" title="8">8</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=40" title="9">9</a></strong></div>
<div class="page-block"><strong><a href="/index.php?start=45" title="10">10</a></strong></div>
<div class="tab">
<div class="tab2"><strong><a href="/index.php?start=5" title="Next">Next</a></strong></div></div>
<div class="tab">
<div class="tab2"><strong><a href="/index.php?start=115" title="End">End</a></strong></div></div></div>

Przejrzałem już chyba z połowe internetu i naprawdę niewiele osób zna odpowiedź na to pytanie.

Pomocy !

zwiastun
04-02-2010, 06:14
Nadpisywanie szablonem. Plik pagination.php jest standardowo w katalogach /html domyślnych szablonów. Funkcja pagination_list_render generuje liste dostępnych pozycji - stron: poprzednich oznaczonych np. Start, Poprz. oraz cyframi, bieżącej i następnych oznaczonych cyframi i napisami Nast. i Ostatni, funkcja pagination_item_active wyświetla odnośniki (numery) do wszystkich innych stron, poza aktualnie wybraną, funkcja pagination_item_inactive wyswietla jako zwykły tekst numer aktualnie wybranej strony. Funkcja: pagination_list_footer wyświetla licznik stron - numer wybranej pozycji (strony) z ogólnej liczby na liście.

pmlvl
04-02-2010, 11:23
Przede wszystkim chce Tobie Zwiastunie podziękować za naprawdę szybką reakcję na mojego posta. Problem został rozwiązany! Rzeczowa informacja - super. Rzeczywiście jesteś najlepszy, Pozdrawiam!

zwiastun
04-02-2010, 11:26
Gdybyś jeszcze np. na wiki opisał, jak to zrobiłeś, byłby niezły przykład korzystania z możliwości nadpisywania szablonem.

pmlvl
04-02-2010, 15:40
Jasne

Nadpisywanie to dodawanie kodu do istniejących instrukcji drukujących strukturę kodu.
Metodę nadpisywania opisałem na przykładzie paginacji.

Edytujemy kod pagination.php który znajduje się w:
root_joomla/templates/nazwa_szablonu/html/pagination.php

Zaczynamy edytować od wiersza:

function pagination_list_render($list)
{
// Initialize variables
$html = "<div class=\"pagination\">"; //zamiana spanu na div: $html = "<div class=\"pagination\">";

//Linia odpowiadająca za wyświetlenie pierwszego przycisku: [««pierwsza ang: ««start]
//dodajemy dwa divy zapętlone o różnych klasach
$html .= '<div class="tab"><div class="tab2">'; //dodajemy linie
$html .= '<span>&laquo;</span>'.$list['start']['data']; //Najlepiej wskaźnik usunąć zamieniając na: $html .= $list['start']['data'];
$html .= '</div></div>'; //dodajemy linie

//Linia odpowiadająca za wyświetlenie drugiego przycisku [poprzednia ang: previous]
//dodajemy dwa kolejne divy zapętlone o różnych klasach
$html .= '<div class="tab"><div class="tab2">'; //dodajemy linie
$html .= $list['previous']['data'];
$html .= '</div></div>'; //dodajemy linie

foreach( $list['pages'] as $page )
{
if($page['data']['active']) {
$html .= '<strong>'; //otwarty znacznik strong - odpowiada za pogrubienie aktywnej/włączonej numeracji
}
// Linia odpowiada za wyswietlenie numeracji
// Dodajemy divy
$html .= '<div class="page-block">'; //dodajemy linie
$html .= $page['data'];
$html .= '</div>'; //dodajemy linie

if($page['data']['active']) {
$html .= '</strong>'; //zamknięty blok numeracji - odpowiada za zakończenie pogrubionej aktywnej/włączonej numeracji
}
}
//Linia odpowiadająca za wyświetlenie trzeciego przycisku [następna ang: next]
$html .= '<div class="tab"><div class="tab2">'; //dodajemy linie
$html .= $list['next']['data'];
$html .= '</div></div>'; //dodajemy linie

//Linia odpowiadająca za wyświetlenie czwartego przycisku [ostatnia ang: end]
$html .= '<div class="tab"><div class="tab2">'; //dodajemy linie
$html .= $list['end']['data'];
$html .= '</div></div>'; //dodajemy linie

//Linia odpowiadająca za wskaźnik: »»
//zamiana spanu na div czyli: $html .= '<span>&raquo;</span>'; na: $html .= '<div>&raquo;</div>';
$html .= '<div>&raquo;</div>'; //Najlepiej wskaźnik usunąć

$html .= "</div>"; //zamiana spanu na div: $html .= "</span>"; na: $html .= "</div>";
return $html;
}

function pagination_item_active(&$item) {
return "<a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a>";
}

function pagination_item_inactive(&$item) {
return "<span>".$item->text."</span>";
}
?>

Nie jestem programistą dlatego wytłumaczenie kodu było typowo prostackie - może to i dobrze. Załączam również style css do podanego kodu - nie biorę pod uwagę wskaźników.

kod css należy wkleić do szablonu styli template.css
root_joomla/templates/nazwa_szablonu/css/templates.css

div.pagination div.tab {background:url("../images/page-tab-r.png") no-repeat scroll 100% 0 transparent;float:left;margin-right:6px;}
div.pagination div.tab2 {background:url("../images/page-tab-l.png") no-repeat scroll 0 0 transparent;padding:0 8px;}
div.pagination div.page-block {float:left;margin-right:6px;padding:0 4px;}

Artykuł wkleiłem tutaj, jeśli chodzi o wiki, to nie wiem gdzie go wkleić.
Pozdrawiam
PM

zwiastun
04-02-2010, 18:02
1. Zarejestruj się na wiki
2. W wyszukiwarce wpisz: Formatowanie paginacji (lub inny tytuł)
3. Pojawi się strona z info, że nie ma takiego artykułu, możesz go założyć.
4. Załóż, przekopiuj stad, co napisałeś.
5. Jak umiesz, to popraw zgodnie z formatowaniem na wiki, jak nie, to zostaw, poprawię, a Ty zobaczysz potem i będziesz wiedzieć następnym razem, co i jak.