Képeffektek2015.04.29. 10:47, Enma22
A képeknek adhatunk a szokásos effekteken kívül (áttetszőség, keret, méret) egyéb dizájnokat is. Ezeket alkalmazhatjuk önmagukban, vagy egy hover (ráviszem az egeret) effekttel kombinálva. Akár a linkelt képeken is lehet alkalmazni.
De általában minden képre hatnak, ha nincsen külön besorolásuk (class).
Egy-egy szövegrész átalakítása2015.04.21. 14:19, Enma22
Lásd a menümet
Ez a kód, amit leírok most, majd később több helyen is alkalmazható lesz, most csak a szöveghez írom le, amihez példát is találtok majd, az ugyanis nem a linkhez kötődik, hanem külön van átalakítva.
Ehhez a kódhoz a KÓDNÉZETET kell majd alkalmazni!
Először megírjátok a szöveget, amit szeretnétek, meg is lehet formázni, és egy elküld gomb után átválthattok kódnézetbe. Ha előtte váltatok át, akkor a szöveg törlődik. Vagy másik megoldás a Forráskód. Én azért nem szeretem, mert plusz sorokat szokott betenni az átváltásoknál.
Csoportosítás2015.04.20. 16:34, Enma22
Vagyis az egyes kódrészek kicsit összeszedve
Ebben a cikkben összeszedem nektek a kódrészeket, melyeket eddig használtunk az egyes részek átalakításához, hogy kicsit átláthatóbb legyen a dolog.
Mivel most az összes kód a fejlécek részben található, így ezt a cikket majd kiemelem a menübe, így mindig elérhető lesz, ha csak egy-egy részt szeretnétek megnézni.
A keretek, vagyis a border az megvan külön cikkben, ezeket is ugye hozzá lehet adni egy-egy részhez.
Bővebben link kinézete2015.04.17. 11:54, Enma22
Ez az alap kód:
.blogmorelink {
}
.blogmorelink a:link {
}
.blogmorelink a:hover {
}
Ebbe tudunk egyéb dolgot is beletenni, példa rá a Bővebben alatt.
Kisebb szövegrészek2015.04.14. 16:18, Enma22
.txt kódok
Az alap kódok ezek:
.txtnormal { /* általános szöveg, pl. hírek */
font-size: 11px;
font-weight: none;}
.txtbold { /* blog címe blog pluszban, hírek bevezetője */
font-size: 11px;
font-weight: bold}
.txtmini { /* dátum, szerző blog pluszban*/
font-size: 10px;
font-weight: none}
Mindegyik több szövegre is hat az oldalon!
Gombok, egyebek2015.04.13. 16:06, Enma22
Az alap kód ez:
input, button, select, textarea { /* gombok, egyéb */
border: #686868 1px solid;
font-weight: normal;
font-size: 10px;
color: black;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #f0f0f0
}
A számlálóban hat, valamint a bejelentkezésnél, a textarea az a rész, ahová írod a címeket, kódnézetben a kódot. Nekem, mivel nem vettem külön-külön ezeket a kódokat, most mind lila.
Linkek2015.04.13. 11:41, Enma22
Finoman kell bánni az effektekkel
Alap kódok:
a:link, a:visited, a.menu:link, a.menu:visited { /* linkek */
font-size: 8pt;
color: #000099;
text-decoration: none
}
a:hover, a.menu:hover, a.menu:active { /* link ha ráviszem az egeret, aktív link */
font-size: 8pt;
color: #6699ff;
text-decoration: underline
}
a.menu az a menüre vonatkozik, ha van ilyen modulod, de ha már egyedi akarsz lenni, akkor gondolom nincsen. Mindegy, bajt nem csinálsz vele, ha otthagyod.
Blog Plusz fejlécek2015.04.12. 09:49, Enma22
Friss bejegyzés alakítása
Az alap kód ez lenne:
td.listheader { /* blog plusz */
font-size: 8pt;
font-weight: bold;
color: #f0f0f0;
background-color: #686868
}
Ez a Blog Pluszban található fejléceket alakítja át, így a Friss bejegyzések, Friss hozzászólások és az Archívum részt. Valamint hatással van hozzászólás írásnál is az ott lévő fejlécekre, pl. a Még nincs hozzászólás részre.
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.
|
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum