Cikkajánló
Jó sok kérdést kaptam már arról, hogyan lehet a G-Portálon úgy kinézetet készíteni, hogy a szélső és középső modulok a lap alján egyforma hosszúak legyenek. Volt már szó ezekről
Készítettem egy újabb ingyenes .psd fejlécet, amit bárki letölthet és felhasználhat forrás megjelölésével természetesen. A fejléc innen tölthető le: PSD – Photoshop fejlécek   megnézem teljes nagyságban Kapcsolódó bejegyzések
Kellemes estét mindenkinek :) Így hétvégére hoztam újabb kettő darab letölthető G-Portálos teljes sablont. Egy Kristen Stewart és egy Troian Bellisario sablon készült el. Úgy, mint az eddigieket, itt
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
Képes modul készítése

Ez is egy olyan leírás, amit azért teszek fel az oldalra, mert már hangzott el kérdés róla. Hogyan lehet olyan modult készíteni, amiben minta is van? Például ez a modul:
 


A menete szerintem egyszerű.
 

  • elkészítitek egy képszerkesztőben a modult. Photoshop-ban való elkészítéshez itt találtok leírást: Modulstílus készítése PS-ban
  • a fent látható modult 4-be kell vágni. Általában 3 részre vágjuk a modult, de ez most 4 részes lesz, mivel a modul széleinek adtam árnyék effektet, így simán háttérszínt a CSS-ben nem adhatok meg, mert akkor a modul nem fog jól mutatni. Ha ti nem adtok a modul széleinek semmit, akkor mehet a 3-ba vágás.
  • Ha megvan a szétvágás már csak be kell kódolni CSS segítségével a modult, hogy minden jól szuperáljon benne. Teljes kódolás itt:
    DIV kódolású egyedi modul
  • Ha a táblázatos kódolást szeretitek jobban, akkor annak a leírása itt található meg: Táblázatos egyedi modul


Kódolás G-Portálon
(a HTML-es kódolás a GP-s alatt olvasható)
 

A modulfejléc és modullábléc kódolása a megszokott. A modul tartalmi részének a kódolása kicsit más, mert itt a background-dal és a repeatokkal kell játszani ahhoz, hogy a végeredmény jó lehessen. Most a szélső modulhoz hoztam egy CSS kód mintát.
 

.column_side td.modbody {
    background: url(ide jön a mintás kép URL címe), url(minta nélküli háttérkép URL címe);
    background-position: center top, top;
    background-repeat: no-repeat, repeat-y;

    width: 360px;
    font-family: Georgia;
    text-align: justify;
    color: #622c02;
    padding: 10px 10px;
    text-shadow: 1px 1px 1px #;
}


A background-position-nél az első a center top. Ez a mintás háttérre vonatkozik. Középen és felül fog elhelyezkedni a háttér.
Alatta a background-repeat-nél ehhez a háttérhez vonatkozik a no-repeat rész. Az-az semelyik irányba nem fogja a hátteret ismételni. Ott marad középen és felül.
 

A background-position-nél a második a top. Ez a sima háttérre vonatkozik. Felül helyezkedik el. Onnan fog lefelé ismétlődni.
Alatta a background-repeat-nél ehhez a háttérhez vonazkozik a repeat-y rész. A hátteret lefelé ismétli a CSS. Ezért bármennyit írhattok bele, háttér mindig lesz a modulban.
 

Mintás háttérkép


Minta nélküli háttérkép


Kódolás HTML oldalon
Minden ugyanaz, mint a GP-s kódolásnál, csak itt a CSS részhez nem a .column_side td.modbody-t írjátok az egyedi modulstílushoz, hanem a saját kódolású egyedi modulotokban írjátok át a background részeket ahhoz, hogy jól jelenjen meg a modul.
 

.sidebar-module {
    background: url(ide jön a mintás kép URL címe), url(minta nélküli háttérkép URL címe);
    background-position: center top, top;
    background-repeat: no-repeat, repeat-y;

    width: 340px;
    font-family: Georgia;
    text-align: justify;
    color: #622c02;
    padding: 10px 10px;
    text-shadow: 1px 1px 1px #;
}

lindadesign Hozzászólások
958 megtekintés

Hozzászólások