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!

1 850 megtekintés