Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Egyedi modulstílusok G-Portálon
Egyedi modulstílusok G-Portálon : 3. Egyedi táblázatos modulstílus részletes leírása

3. Egyedi táblázatos modulstílus részletes leírása


Egyedi szövegdoboz
részletes leírása

Sokan kérdeztétek már, hogyan kell az ilyen fajta szövegdobozokat 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 a szövegdobozokat.
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: //aranymeli.gportal.hu/gindex.php?pg=33140647 (iheltgyűjtésnek is jó, meg akkor is jó, ha ezeket szeretnéd inkább felhasználni.)
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:
//aranymeli.gportal.hu/gindex.php?pg=35799649&nid=6399581
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 a szövegdobozod lesz. A legjobb hatás akkor érhető el, ha az egyszerű modulodban erről a két helyről is kiveszed a pipát, így teljesen átlátszó lesz a modulod:

Akkor most illeszd be a kódot az egyszerű modulodban, és a megfelelő helyeken írd át az adatokat. Ilyen pl. a background image és a height részek. Ezek a legfontosabbak, de lejjebb a kód magyarázata is megtalálható. Mikor mindig visszamész szerkesztő nézetbe forráskód nézetből, akkor láthatod, hogyan is fog kinézni a szövegdobozod eredeti állapotában :) Akkor a kód magyarázata:

2010. 08. 28.
LindaDesign

Kód magyarázata

Táblázat kód:

<div align="center">
<table cellspacing="0" cellpadding="0" class="frissmodul">
    <tbody>
        <tr>
            <td height="" class="frisscim">Egyedi szövegdoboz</td>
        </tr>
        <tr>
            <td height="" class="frissszö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="frissdatum">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">
.frissmodul {
/* az egész táblakód. Itt a szélesség beállítása a lényeges */
  background:transparent;
        font-family: georgia; /* betűtípus */
        color: #706246; /* betűszín */
        text-shadow: #c7c4c7 2px 2px 2px; /* betű árnyéka */
        font-size: 20px; /* betű mérete */
        font-weight: bold; /* betű vastagsága */
        font-style: italic; /* betű dőlt legyen vagy normal */
        text-align: center; /* szöveg pozíciója középen */
        HEIGHT: 100%; /* szövegdobozod magassága. Ezt nem kell bántani */
        width: 477px; /* szövegdobozod szélessége */
}

.frisscim {
/* 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/1282982032_44.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-left: 20px; /* cím helyzete balról */
        HEIGHT: 152px; /* szövegdobozod magassága. A fejléc képed magassága */
}

  .frissdatum {
/* 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/1282982018_94.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: center; /* szöveg pozíciója középen */
  padding-left: 0px; /* cím helyzete balról */
  padding-right: 0px; /* cím helyzete jobbról */
  padding-bottom: 0px; /* cím helyzete lentről */
  text-shadow: #cbcbc7 1px 1px 1px; /* betű árnyéka */
  HEIGHT: 148px; /* szövegdobozod magassága. A lábléc képed magasság */
  line-height: 14px; /* sorok közti távolság */
}

  .frissszö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/1282982025_14.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: left; /* szöveg pozíciója bal */
  padding-left: 25px; /* cím helyzete balról */
  padding-right: 20px; /* 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: #cbcbc7 1px 1px 1px; /* betű árnyéka */
}
-->
</style>

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

Szeretnél egy jó receptet? Látogass el oldalamra, szeretettel várlak!    *****    Minõségi Homlokzati Hõszigetelés. Vállaljuk családi házak, lakások, nyaralók és egyéb épületek homlokzati szigetelését.    *****    Amway termék elérhetõ áron!Tudta, hogy az általános tisztítószer akár 333 felmosásra is alkalmas?Több info a weboldalon    *****    Florence Pugh magyar rajongói oldal. Ismerd meg és kövesd az angol színésznõ karrierj&#232;t!    *****    Fele királyságomat nektek adom, hisz csak rátok vár ez a mesebirodalom! - Új menüpont a Mesetárban! Nézz be te is!    *****    DMT Trip napló, versek, történetek, absztrakt agymenés:)    *****    Elindult a Játék határok nélkül blog! Részletes információ az összes adásról, melyben a magyarok játszottak + egyéb infó    *****    Florence Pugh Hungary - Ismerd meg az Oppenheimer és a Dûne 2. sztárját.    *****    Megnyílt az F-Zero Hungary! Ismerd meg a Nintendo legdinamikusabb versenyjáték-sorozatát! Folyamatosan bõvülõ tartalom.    *****    A Cheer Danshi!! nem futott nagyot, mégis érdemes egy esélyt adni neki. Olvass róla az Anime Odyssey blogban!    *****    A 1080° Avalanche egy méltatlanul figyelmen kívül hagyott játék, pedig a Nintendo egyik remekmûve. Olvass róla!    *****    Gundel Takács Gábor egy különleges könyvet adott ki, ahol kiváló sportolókkal a sport mélységébe nyerhetünk betekintést.    *****    21 napos életmódváltás program csatlakozz hozzánk még!Január 28-ig 10% kedvezménnyel plusz ajándékkal tudod megvásárolni    *****    Szeretne egy olyan általános tisztítószert ami 333 felmosásra is elegendõ? Szeretne ha csíkmentes lenne? Részletek itt!!    *****    Új játék érkezett a Mesetárba! Elõ a papírral, ollóval, és gyertek barkácsolni!    *****    Tisztítószerek a legjobb áron! Hatékonyság felsõfoka! 333 felmosásra elengedõ általános tisztítószer! Vásároljon még ma!    *****    Hayashibara Megumi és Okui Masami rajongói oldal! Albumok, dalszövegek, és sok más. Folyamatosan frissülõ tartalom.    *****    A legfrissebb hírek a Super Mario világából és a legteljesebb adatbázis a Mario játékokról.Folyamatosan bõvülõ tartalom.    *****    333 Felmosásra elegendõ! Szeretne gazdaságosan felmosni? Szeretne kiváló általános tisztítószert? Kiváló tisztítószerek!    *****    Ha tél, akkor téli sportok! De akár videojáték formájában is játszhatjuk õket. A 1080°Snowboarding egy kiváló példa erre