Legyen színesebb az lmv!

zapf Pén, 2011-08-12 10:36

Az lmv.hu-n lehetőség van a blogok kinézetének átalakítására. Nem csak a fejléc képet cserélhetitek ki, hanem minden egyes elem szöveg színét, háttérszínét, háttérképét, keretét, nagyságát és még sok más tulajdonságát megváltoztathatjátok. Ennek talán leglátványosabb példája a Rhythms of Resistance blogja. Sokan talán azért nem élnek ezzel a lehetőséggel, mert nem tudják, hogyan kell. így hát az lmv.hu nem túl színes, minden blog nagyjából egyforma, még az egyedi fejlécek is ritkák. Ezzel a kis útmutatóval szeretném a lehető legegyszerűbben bemutatni, hogyan kell egy blognak új ruhát adni.

0. Cseréld ki a fejléc képet!

A 'theme' (=smink) fül alatt, a 'logo'-nál (=fejléc) fel lehet tölteni fejléc képet, ami egy 960 pixel szélességű png fájl legyen. Ilyen képet tudsz csinálni akár a gimppel is.

1. Szerkeszd a css-t!

A másik fül ugyanitt a 'general' nevet viseli, itt lehet szerkeszteni az ún. css-t. A további pontjaink mind erre vonatkoznak. Itt ugyanis egy üres mezőt találunk, amibe nekünk kellene beírni valami szöveget. De mit?

A böngésződ szöveget tölt le az interneten keresztül

Amiért mégsem egyszerű szöveget látsz: a szövegben speciális jelzések, ún. tagek vannak, amelyeket a böngésző értelmez, így struktúrát ad az egész weboldalnak. Például:

<h1></h1> <h2></h2> <h3></h3> — fejezetcímek, alcímek (header)
<p> valami szöveg.... </p> — bekezdés (paragraph)
<div> </div> — egy rész, egy doboz (division)
<a> </a> — a link szövege
<ul> </ul> — lista (unnumerated list)
<li> — lista eleme (list item)
<body> </body> — az egész weboldal

... és létezik még sok más tag, itt van egy részletes lista.
Ezt az ún. jelölőnyelvet, amely megadja a weboldalak struktúráját, html-nek nevezzük.

Minden elemnek lehet egyedi azonosítója, és/vagy osztálya (utóbbiból akár több is), ahová tartozik, például:

<div id="azonosito" class="osztaly"> </div>

egy külön szövegfájl, az ún. 'css', amit a bönngésző letölt és feldolgoz, tartalmazza az egyes elemek stílusát. Az lmv.hu esetében éppen a css fájl szerkesztésére van lehetőségünk ez az, amit beírhatunk a 'general' fülön található üres szövegmezőbe. Amit beírsz, az hozzáadódik és felülírja az eredeti css-t.

2. Hivatkozz az azonosítókra és az osztályokra!

A css-ben azonosítójuk (kettős kereszttel) és az osztályuk (ponttal) segítségével hivatkozunk a html-ben létező elemekre:

#azonosito{ /* arra a div-re vonatkozik, amelyiknél id="azonosito" */
background-color: #441111; /* a háttérszín legyen #441111 */
color: #FFFFFF; /* a betűszín legyen #FFFFFF */
height: 300px; /* a div magassága 300 pixel */
width: 100%; /* a szélessége 100 % (kitölti a helyet) */
font-family: Tahoma, Arial; /* a betűcsaládja Tahoma, ha az nincs, akkor Arial */
padding: 5px; /* a szegély és a tartalom közt 5 pixel távolság legyen */
margin: 0px; /* a szegély és a külvilág közt 0 pixel táv legyen */
overflow: auto; /* legyen görgetősáv, ha túl sok tartalom van a div-ben */
border-style: solid; /* a szegély folyamatos vonal */
border-width: 1px; /* a szegély 1 pixel vastag */
float: left; /* a div balra vonzódjon, tehát inkább a testvére alá
kerüljön, mint tőle jobbra */
}

.osztaly{
/* ugyanígy meg lehet adni osztályok tulajdonságait */
}

Itt van egy teljes lista arról, hogy milyen típusú tageknek milyen tulajdonságait tudjuk megadni a css-ben: http://www.w3schools.com/cssref/default.asp

3. Egyes tulajdonságok öröklődnek.

Ha a html-ben (abban a szövegben, ami a böngésződ számára leírja az oldal szerkezetét):

<body>
<div id="egydoboz">
</div>
</body>

És ez van a css-ben (az a fájl, ami megadja az elemek stílusát, ezt szerkeszthetjük):

body{
background-color: #FF9703;
font-family: Lucida Grande, Helvetica;
}

Ebben az esetben az 'egydoboz' azonosítójú div-nek is Lucida lesz a betűcsaládja, és #FF9703 a háttérszíne, mivel nem adtunk meg mást: ilyenkor megörökli a szülőjétől, ami ebben az esetben a <body>, azaz az egész weboldal.

4. Keverj színeket!

A színeket rgb-kóddal lehet megadni, ami annyit tesz, hogy red-green-blue színekből keverjük ki. Mindehárom alapszín arányát 00-tól FF-ig terjedő 16-os számrendszer beli számmal lehet megadni, tehát pl. a #FF0000 azt jelenti, hogy annyi piros, amennyi csak lehet, és 0 zöld, illetve 0 kék. Ez egy erős piros lesz. A színkereső segít!

Néhány színt névvel is megadhatsz, a nevüket idézőjelbe téve, pl:

color: "DeepPink";

5. De ne véletlenszerűen!

A színek kiválasztásához érdemes színköröket használni, melyekről előre meghatározott módszerekkel pár összeillő színt lehet felcsípni. Legegyszerűbben talán ezen a weboldalon.

5. Használj firebugot az azonosítók és osztályok kibogarászásához!

Ha megnyitod az lmv.hu-s blogodat a firefoxban, a ctrl+U billentyűkombinációval megnézheted az oldal forráskódját. Kicsit nehéz keresgélni benne, ezért sokkal praktikusabb, ha telepíted a firebug kiegészítőt, így az egyes elemekre kattintva kiderül azok azonosítója, osztálya, illetve hogy milyen css határozza meg a stílusukat.
A firebug letölthető innen.

A 'click an element on the page to inspect' gombra kattintva, kiválaszthatom pl. a blogban a cikkek címeit, és a 'style' fülön látom, hogy a következő css darabka határozza meg a kinézetüket:

.node h2 a, .main, .content h1{
color: #CC3333;
font-size: 19px;
font-weight: 500;
margin-top: 10px;
}

ha beírok a blog css-ébe valami mást ezekre az elemekre vonatkozóan:

.node h2 a, .main, .content h1{
color: #CC0066;
font-size: 14px;
font-weight: 300;
margin-top: 5px;
}

...akkor máshogy fognak kinézni a címek. Ez egyben egy példa arra, hogyan változtatható meg bármilyen elemnek a kinézete. A blog átöltöztetése ilyen lépések sorozatából áll. Mit jelentenek ezek a kódok? A 'node' nevű osztályba (a pont = osztály) tartozó elemek másodrendű fejezetcímeiben (h2 = header 2) található linkekre (a), valamint a 'main' osztályú elemek minden részére, illetve a 'content' osztályú elemek elsőrendű fejezetcímeire (h1) vonatkozik ez a stílus. A kapcsos zárójelek között található rész pedig leírja, hogy milyen is legyen: a 'color' a betűszínt, a 'font-size' a betűméretet, a 'font-weight' a betű testességét, a 'margin-top' pedig a doboz tetején a szegély és a külső környezet közti távolságot határozza meg.

6. Nem csak a színeket lehet megváltoztatni!

Hanem a szegélyeket, a margók szélességét, a betűtípusokat, betűméreteket. Ezen kívül minden doboznak lehet háttérképe is, nem csak háttérszíne. Ehhez előbb fel kell töltened a kívánt képet.

7. Ürítsd ki a gyorsítótárat!

Ha meg szeretnéd nézni a változtatásaid eredményét, ki kell ürítened a böngésződ gyorsítótárát. Mivel a böngészők nem fogják maguktól újból letölteni azt a css fájlt, amit aznap már egyszer letöltöttek, rá kell kényszeríteni őket: a firefoxban ezt így lehet: Tools ---> Clear recent history ---> Cache ---> Clear now
Enélkül előfordul, hogy a változtatásunk nem jelenik meg.

8. Mi van, ha mégsem azt látom, amit szeretnék?

Ha így sem jelenik meg a várt változtatás, akkor nem a megfelelő elem tulajdonságait változtattuk meg. Van valamilyen más bejegyzés a css-ben, egy alacsonyabb öröklődési szinten lévő elemre, vagy ugyanarra az osztályra valami más dolog. Meg kell keresni, és ez bizony akár 10 percig tartó szívás is lehet.

9. Egy gyors módszer...

Ha még sosem foglalkoztál ilyesmivel, akkor lehet, hogy ez alapján akár több órába is tellhet, míg a blogod kinézetét átszabod. Beszúrom ide alulra a RoR blogjának egyedi css-ét, ami kissé kaotikus, de a színkódok átírásával akár pár perc alatt lehet egyedi színsémát adni egy blognak. Legegyszerűbben úgy tudod átírni a színkódokat, hogy bemásolod az itt adott példát mondjuk notepad-be, és ctrl+H-val ki tudod cserélni az összes színkódot egyszerre. Ez a színséma csupán 3 színt használ, feketét (#000000), fehéret (#FFFFFF) és rózsaszínt (#FB22AA).

10. Ne add fel! ;)

Ha nem sikerül valami, kérdezz bátran itt kommentben! Megpróbáljuk megtalálni a megoldást, és ha sikerül, a többiek is tanulnak belőle.

Kellemes színezgetést és dizájnolást mindenkinek! Legyen színesebb az lmv!

### És akkor itt jön a RoR blogjának css kódja: ###

A:link{color:#fb22aa;}
A:visited{color:#fb22aa;}
A:active{color:#fb22aa;}
A:hover{color:#fb22aa;}
h1{color:#fb22aa;}
h2{color:#fb22aa;}
h3{color:#fb22aa;}
ul{color:#fb22aa;}
.block{
color:#fb22aa;
background-color:#000000;
}
#breadcrumb{
background-color:#000000;
color:#ffffff;
}
.content a{
color:#fb22aa;
}
.content li a{
color:#fb22aa;
}
.content li{
color:#fb22aa;
}
.content ul a{
color:#fb22aa;
}
.content ul{
color:#fb22aa;
}
.content{
background-color:#000000;
color:#fb22aa;
}
.block-sapi_block{
color:#fb22aa;
background-color:#000000;
}
.block-sapi_block h2{
color:#fffff;
}

.block-sapi_block a{
color:#fffff;
}
.block-sapi_block a:hover{
color:#fffff;
}
.node a:hover{
color:#fb22aa;
}
.node a:visited{
color:#fb22aa;
}
.clear-block a{
color:#fb22aa;
}
.node h2 a:hover{
color:#fb22aa;
}
.node h2 a{
color:#fb22aa;
}
.node h2 a:visited{
color:#fb22aa;
}
.clear-block h2 a:visited{
color:#fb22aa;
}
.clear-block h2 a{
color:#fb22aa;
}
.clear-block h2 a:hover{
color:#fb22aa;
}
.block-sapi_block ul{
color:#fb22aa;
}
.block-sapi_block li{
color:#fb22aa;
}
.content li{
color:#fb22aa;
background-color:#000000;
}
#page-title{
color:#fb22aa;
background-color:#000000;
}
.title{
color:#fb22aa;
background-color:#000000;
}
#block-og-0 h2 a{background-color:#000000;color:#fb22aa;}
#block-og-0 h2{background-color:#000000;color:#fb22aa;}
#search-box h1,h2,h3,h4,h5,h6{background-color:#000000;color:#CC3333;}

#content-content{
background-color:#000000;
color:#ffffff;
}
.clear-block{
background-color:#000000;
color:#ffffff;
}
.column{
background-color:#000000;
color:#ffffff;
}
#main{
background-color:#000000;
color:#ffffff;
}
#container{
background-color:#000000; background-image:none;
color:#ffffff;
}
#logo-title{
background-color:#000000;
color:#ffffff;
}
#header{
background-color:#000000;
color:#ffffff;
}
#page{
background-color:#000000;
color:#ffffff;
}
.menu{
background-color:#000000;
color:#ffffff;
}
#navigation{
background-color:#000000; background-image:none;
color:#ffffff;
}
#primary{
background-color:#000000;
color:#ffffff;
}
#primary a{
background-color:#000000;
color:#ffffff;
}
#primary a:hover{
background-color:#fb22aa;
color:#ffffff;
}
#primary a:visited{
background-color:#000000;
color:#ffffff;
}
#main-squeeze{
background-color:#000000;
color:#ffffff;
}
.container-inline{
background-color:#000000;
color:#ffffff;
}
#search{
background-color:#000000;
background-image:none;
color:#ffffff;
}
.withprimary{
background-color:#000000;
color:#ffffff;
}
.block h2{
color:#ffffff;
}
.block a{
color:#ffffff;
}
.block a:hover{
color:#ffffff;
}
.links a{
color:#fffff;
background-color:#000000;
}
.links a:hover{
color:#fffff;
background-color:#000000;
}

.comment_comments a{
color:#fffff;
background-color:#000000;
}
.comment_comments a:hover{
color:#fffff;
background-color:#000000;
}

.links ul a{
color:#fffff;
background-color:#000000;
}
.links li a{
color:#fffff;
}
.box h2{
color:#fb22aa;
}
.tabs{
background-color:#000000;
color:#ffffff;
}
.form-required{
color:#fb22aa;
}
.terms-inline li a{
background-color:#fb22aa;
color:#ffffff;
}
.terms a{
background-color:#fb22aa;
color:#ffffff;
}

li.statistics_counter{
background-color:#000000;
color:#ffffff;
}

.terms ul.links li{display:block;float:left;background-image:none;background-color:#fb22aa;color:#ffffff;}
.terms ul.links li a{color:#ffffff;background-color:#fb22aa;}

body{background-color:#333333; background-image:none;}

#footer{background-color:transparent;background-image:none;}

#search-box .form-submit{border:0;background-image:none;background-color:#fb22aa;}
.form-submit{border:0;background-image:none;background-color:#fb22aa;color:#ffffff;}
#edit-submit-1{border:0;background-image:none;background-color:#fb22aa;}
#edit-search-theme-form-1-wrapper{border:0;background-image:none;background-color:#fb22aa;}
#search-box{border:0;background-image:none;background-color:#000000;}

.sidebar ul li a{color:#fb22aa;}

li.node_read_more{background-image:url(/sites/all/themes/lmv_theme/images/icons/read-more.png);color:#ffffff;background-color:#000000;}

li.node_read_more a{color:#ffffff;background-color:#000000;}

#block-og-0 h2 a{
color:#ffffff;
}

#block-og-0 h2 a:hover{
color:#ffffff;
}

.form-textarea{
background:#333333;
color:#fb22aa;
}

.preview .comment {
background-color: #000000;
}

.comment-unpublished {
background-color: #000000;
}

.page-node .comment {
background-color: #000000;
border-top: 4px double #fb22aa;
color: #333333;
margin: 8px 0 4px;
padding: 2px 4px 8px;
}

.page-node .comment.comment-new {
background-color: #333333;
}

li.comment_edit a{
color:#ffffff;
background-color:transparent;
}
li.comment_reply a{
color:#ffffff;
background-color:transparent;
}
li.comment_edit a:hover{
color:#ffffff;
background-color:transparent;
}
li.comment_reply a:hover{
color:#ffffff;
background-color:transparent;
}
.submitted{
color:#ffffff;
background-color:transparent;
}

.comment h3{
background-color:transparent;
}
.new{
color:#ffffff;
background-color:transparent;
font-size:450%;
}

.form-text{
background:#333333;
color:#fb22aa;
}

.help{
background-color:#000000;
}
.help p{
background-color:#000000;
}

#container p{
background-color:#000000;
}

.clear-block p{
background-color:#000000;
}