|
| Modulstílus |
| Szeretnél te is ilyen modulstílust oldaladra, de nem tudod, hogy mi fán terem? Akkor olvasd el ezt a leírást, mert hasznodra lehet! Leírom neked, hogy hogyan, miképp kell egy ilyent elkészíteni és használni. :) |
Rolii, 2011.01.14.
Copyright portaldesigns.gp |
Egyre több oldalon lehet látni, hogy nem a megszokott G-Portálos modulstílus van, hanem különleges, saját modulstílus. Leírom nektek, hogy hogyan készíthettek ti is ilyen modulstílust magatoknak.
Kezdetnek szükségetek lesz, egy modulstílusra. Ha nem tudod, hogy milyent szeretnél, vagy csak nem tudsz készíteni, akkor itt vannak azok, amiket én csináltam meg:
Elvihető modulstílusok
Mielőtt elkezded megcsinálni a modult, mindenképp vágd fel 3 részre a modulstílust, mivel 3 részből épül fel a modul: fejléc, háttér és lábléc. (A bal oldalt látható modul is 3 részből épült fel, ha megnéznéd, hogy hogyan van szétvágva, akkor válassz: fejléc, háttér, lábléc.) Szóval így épülnek fel a modulok.
Következő lépésként illeszd be a következő kódot forráskód (<>) nézetben:
<table width="450" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="mf">MODULCÍM</td>
</tr>
<tr>
<td class="mh">TARTALOM</td>
</tr>
<tr>
<td class="ma">TARTALOM</td>
</tr>
</tbody>
</table> |
Ez a modulod felépítése. Amit változtass meg:
Az első sorban találsz egy olyan részt, hogy "width="450"". Itt a 450-et írd át annyira, ahány pixel széles a modulod.
És persze a nagybetűs részbe a saját dolgaidat írd, azaz azt, amit akarsz! :)
Magyarázat:
A <td class="xy">...</td> részek a modul részeit jelölik. "mf" a fejléc, "mh" a háttér és "ma" a lábléc. Gondolom eddig érthető. Viszont ettől még nincs kész a modulod, hiszen így egy egyszerű táblázatként jelenik meg.
Most jön a következő rész. Írtam hozzá egy kis magyarázatot, így mindent érteni fogtok benne remélem.
A kód: (Ezt is forráskód nézetben illeszd be, de ezt oldalsó modulba)
<style type="text/css">
.mf /* a modul felső része */{
background-color: transparent; /* a modulfejléc hátterének színe - jelenleg átlátszó */
height: 100px; /* modulfejléc magassága */
text-align: center; /* modul címének elhelyezkedése */
background-image: url(...); /* a modulfejléc háttérképe - ide az általad választott kép url-je kell */
color: #000000; /* a modul címének színe */
font-size: 20px; /* betűméret */
font-style: italic; /* betűstílus italic vagy none (dőlt vagy semmi) */
font-family: georgia; /* betűtípus */
padding-top: 15px; /* a cella tetejétől való távolság */
padding-left: 15px; /* a cella bal oldalától való távolság */
padding-right: 15px; /* a cella jobb oldalától való távolság */
padding-bottom: 0px; /* a cella aljától való távolság */}
.mh /* a modul középső része */{
background-color: transparent; /* a modul hátterének színe - jelenleg átlátszó */
background-image: url(...); /* a modul háttérképe - ide az általad választott kép url-je kell */
color: #000000; /* a modul tartalmának betűszíne */
font-size: 11px; /* betűméret */
font-style: none; /* betűstílus italic vagy none (dőlt vagy semmi) */
font-family: verdana; /* betűtípus */
padding-top: 0px; /* a cella tetejétől való távolság */
padding-left: 17px; /* a cella bal oldalától való távolság */
padding-right: 17px; /* a cella jobb oldalától való távolság */
padding-bottom: 0px; /* a cella aljától való távolság */}
.ma /* a modul lábléce */{
background-color: transparent; /* a modul láblécének hátterének színe - jelenleg átlátszó */
height: 140px; /* lábléc magassága */
text-align: center; /* lábléc szövegének elhelyezkedése */
background-image: url(...); /* a modul láblécének háttérképe - ide az általad választott kép url-je kell */
color: #000000; /* a lábléc tartalmának betűszíne */
font-size: 11px; /* betűméret */
font-style: italic; /* betűstílus italic vagy none (dőlt vagy semmi) */
font-family: verdana; /* betűtípus */
padding-top: 60px; /* a cella tetejétől való távolság */
padding-left: 90px; /* a cella bal oldalától való távolság */
padding-right: 90px; /* a cella jobb oldalától való távolság */
padding-bottom: 30px; /* a cella aljától való távolság */}
</style> |
Ha ezt elmented, akkor - remélhetőleg - megkaptad az eredményt, kész a modulod. Természetesen az előző kódban mindent úgy írsz át, ahogy neked jó.
Ha valami nem jó, akkor írj E-MAIL-t vagy írj a KÉRDEZŐben nekem. Ígérem, hogy megpróbálok minél hamarabb válaszolni. :) |
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
