VGH: Jak dodać graficzny opis forum

Na bardzo wielu forach dyskusyjnych, poszczególne fora/kategorie są opatrzone grafiką. W poradniku pokażę wam dwa sposoby aby uzyskać dwa różne efekty dodania grafiki za pomocą CSS, aby ozdobić w ten sposób swoje forum na stronach vgh.pl.

Sposób nr 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">
/*-------Graficzny opis Forum-------*/
/*------Modyfikacja przygotowana przez fantagiro || fantidesign.blogspot.com-------*/
.tbl1 a[href="viewforum.php?forum_id=X"] {
background-image: url(ADRES URL GRAFIKI);
background-repeat:no-repeat;
background-position: bottom center;
display:block;
padding-bottom:Ypx;
margin-bottom:Zpx;
}
</style>

• W miejscu: background-image: url(ADRES URL GRAFIKI), uzupełnij kod o własną grafikę.
• Aby grafika odnosiła się danego forum, należy kod uzupełnić o id forum. W miejscu: viewforum.php?forum_id=X, x należy zastąpić numerem forum.
  Aby zdobyć numer id można:
  
  • zaznaczyć odnośnik forum, a następnie kliknąć w prawy przycisk myszy i wybrać "Pokaż źródło zaznaczenia" lub wejść w dane forum, a adres pojawi się w pasku przeglądarki.
  • Przykład: pierwsze utworzone forum, będzie miało taki adres - viewforum.php?forum_id=1.
• Dodać wartość atrybutu padding w miejscu Y: padding-bottom:Ypx. Wartość ta ma być taka jak wysokość użytej grafiki. Jeśli korzystasz z grafiki o wysokości 50px, to atrybut padding będzie wyglądał tak: padding-bottom:50px. Polecam dodatkowo dodać 5-10px, dla uzyskania przejrzystszego wyglądu.
• Dodać wartość atrybuty margin w miejscu Z: margin-bottom:Zpx. Ta wartość będzie dodatnia lub ujemna, tu już zależy od stylu i wartości jakie przyjmuje klasa tbl1.
  
  • Jeśli pojawi się pusta przestrzeń, od grafiki do końca komórki, to dodaj wartość margin na minusie, np: margin-bottom:-10px.
  • Jeśli grafika brzydko wysunie się poza pole komórki, to dodaj wartość margin na 'plusie', np: margin-bottom:10px.

Dla każdego forum oczywiście kod musisz powielić.

3. Zapisz panel i pamiętaj aby był włączony!

Sposób nr 2

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">
/*-------Graficzny opis Forum-------*/
/*------Modyfikacja przygotowana przez fantagiro || fantidesign.blogspot.com-------*/
.tbl1 a[href="viewforum.php?forum_id=X"] {
background-image: url(ADRES URL GRAFIKI);
background-repeat:no-repeat;
background-position:left bottom;
float:left;
vertical-align:top;
height:Ypx;
width:Zpx;
}
</style>

• W miejscu: background-image: url(ADRES URL GRAFIKI), uzupełnij kod o własną grafikę.
• Aby grafika odnosiła się danego forum, należy kod uzupełnić o id forum. W miejscu: viewforum.php?forum_id=X, x należy zastąpić numerem forum.
  Aby zdobyć numer id można:
  
  • zaznaczyć odnośnik forum, a następnie kliknąć w prawy przycisk myszy i wybrać "Pokaż źródło zaznaczenia" lub wejść w dane forum, a adres pojawi się w pasku przeglądarki.
  • Przykład: pierwsze utworzone forum, będzie miało taki adres - viewforum.php?forum_id=1.
• Dodać wartość atrybutu height w miejscu Y: height:Ypx. Ta wartość będzie równa: wysokości użytej grafiki + wielkości czcionki. Np. wysokość grafiki to 30px, zaś czcionka to 10px, więc atrybut będzie wyglądał tak: height:40px.
• Dodać wartość atrybuty width w miejscu Z: width:Zpx. Ta wartość będzie równa szerokości użytej grafiki. Np. szerokość użytej grafiki wysnosi 20px, atrybut będzie wyglądał tak: width20px.
• Dla atrybutów height i width polecam dodatkowo dodać po 3-5px, dla uzyskania przejrzystszego wyglądu.
• Uwaga: ten sposób jest polecany tylko wtedy gdy nazwa forum składa się z jednego słowa.

Dla każdego forum oczywiście kod musisz powielić.

3. Zapisz panel i pamiętaj aby był włączony!