Hírek/cikkek modul szerző, dátum2015.04.12. 09:23, Enma22
Alap kód:
td.list3 { /* hírek/cikkek modul szerző, dátum */
font-size: 8pt;
font-family: verdana;
color: black;
background-color: #f0f0f0;
border-top: #686868 1px solid
}
Ezt a kódot igazából nem nagyon szoktam változtatni, hiszen csak lényegtelen információt tartalmaz. A színe lehet más, valamint esetleg a betűtípusa. Igény szerint keretet is adhattok neki, és hátteret is.
Ez a kód a beton stílusból van, ott van egy fekete vonal a cím és a dátum felett, valamint szürke a háttér. Tehát ha így nézzük, végülis hat az egész címre egy része.
Az én kódomban még van egy ilyen sor is: text-align, amiról már volt szó korábban. Ez a szöveg helyzetét adja meg, nálam right.
Valamint itt is lehet margin, és text-transform parancsokat megadni, ki mit szeretne. Kísérletezni kell, hogy mi hogyan hat, hogyan a legjobb.
Hírek bevezető szövegének megváltoztatása2015.04.11. 15:38, Enma22
Csak finoman!
Íme a kód:
.txtbold { /* blog címe blog pluszban, hírek bevezetője */ font-size: 11px; font-weight: bold}
Egy gond van csak ezzel a kóddal, elég sok helyen változást okoz, ezért maradjunk is ennél a változatnál. Színt lehet rajta nyugodtan változtatni, mérete legyen akkora, amekkorát a modbody részben is megadtál, mivel ez a kód alakítja át a hír bevezető szövegét, miután rámentél a tovább gombra.
Elvileg ez változtatja meg a blogok címét is a BlogPlusz részben, de ezek ugye linkek, így az hat rájuk, ez nem igazán funkcionál, ha azt már átalakítottad. valamint a Blog alcímét is ez adja meg.
Erről beszéltem korábban, hogy sok kódrész van, amit Gportál több helyen is alkalmaz, és ez nem kivédhető.
Akkor alakíts rajta igazán, ha a híreket pont úgy szeretnéd, hogy az máshogy nézzen ki.
Én nem szerettem volna, így nekem egy a méret.
Hírek/cikkek és a blog kinézete2015.04.11. 15:03, Enma22
Legyünk egyediek
Az alap kód ez:
h2 { /* blog, hírek/cikkek fejléc */
font-size:12pt;
font-weight:bold;
color:#396702
}
a:hover h2 { /* blog, hírek/cikkek fejléc ha ráviszed az egeret */
color:#d6421c
}
Keretek2015.04.11. 08:07, Enma22
Táblázatnak, modulnak, szövegnek, bárminek
Korábban nem tértem ki részletesen arra, hogy milyen kereteket tudunk megadni. De nem csak sima solid keretet adhatunk egy képnek, szövegnek, táblázatnak, vagy modulnak, hanem lehet pontozott is, valamint akár lehet mindegyik más színű és méretű is. Én a példámban mindnek egy színt adtam, egy mérettel, de ezeket lehet variálni.
Valamint ha nem akarom mindet külön kiírni, akkor funkcionál ez is:
border: 2px solid #000000;
Kerekítéshez pedig ez is:
border-radius: 25%;
Ide most kénytelen vagyok nektek példákat is betenni, mivel máshogy nem tudom érthetően elmondani.
Modulok alja2015.04.10. 17:17, Enma22
És itt van a záró rész a modulokhoz, ezzel az alját lehet átalakítani, ugyan azok érvényesek rá, mint a többire, szöveget felesleges megadni, mert ugye ott nincs, a többi mehet, ami a modulfejlécnél is.
td.modbottom { /* modul alja */
font-size: 4pt
}
Szintén lehet külön-külön alakítani őket:
.column_side td.modbottom {
.column_main td.modbottom {
Képek esetében szintén a magassághoz a kép méretét kell megadni.
Tehát ha a képed 200 x 80-as méretű, tehát 200 széles, és 80 magas, akkor a height: 80px; lesz.
Ehhez nagyon tényleg nincs mit hozzáfűzni.
Modulok szövegrésze2015.04.10. 17:03, Enma22
Ahová a tartalom kerül
Ez igazából szinte ugyan az, mint a fejlécnél, egyedül kerekítést nem alkalmazunk ekkor, de lehet szintén keretet hozzáadni, és a többi nyalánkságot is.
Alap kód:
td.modbody { /* modul törzse */
font-size: 8pt;
color: black;
background-color: #ffffff;
}
Modulok fejléce2015.04.10. 12:50, Enma22
Oldalsó és középső
Ez az alap kód, de van a GPortalnak egy olyan CSS kódja, amiben van még pár számunkra érdekes sor.
Alap:
td.modtitle { /* modulok fejléce */
padding-left: 4px;
font-size: 9pt;
font-weight: bold;
color: white;
background-color: #686868;
height: 19px
}
Az összes modulra egyformán hat.
Ez pedig a szélső és a középső modulra vonatkozik:
.column_side,
.column_main {
Body rész átalakítása2015.04.10. 08:49, Enma22
Háttér beállítása
Erről a kódrészről beszélünk jelenleg:
body { /* oldal */
background-color: #f0f0f0;
font-family: verdana, tahoma, arial;
margin: 0px
}
|