Cikkajánló
A költözésem óta a Coppermine Galéria témák menüpont üresen maradt. De most volt egy kis időm és három darab régebbi sablont a G-Portálos oldalamról áthoztam ide. Kicsit alakítottam rajtuk,
Hoztam még egy .psd fejlécet és a hozzá gyűjtött .png képeket is feltöltöttem a galériába. A fejléc a szokásos helyen tölthető le: PSD – Photoshop fejlécek Itt pedig meg
Jajj, de nagyon régen nem frissítettem már. Néha időm, néha meg kedvem nincsen hozzá, de most hoztam kettő darab Coppermine galéria témát. Az egyik Alicia Vikaner-rel készült, a másik
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
2015. május. 09.
G-Portálos CSS kódok részletezése: body

Elindítom azt a cikksorozatot, amiben külön-külön minden CSS kódrészről leírom, hogy micsoda, mire való és mi mindenre hathat a G-Portálon. Belinkelem mindegyik cikkhez azokat a G-Portálos leírásokat, amik már készen vannak és az adott cikkhez tartozhatnak.
 
Elsőnek a body CSS kódrésszel kezdünk. Itt adható meg például az oldalatok háttérszíne vagy szín helyett háttérkép is beilleszthető. A fejléchátteret is itt kell megadni, ha olyan fejlécet szeretnétek, ami majdnem minden böngészőben végigér. Az alsó gögetősávot is a body-n belül lehet eltüntetni. Betűtípus és betűméret megadása is ajánlatos, mert az olyan betűket, ami netalántán egyik-másik CSS kódrészben sincsen benne a G-Portálon, akkor a body-ban megadott stílust fogja alkalmazni. Na, de nézzük a kódot és a részletes leírást hozzá:
 

body {
background: url(/images/fejlec-hatter.png), url(/images/hatter.png);
background-position: center top, center;
background-repeat: no-repeat, repeat;
background-attachment: fix;
cursor: default;
font-family: Arial;
font-size: 14px;
color: #585858;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
}

 
A háttérre vonatkozó rész:
 

  • background: url(/images/fejlec-hatter.png), url(/images/hatter.png); – így adjátok meg ha fejléchátteret és háttérképet szeretnétek az oldalon. A sorrend is fontos. A fejlécháttér megy előre, aztán a háttérkép URL címe. Ha csak háttérszínt szeretnétek például, akkor a sor így néz ki: background: #000000;
  • background-position: center top, center; – a háttérképek pozíciója. Ha fejlécháttér is van, akkor az minden esetben a center top, azaz középen és felül helyezkedik el. Ezért nem fog elcsúszni egy böngészőben sem a fejléc. A hátteret én center-re szoktam állítani. Persze attól is függ, hogy milyen háttér van. A background-position rész nem kell akkor, ha csak háttérszínt használsz.
  • background-repeat: no-repeat, repeat; – itt azt állítjátok be, hogy a háttér ismétlődjön-e valahogyan vagy sem. Jelen esetben ez megint úgy van most megírva, hogy az első rész (no-repeat) a fejlécháttérre vonatkozik. Azt ugye nem ismételjük, mert azt akarjuk, hogy csak felül a lap tetején jelenjen meg. A második érték a repeat- ez kellhet akkor, ha pl. csak háttérszínt adtok meg, de akkor is, ha háttérképet. Persze a repeat beállítás itt sem törvényszerű, mert a háttértől is függ, hogy mit fogtok oda írni.
  • A hátteres beállításokról még részletesebben itt olvashattok: Több háttér oldaladnakHáttér nem csúszik el Fejléc vagy mögötte a háttér beállítása
  • background-attachment: fix; – a háttér nem gördül, amikor lefelé böngésztek az oldalon. Ha a scroll-t használjátok a fix helyett, akkor a háttér is gördül böngészés közben.

 

 
Kurzor kinétete
 

  • A kurzor kinézete alapból egy nyilacska, de ha linkre viszitek az egeret, akkor átvált egy mutató ujjú kézre. Ebben a kódban ez most cursor: default; ami azt jelenti, hogy nyilacska. És ez megváltoztatható úgy, hogy a default helyett mást írtok oda. Példákat ezen az oldalon rengeteget találtok névvel és demóval együtt: CSS cursor
  • De a kurzort ti magatok teljesen egyedivé is alakíthatjátok. Erről bővebben itt találtok leírást:  Javascript kurzorok

 
Betűstílus
 
Alább látható, hogy egy szövegnek mi mindent lehet megadni. Azt hiszem a legtöbb mindent felsoroltam, bár lehet kimaradt néhány dolog, de a fontosak azok itt vannak. Kiemeltem a felsorolásban azokat, amiket a body-ban érdemes megadni. A többit a G-Portálon más CSS kódrészekben ajánlatos majd alkalmazni, de amikor majd azokról lesz szó, úgy is leírom, hogy mit hol ;)
 

  • font-family: Arial; – ezzel a betűtípussal fog látszódni a szöveg a G-Portálon
  • font-size: 14px; – a betűtípus nagysága.
  • color: #585858; – a szöveg színe
  • text-decoration: none; – ez azt jelenti, hogy az adott szövegrész nincs aláhúzva. A none helyett az underline is alkalmazható, (de nem a body részben), ami azt jelenti, hogy az adott rész alá lesz húzva. Használható pl. kiemeléseknél vagy linkeknél, stb.
  • text-align: justify; – a tartalom sorkizárt lesz. A body-ban nem annyira javasolt, inkább a szélső és középső modulokban. a justify helyére lehet még írni, hogy left, center vagy right, ami értelemszerűen a bal, közép vagy jobb oldalt jelenti. Vagy is a szöveg vagy modulcím balra, középre vagy jobbra rendezett lehet.
  • text-shadow: 1px 1px 1px #000000; – ezzel árnyékot lehet adni a szövegnek. De azért ne essünk vele túlzásba, mert a túl sötét és túl nagy árnyékok botrányosan elcsúnyítják az oldal kinézetét plusz a tartalom is nehezen olvasható tőle. Csak mértékkel használjátok.
  • font-weight: normal; – ez a betű olyan stílusa, amivel normálisan írsz. De ez helyett lehet a bold – ami megvastagítja a szöveget vagy lehet az italic, ami dőltté teszi a szöveget. A body-ban a normal javasolt. A bold és italic pl. mehet kiemelésekhez vagy linkekhez.
  • text-transform:; uppercase; – ez most úgy van beállítva, hogy minden szó nagy nyomtatott betű. A body-ban egyáltalán nem kell a text-transform-ot használni, inkább kiemelésekhez vagy linkekhez. Az uppercase helyett írható meg a lowercase, amitől minden betű kisbetű lesz, vagy a capitalize, amiben minden szónak az első betűje nagy betű. Példát itt találtok: text-transform
  • letter-spacing: 2px; – a betűk közötti távolság. Egyáltalán nem kötelező a használata a bodyban. Javasolt a modulfejlécekhez inkább.
  • line-height: 20px; – a sorok közötti távolság. Ennek a használata javasolt, de nem azért, hogy minél közelebb vigyétek a sorokat egymáshoz. Éppen ellenkezőleg. Arra használjátok, hogy kicsit távolítsátok el a sorokat egymástól a könnyebb olvashatóság érdekében.
  • word-spacing: 5px; – szavak közötti távolság. Egyáltalán nem kötelező a használata.
  • A szövegszerkesztéssel kapcsolatban kettő cikk is készült már, amiket itt olvashattok: Szövegszerkesztés weboldalonBetűtípus használata weboldalon

 
Görgetősávok eltüntetése
 
ez a két sor szolgál arra, hogy a lap alján ne legyen görgetősáv.  De ha valakit nem zavar alul, akkor nem kell használni ezt a kódrészt.
 
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;

Kapcsolódó bejegyzések

lindadesign
1 704 megtekintés

Előző, következő cikk

Leighton Meester egész sablon

Készítettem a napokban is egy teljes kinézetet, bár most ezt nem kódoltam be, mert ahhoz már nem volt kedvem, így simán Photoshop formátumban tölthető le és használható fel majdnem bármilyen oldalon ;) Akár G-Portálon vagy WordPress sablonak, de sima

G-Portálos CSS kódok részletezése: site

2. rész   Ebben a részben a .site kódrészről írok kicsit bővebben. Maga a kód így néz ki   .site { /* oldal szélessége */ width: 1018px; }   Általában mást nem is kell itt megadni, csak az oldal

 

Hozzászólások