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
2018. 04. 17.Coppermine | Eredeti kép megnyitása új lapon és nem új ablakban
2018. 04. 03.Képről szöveg másolása
2018. 04. 02.Coppermine Galéria költöztetése
Coppermine Gallery themes

Coppermine Gallery themes
80 napja
111 néző

WordPress themes

WordPress themes
81 napja
114 néző

G-Portál themes

G-Portál themes
81 napja
67 néző

Tumblr themes

Tumblr themes
81 napja
101 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


854 megtekintés

Hozzászólások