Táblázatok átalakítása2015.05.27. 15:21, Enma22
Itt igazából adottak a kódok, lehet CSS-be is beletenni, vagy csak abba a modulba, ahol éppen használni kívánod, és akkor minden egyes táblázatnak új kódot tudsz megadni.
Ha modulon belül szerkeszted, akkor a Forráskódot használhatod hozzá, nem kell külön kódnézetre váltani ezért, így azonnal látod az eredményt.
Ha készítesz egy táblázatot a szerkesztőben, és forráskódra váltasz, akkor ezt láthatod:
Ez a táblázat:
Ez pedig a kódja:
<table border="1" cellpadding="1" cellspacing="1" style="width: 400px;">
<tbody>
<tr>
<td>
egyes</td>
<td>
kettes</td>
</tr>
</tbody>
</table>
Tovább és Mit szólsz hozzá a hírekben2015.05.19. 16:37, Enma22
Sajnos csak együtt működik!
A kódok mind a két szövegre hatnak, hiszen txtnormal stílusúak. Ahhoz, hogy ez csak a középső modulban működjön ezt kell megadni:
.column_main .txtnormal a {
}
De ha nem raksz "a" betűt, akkor a sima szöveget is tudod vele alakítani, ez azonban úgy tudom hat magára a cikk szövegére is, nem csak a link nélküli tartalmakra (előző cikk, stb).
Szóval úgy használjátok, ahogy a többit, természetesen hover is megadható:
.column_main .txtnormal a:hover {
}
És ez érvényes fordítva is, ha a külső modulok txtnormálos szövegeit akarod átalakítani, pl a Blogplusz archívum részét, Ugrás a blogra, Oldal tetejére szövegeket.
Akkor .column_side .txtnormal a {
}
Ki hogyan akarja variálni.
Hat még az egyszerű modulokban a szerkesztés alatt a gombokra (csak te látod) és a képtár modulra is!
Vissza a bloghoz kinézete2015.05.19. 15:39, Enma22
Szinte teljesen ugyan az, mint a Mit szólsz hozzá, csak más funkciót lát el, nálam ugyan olyan a stílusa, mint annak. De aki akarja, az variálhat rajta.
Alap kód:
td.blogback2blog {
background-color: #EAEAE8;
-moz-border-radius: 0em 1em 0em 1em;
-webkit-border-radius: 0em 1em 0em 1em;
padding-right: 20px;}
Mit szólsz hozzá kinézete2015.05.19. 15:33, Enma22
Csak a blogban működik!
A Mit szólsz hozzá? egy link, ami a kommentekhez vezet, és ennek is lehet saját stílust adni. Alap kód:
td.blogcommentcount {
background-color: #EAEAE8;
-moz-border-radius: 0em 1em 0em 1em;
-webkit-border-radius: 0em 1em 0em 1em;
padding-right: 20px;}
Ezt használom a saját oldalamon jelenleg. Úgy alakítod ahogy tetszik, a már korábban leírt kódokkal tudod variálni. Amúgy egy list1 nevű kód is hat még rá, de azzal jelenleg nem foglalkoztam.
CSS fájl létrehozása2015.05.13. 10:40, Enma22
Itt most bemutatom, hogyan lehet egyszerűbben, egy CSS fájllal megoldani a dizájnolást.
Ez azért is jó, mert nem kell egy egész kódsort a modulodban lapozgatni, hanem készíthetsz egy fájlt is, és azt a portálodra feltöltve tudod használni. Én a Szerkeszthető láblécbe tettem, és a hiedelmekkel ellentétben nálam teljesen áttetsző a modul. Olvastam már valahol, hogy ezt külön be kell állítani egy kóddal, mert akkor olyan lesz a háttér, mint a többi modulé. Nálam sem itt, sem a baba oldalon nem lett olyan színű, sőt transparent a háttér mindenféle külön beállítás nélkül.
Ha jól néztem ez azért van, mert a kis négyzetekből hiányzik a pipa, vagyis eleve úgy van beállítva, hogy ne legyen háttere és fejléce.
Képekkel illusztrálom nektek, hogyan is kell csinálni.
Helyesírás ellenőrzés2015.05.12. 16:16, Enma22
Sajnos szerkesztő módban valamiért nem működik a Chrome, vagy egyéb böngésző helyesírás ellenőrzője, és mikor gépelünk nem látjuk a gyors írásból fakadó esetleges hibáinkat.
Erre van egy tippem, ami nem kód, de azért ide írom be.
Ha befejeztük a gépelést akkor lépjünk át FORRÁSKÓD nézetbe, kattintsunk bele a szövegbe, és láss csudát, máris megjelennek a piros hullámvonalak. Megtörténik a helyesírás ellenőrzés, lehet javítani a szöveget ott helyben, jobb klikk hatására tippeket is kapunk. Ha ezzel végeztünk, visszatérhetünk szerkesztő módba, és menthetjük írásunkat.
Naptár átalakítása2015.05.12. 13:34, Enma22
Ezt nagyon kevesen használják, pedig hasznos tud lenni, főleg ha egy eseménynaptárt is adunk hozzá. Abban ugyanis megjelennek a felvitt adatok, és szépen ki is lehet őket fejteni. Én a babás oldalamon az időpontjaimat közöltem benne, amik lassan majd a baba időpontjaira fognak átváltani, ugyanis nekem már nem hiszem hogy lesz tennivalóm a szülés után, a babát kell majd ide-oda elhordani.
A kód hasonló a többihez, én igazából csak a színeken variáltam.
Idézet és elválasztóvonal2015.05.08. 17:16, Enma22
Ebben a cikkben mindjárt kettő kódot is közlök veletek, amiket használat után magatok is láthattok a forráskód segítségével, csak akkor még html formában. Nekünk ugye CSS kell, ahhoz, hogy mind ugyan úgy nézzen ki, ha használod.
Példa van rájuk a babás oldalamon!
hr { /* elválasztóvonal */
}
blockquote { /* idézet */
}
Egérmutatók2015.05.04. 15:58, Enma22
Vannak oldalak, ahol saját egérmutató jelenik meg, de sajnos nem mindegy, hogy milyen formátumú képet adunk meg cursornak, így nem mindegyik böngésző jeleníti meg. Így sajnálatunkra maradnak most az egyszerűbb cursorok, melyek tuti megjelennek mindegyik böngészőben.
Ezeket hozzá adhatod a body részhez, vagy a linkekhez. Kinek mi tetszik. Egy ilyen sort kell csak beilleszteni:
cursor: auto;
Az osztályokról röviden2015.05.04. 12:17, Enma22
Ezt elkezdtem ugyan bemutatni, de nem írtam róla semmit.
A class osztályt jelent, amivel egy-egy kódrészt tudsz egyedivé varázsolni, de ezeket általában oda rakjuk, ahol szeretnénk hogy hasson, vagyis abba a modulba, ahol használom éppen.
De semmi akadálya nincsen annak, hogy ezek a CSS kódodba kerüljenek bele, főleg táblázat esetében, így az összes tábla úgy fog kinézni, és nem kell a kódot minden egyes modulban feltűntetni, ahol a táblázatot használni szeretnéd.
Ugyan ez vonatkozik több kisebb elemre is, melyekre majd kitérek még, ilyen az idézet, az elválasztóvonal, stb. Igazából aminek van HTML kódja, az mind átalakítható CSS-sel, vagy egyedi class kóddal (ami amúgy egy mini CSS lesz).
|