Stíluslap módosítása

Mindegyik letölthető sablonom tartalmaz egy stiluslap.css nevű fájlt. Ennek módosításával tudod megváltoztatni a weblapod megjelenítését. (A sablont alkotó összes HTML fájl a stiluslap.css-re hivatkozik, tehát ennek módosítása az összes oldalad megjelenítésére hatással lesz.) A leggyakoribb változtatási igények:

A színösszeállítás módosítása

Ez jelenti a legtöbb munkát, két okból is:

• a színek „kikeverése” és egy harmonikus színösszeállítás elérése sok próbálkozással jár,
• egy új színösszeállítás esetén a stíluslap fájl legtöbb sorát módosítanod kell.

A változtatás megkönnyítése érdekében mindegyik sablonhoz készítettem egy segéd-oldalt és egy űrlapot. A következő munkamenetet javasolom:

• Nyomtasd ki az űrlapot.
• A böngészőben nyisd meg a Színvariációk kipróbálása című oldalt.
• Válaszd ki azt az alapbeállítást, amelyik a legközelebb áll az általad tervezett színösszeállításhoz.
• Ha kész a logó fájlod és azt már feltöltötted a webhelyedre, akkor add meg a teljes elérési útját (a protokollal együtt). Például:
  http://www.webkalap.hu/elemek/logo.gif
  (A munkát nem akadályozza, ha nem adsz meg saját logó fájlt, az oldal többi elemének színét ettől függetlenül szabadon tudod módosítani.)
• A segéd-oldalon módosítsd a színeket. Megadhatod a HTML színkódot is és a vörös-zöld-kék komponenseket is. (Ha az egyiket átírod, a másik kód automatikusan módosul.) A segéd-oldalon azonnal láthatod az általad beírt változtatások hatását – ténylegesen megváltozik az oldal megfelelő elemének színe.
• Ha készen vagy a végleges színösszeállítással, akkor az űrlapra jegyezd fel a HTML színkódokat.
• Módosítsd a stiluslap.css fájlt. Az űrlapról le tudod olvasni, hogy mely stílusosztályok melyik tulajdonság értékét kell átírnod.

Figyelem! A segéd-oldal nem menti a változtatásokat. Ha a végleges színösszeállításodat nem tudod egy menetben elkészíteni, akkor az űrlapra jegyezd fel azt az állapotot, ahonnan legközelebb folytatni akarod!

Logó kép méretének módosítása

Ehhez a stíluslapban az alábbi sort kell átírnod:
#logopicture {width: 335px; height: 90px}

Az oldalak szélességének módosítása

A letölthető sablonokban megadott oldalszélesség megfelelő a 2010-ben használt monitorokon, ha egy weblap elsősorban szöveget tartalmaz. (Nagy oldalszélesség beállítása hosszú sorokat eredményezne a szövegben, ami nehézzé tenné az olvasást.) A HD monitorok (1980 pixel szélesek) vagy később az ultra HD képernyők elterjedése után a mostani értékeken valószínűleg változtatni kell. Most is megfontolandó nagyobb szélesség beállítása, ha a weblapod többnyire képeket tartalmaz. (2010-ben a felhasználók jellemző monitor felbontása az 1000 - 1600 pixel szélességű tartományba esett.)

A sablonokon az elemek (menü, tartalom, stb.) pozicionálása egy háromoszlopos táblázat segítségével történik. Az oldal szélességének módosításához a stiluslap.css fájlban az alábbi stílusosztályokban megadott pixel értékeket kell módosítanod:
.colbalures {width:...px}
.colszovegmezo {width:...px}
.coljobbures {width:...px}

Fontos tudnivaló! A böngészők meglehetősen lazán kezelik az általad megadott szélesség értékeket. Ha a felhasználó képernyőjére nem fér ki, akkor keskenyebbre veszik a weblapodat – feltéve, ha úgy is el tudják helyezni a tartalmadat. Ha pedig nem tudják belezsúfolni az általad megadott tartalmat az általad megadott szélességbe, akkor szélesebb formátumban fog megjelenni a weblapod. Ezért (is) fontos, hogy különböző képességű megjelenítő eszközökön teszteld a kész weblapodat.

Betűtípus módosítása

A stíluslapon az alábbi részt kell módosítanod:
body {…. font-family: Verdana, Tahoma, Arial, ….
Több betűtípus is megadható, a böngésző a listából az első olyat fogja kiválasztani, amit ismer.

Betűnagyság módosítása

Ehhez a font-size tulajdonságot kell megváltoztatnod, ami – különböző értékekkel – az alábbi stílusosztályokban szerepel:
.fomenu, .fomenukiv, body, h1, h2
Ahol nincs megadva semmi, például a szövegmező is ilyen, azok a body betűnagyságát öröklik.

Nagyobb tér a szöveg és a beillesztett fénykép között

Növeld meg az általam 5 pixelnek megadott értéket:
img {….margin: 5px}