Cikkajánló
A héten volt egy ilyen kérés is, hogy hogyan lehet az Awesome ikonokat úgy használni a G-Portálon, hogy nem kell külön kódokkal bíbelődni. Hát ma volt időm, hogy megírjam
Igazából nevezhetnénk ezt is Kiemelt képnek a blog modulban, de mivel a beállításai eltérőek és itt pont arra mentem rá, hogy háttérképeket jelenítsünk meg, aminek nem számít a kép
Leírom, hogy én hogyan szoktam telepíteni és használni egy WordPress bővítményt. Meg kell jegyeznem, hogy ezt ÉN szoktam így, biztos van olyan emberke, akik ezt máshogy oldják meg, mert
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
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
749 megtekintés

Hozzászólások