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 #;
}

1 290 megtekintés