Cikkajánló
Kérdeztétek már jó sokan, hogy van-e rá valami megoldás, hogy KrazyJokes, Chazz és hasonló nevű egyének vagy robotok (ki tudja), ne firkálják tele a Chat-et. A válasz pedig, hogy
Kárpótlásnak, hogy mostanában nem igazán volt friss még az aranymelin, így mára is hoztam kettő darab leírást. A címből már gondolom kiderült, hogy WordPress leírásokról van szó. Két egyszerű
Készítettem pihenésképpen egy teljesen egyszerű G-Portálos CSS kódot. Semmi csicsa nincsen benne, sem színkavalkád :) Tök egyszerű, letisztult téma. Fejléc adható hozzá, ha úgy jobban tetszik majd. :) Innen
Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló Apró tippek weboldal szerkesztőknek
Szélső modulnak egyedi modulfejléc

Hoztam egy újabb CSS kódot a G-Portálra. Vagyis az alap kód az már meg volt régóta, csak gondoltam tegyük kicsit egyedivé a portálunkat, így a modulcímet kicsit átvariáltam. Kettő darab új sorra van szükség ehhez a CSS kódban. Az egyik a position: absolute, de ezt elvileg már ismeritek, mert ezzel a kóddal lehet minden “doboz”-nak a helyzetét megváltoztatni. WordPress-ben vagy G-Portálon pl. ez a kódsor kell ahhoz, hogy a fejlécre lehessen helyezni tartalmat, vagy WordPress-ben ezzel kell beállítani, ha pl. kiemelt képre kerül a cím vagy dátum, stb. G-Portálon is sok mindenre lehet alkalmazni. A másik kódsor pedig ez lenne: word-wrap: break-word. Alapjáraton a mondatoknál ez sortörést jelent. Mi is erre használjuk, csak nem sort törünk, hanem a betűket, hogy egymás alá kerülhessenek. És ezzel a kettő kódrésszel nézhet ki így a G-Portálon a szélső modul modulfejléce :) A kód és a leírás hozzá a kép alatt található meg!

 

 

CSS kód

 

.column_side_td .module .modtitle {
position: absolute;
font-family: 'Anaheim', sans-serif;
text-align: center;
font-size: 18px;
color: #fbeaf9;
text-shadow: 1px 1px 1px #6f2d69;
font-weight: normal !important;
text-transform: uppercase;
background: #d28ecd;
padding: 15px;
margin-left: -42px;
width: 12px;
height: 240px;
word-wrap: break-word;
}

 

Leírás

 

width: az érték sose legyen nagyobb, mint maga a betű szélessége. Szóval, ha szélesebb modulcímet szeretnétek adni a modulnak, akkor a padding értéket használjátok hozzá mindig! Mivel a word-wrap kódrész ugye sortörés, így ha a width-el állítotok szélességet, akkor a betűk egymás mellé kerülnek. És ugye az a cél, hogy egymás alatt lehessenek ;) Tehát a 12 pixelt szerintem hagyhatjátok így.

 

height: ezzel kell beállítani, hogy a modulfejléced milyen magas legyen.

 

position: absolute – ez ugye alap. E nélkül nem lehet a modulfejlécet elmozdítani. Az elmozdítás értékét pedig a margin-okkal kell megadni.

 

word-wrap: break-word – ez járul hozzá ahhoz, hogy egymás alá kerüljenek a betűk

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

Hozzászólások