2018. 05. 12.Videó | Kép élénkítése Photoshop-ban
2018. 05. 05.ColorCop színlopó program
2018. 04. 30.Coppermine | Kép és fájlméret megadása az indexképek alatt
2018. 04. 24.Coppermine | Thumbnails képek méretének változtatása egyszerűen
2018. 04. 18.Videó | PNG készítése Photoshop-ban
Coppermine Gallery themes

Coppermine Gallery themes
312 napja
719 néző

WordPress themes

WordPress themes
313 napja
205 néző

G-Portál themes

G-Portál themes
313 napja
117 néző

Tumblr themes

Tumblr themes
313 napja
168 néző

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


921 megtekintés

Hozzászólások