Cikkajánló
Már többször kérdeztétek tőlem, hogy meglehet-e azt csinálni, amikor átlátszó modult használtok, hogy csak a modul legyen átlátszó, de a benne lévő tartalom vagy kép az ne. A válasz
Amióta használok kiemelt képeket az oldalon azóta foglalkoztatott a dolog, hogy lehetne azt megcsinálni, hogy a képeket lehessen méretileg alakítani és ne kelljen esetleg törölni őket. Ezzel a megoldással
7. rész   Ebben a részben a column_side azaz a G-Portálon lévő szélső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a szélső sötét színű modult. Ezt a
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
Címkék és dátum egyedi elhelyezkedése a blog modulban

Ezen a képen láthatjátok a példa kedvéért a dátum egyedi elhelyezkedését a G-Portál blog moduljában

 

 

Ha használtatok már valaha például fejléces menü kódot vagy hasonló kódokat, amikkel helyzeteket lehet változtatni, akkor a következő leírás nem lesz idegen a számotokra. Kezdjük a dátum elhelyezkedésével. Az alap kód körülbelül így nézhet ki attól függően, hogy milyen stílust adtatok meg neki:

 


div[id*="post_"] .txtmini { /*  dátum a blogban felül  */
color: #FDF2FC;
font-size: 12px;
text-align: center;
background: #D28ECD;
font-weight: normal !important;
font-style: normal !important;
font-family: 'Anaheim', sans-serif;
position: absolute;
width: 100px;
margin-left: 560px !important;
margin-top: -50px !important;
line-height: 15px !important;
padding: 6px;
}

 

Ebben a kódban kiemeltem azt a sort, amit ti is tegyetek bele a dátumotok kódjába, ahhoz, hogy a helyzetén tudjatok változtatni. Azért írtam, hogy ha pl. használtatok már fejléces menü kódot, akkor ott már biztosan találkoztatok a position: absolute kódrésszel. E nélkül nem lehet elmozdítani a dátum helyzetét ennyire. Tehát, ha már szerepel a position sor a kódban, akkor innentől a margin értékekkel lehet játszani, hogy a dátum pontosan ott helyezkedhessen el, ahol nektek szimpi :) A margin értékeket hasonló módon adjátok majd meg, mint ahogy a fenti kódban is látjátok.

 

Ugyanez az eljárás a címkéknél is

 

.blogtags { /* címkék a blogban */
position: absolute;
font-size: 0px !important;
background: transparent;
margin-top: 10px !important;
}
.blogtags a:link, .blogtags a:visited, .blogtags a:hover {
font-size: 14px;
font-family: 'Anaheim', sans-serif !important;
font-weight: normal;
font-style: normal !important;
color: #FDF2FC; !important;
background: transparent;
padding-left: 10px !important;
}

 

Arra azért ügyeljetek, hogy a biztonság kedvéért a legtöbb érték mögé illesszétek be az !important szót is. E nélkül nem biztos, hogy a saját CSS kódotok alkalmazkodik a G-Portálhoz!

lindadesign Hozzászólások
1 208 megtekintés

Hozzászólások