VGH: Jak dodać graficzne kategorie w Artykuły, Download, Linki, Faq

Kategorie w takich działach jak Artykuły, Download, Linki, Faq to "suche" linki, bez wyrazu. Stosując CSS można te kategorie wzbogacić o grafiki czy tła, ale bardziej upiększyć stronę. Jedynym ograniczeniem jest nasza wyobraźnia. Możemy zastosować drobne grafiki, które odzwierciedlają tematykę kategorii, większe grafiki, bądź tylko kolorowe tła. Przygotowałam dwie wersje kodów, takie jak na przykładowym obrazku.

Wariant 1

1. Dodaj nowy lub edytuj istniejący panel:
PA -> Zarządzanie stroną -> Zarządzanie panelami

2. W treść panelu wklej kod:

<style type="text/css">
/*-------Graficzne kategorie: Artykuły, Download, Linki, FaQ - wariant 1-------*/
/*------Modyfikacja przygotowana przez fantagiro || fantidesign.blogspot.com-------*/
.main-bg a[href="ADRES URL"] {
background-image: url(ADRES GRAFIKI);
background-repeat:no-repeat;
background-position:left center;
padding-top:8px;
padding-bottom:8px;
padding-left:20px;
margin-top:10px;
width:80%;
display:inline-table;
text-align:left;
}
</style>

• W miejscu ADRES URL wklej adres kategorii artykułu, kategorii download, kategorii linków lub kategorii faq. Aby zdobyć adres należy: zaznaczyć odnośnik, a następnie kliknąć w prawy przycisk myszy i wybrać "Pokaż źródło zaznaczenia" lub wejść w daną kategorię, a adres pojawi się w pasku przeglądarki.
• Przykład: pierwsze utworzone kategorie będą miały adresy:
• Artykuły: articles.php?cat_id=1
• Download: downloads.php?cat_id=1
• Linki: weblinks.php?cat_id=1
• Faq: faq.php?cat_id=1

- W miejscu: background-image: url(ADRES GRAFIKI), uzupełnij kod o własną grafikę.
- Wartości marginesów w powyższym kodzie odnoszą się do grafiki o rozmiarach 16x16px.

3. Zapisz panel i pamiętaj aby go włączyć.

Dla każdej kategorii należy powielić powyższy (powyższy lub poniższy) kod, a następnie uzupełnić o adres kategorii i grafiki.

Wariant 2

Jest analogiczny do wariantu 1, jedynie zmieniają się niektóre wartości atrybutów:

<style type="text/css">
/*-------Graficzne kategorie: Artykuły, Download, Linki, FaQ - wariant 2-------*/
/*------Modyfikacja przygotowana przez fantagiro || fantidesign.blogspot.com-------*/
.main-bg a[href="ADRES URL"] {
background-image: url(ADRES GRAFIKI);
background-repeat:no-repeat;
background-position:center top;
padding-top:22px;
margin-top:10px;
width:98%;
display:inline-table;
}
</style>

• Wartości marginesów w powyższym kodzie odnoszą się do grafiki o wysokości 20px.

Można uzyskać jeszcze inne kombinacje, że grafika będzie po prawej, a nie lewej stronie, bądź pod nazwą kategorii, a nie nad. Można zrobić grafikę jako samo tło kategorii, dodać obramowań, tła, cieni itp i zrobić coś jeszcze fajnego. Tutaj kłania się wiedza z CSS. Osoby, które dobrze opanowały kodowanie CSS, będą mogły zrobić coś ciekawego.