|
4. Oldalsáv készítése (egyedi modulstílus oldalt)
|
Oldalsáv |
|
Sokan kérdeztétek már, hogyan kell az ilyen fajta oldalsávot használni a G-portál-on. Készítettem egy részletes leírást, hogy te is el tudd készíteni saját magadnak.
Az első lépés mindenképpen, hogy valamilyen képszerkesztő programban (pl.: Adobe Photoshop, PhotoFiltre, Gimp, Paint Shop Pro) készítesz egy neked tetsző, alakú szövegdobozt. Mintákat itt találsz.
Ha te magad készíted a szövegdobozodat, akkor minden esetben háttér nélkül készítsd el. A szövegdoboz mögött ne legyen háttér. És vagy GIF vagy PNG formátumban mentsd el!
Amikor elkészült a szövegdobozod, háromba kell vágni így: LINK
Három külön képként kell elmenteni. Én így szoktam őket elnevezni:
1. fejléc 2. háttér 3. lábléc
A három képet fel kell tölteni az internetre egy képtárba, vagy a G-Portál képtár moduljába. Közben készíts egy egyszerű modult, amiben az oldalsáv lesz.
Akkor most illeszd be a kódot az egyszerű modulodban, és a megfelelő helyeken írd át az adatokat. Odaírtam a kódban, hogy mi micsoda. Akkor jöjjön a kód magyarázata.
|
|
2010. 08. 28. |
Kód magyarázata
Táblázat kód:
<div align="center">
<table cellspacing="0" cellpadding="0" class="oldalmodul">
<tbody>
<tr>
<td height="" class="oldalcim">Oldalsáv</td>
</tr>
<tr>
<td height="" class="oldalszöveg">
<p>IDE JÖN A SZÖVEG! IDE JÖN A SZÖVEG! IDE JÖN A SZÖVEG! IDE JÖN A SZÖVEG! IDE JÖN A SZÖVEG! IDE JÖN A SZÖVEG!</p>
</td>
</tr>
<tr>
<td height="7" colspan="2" class="oldaldatum">2010. 08. 28.<br />
LindaDesign</td>
</tr>
</tbody>
</table>
</div>
CSS kód (A CSS kódot jobb vagy bal oldalra tedd egyszerű modulban! (AJÁNLOTT)
<style type="text/css">
.oldalmodul {
/* az egész táblakód. Itt a szélesség beállítása a lényeges */
background:transparent;
HEIGHT: 100%; /* szövegdobozod magassága. Ezt nem kell bántani */
width: 266px; /* szövegdobozod szélessége */
}
.oldalcim {
/* a táblafejléc kódja */
background:transparent; /* háttér színe átlátszó. Nem kell bántani */
background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1348903301_89.png); /* fejléc szövegdobozod URL címe */
font-family: georgia; /* betűtípus */
text-shadow: #c7c4c7 2px 2px 2px; /* betű árnyéka */
color: #E66B72; /* betűszín */
text-align: center; /* szöveg pozíciója középen */
font-size: 27px; /* betű mérete */
font-weight: bold; /* betű vastagsága */
font-style: italic; /* betű dőlt legyen vagy normal */
padding-top: 50px; /* cím helyzete fentről */
padding-right: 70px; /* cím helyzete balról */
HEIGHT: 83px; /* szövegdobozod magassága. A fejléc képed magassága */
}
.oldaldatum {
/* a dátumrész kódja */
background: transparent; /* háttér színe átlátszó. Nem kell bántani */
background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1348903284_78.png); /* fejléc szövegdobozod URL címe */
font-family: georgia; /* betűtípus */
font-size: 11px; /* betű mérete */
color: #E66B72; /* betűszín */
text-align: left; /* szöveg pozíciója középen */
padding-left: 160px; /* cím helyzete balról */
padding-right: 0px; /* cím helyzete jobbról */
padding-bottom: 0px; /* cím helyzete lentről */
padding-top: 5px; /* cím helyzete fentről */
text-shadow: #cbcbc7 1px 1px 1px; /* betű árnyéka */
HEIGHT: 31px; /* szövegdobozod magassága. A lábléc képed magasság */
line-height: 14px; /* sorok közti távolság */
}
.oldalszöveg {
/* a tartalmi rész kódja */
background-color: transparent; /* háttér színe átlátszó. Nem kell bántani */
background-image: url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1348903293_93.png); /* fejléc szövegdobozod URL címe */
font-family: georgia; /* betűtípus */
font-size: 8pt; /* betű mérete */
color: #6e6b6e; /* betűszín */
text-align: justify; /* szöveg pozíciója bal */
padding-left: 8px; /* cím helyzete balról */
padding-right: 11px; /* cím helyzete jobbról */
padding-bottom: 0px; /* cím helyzete lentről */
HEIGHT: 100%; /* szövegdobozod magassága. Ezt nem kell bántani */
line-height: 12px; /* sorok közti távolság */
text-shadow: #ffffff 1px 1px 1px; /* betű árnyéka */
}
--></style>
|
AJÁNLOM AZ OLDALT
Súgó
Frissítés