Átalakulás

Úgy döntöttem (miszerint, az a véleményem), hogy újul az oldalam kinézete címe. A sötétre sikerült korábbi kinézetet világosabbra cserélem, ugyanakkor eleflejtem a 800×600-at és 1024×768-as felbontásban gondolkodom.

Korábbi kinézet

Az új kinézet még terv fázisban

Általában, ha új WP témát készítek, akkor a alapértelmezett Kubrik témáról készítek egy kigyomlált másolatot, amiben csak a legszükségesebb állományok maradnak meg (style.css, index.php, header.php, footer.php, sidebar.php, comments.php, comments-popup.php, searchform.php, functions.php), majd kiürítem a CSS-t, hogy nulláról építhessük fel az új kinézetet. Ezután az alap szerkezetet kissé módosítottam egy általánosabbra.

A két téma HTML szerkezete

A későbbi meglepetések megelőzése végett, az új CSS-t CSS reset-tel kezdem

Azt már biztosan tudom, hogy a szerkezetben maradt hr tagokat nem szeretném megjeleníteni, és a kódblokkokat is kódszerűen szeretném megjeleníteni.

pre {
    font-family: "Consolas","Courier New",Courier,mono,monospace;
    font-size: 12px;
    line-height: 1.1em;
}
hr {  display: none; }

Hogy beférjen az oldal a fentebb kitűzött felbontású monitorra, a körbefogó #page szélességét 980px-re állítom, a képernyő közepén veló megjelenítésér pedig a margin: 0 auto; rész felel. A fejléc szélességét, és hátterét is meghatározom, így annak további elemeit már tudom a látványterveben kialakított vonalakhoz tudom igazítani.

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#page {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    background: transparent url(img/sidebar.bg.jpg) repeat-y scroll right center
}

#header {
    color: #fff;
    height: 225px;
    background: #000 url(img/header.bg.jpg) no-repeat 0 0;
}

A következő lépéssel kialakítjuk az alap kétoszlopos elrendezést. A módosítások után már az oldalsáv kb a helyén látszik, ugyan még kilóg a számára szánt helyről.

#content {
    width: 670px;
    float: left;
}
#sidebar {
    float: right;
    width: 260px;
    position: relative;
    right: 20px;
}
#sidebar ul {
    list-style: none;
    margin: 0;
}

Alakuló oldalsáv

A dobozok kilógásán és a doboz címek tervnek megfelelő formázását a következőkkel állítottam be

#sidebar .widget .widgetcontent {
    padding: 5px 15px 10px;
    font-family: Georgia,Times,"Times New Roman",serif;
}

#sidebar .widgettitle {
    font-size: 1.3em;
    color: #fff;
    background: #000 url(img/sidebar.head.bg.jpg) no-repeat top right;
    margin: 10px 25px 0 0;
    padding: 5px 10px;
    font-family: Verdana,Helvetica,Arial,sans-serif;
}

Oldaldoboz szerkezet

Pár pillanatig térjünk vissza a fejlécre

#headerimg .description {
    position: absolute;
    top: 0;
    left: 50px;
    height: 40px;
    width: 580px;
    background: #f4eedf;
    color: #000;
}
#headerimg .description .desccont {
    padding: 5px;
    text-align: center;
}
#headerimg h1 {
    height: 90px;
    left: 40px;
    position: absolute;
    top: 70px;
    width: 640px;
}
#headerimg h1 a {
    display: block;
    height:90px;
    color: #fff;
    line-height: 90px;
    text-align: center;
    text-decoration: none;
    font-size: 3em;
}
#headerimg h1 a #titletext {
    display: none;
}
#headerimg h1 a #titleimg {
    background: url(img/titleimg.jpg) no-repeat 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Az első két kiválasztóval a leírás mezőt betettem a felső (régi dizájnból átvett háttérszínű) dobozba. A második kettővel, pedig az oldal valódi címét (ami esetünkben az URL is egyben) a fekete blokk közepére tettem. A #titletext, és #titleimg blokkokkal kicsit a dizájnnak is adhatunk…
Fejléc rendben

A keresődobozt kicsit átalakítottam, hogy könnyebben lehessen formázni. A hagyományos < input type="submit" /> gombot kicseréltem egy megfelelően felparaméterezett button elemre

<button>Keresés</button>

amit már sokkal könnyebben testre szabhattam.

#sidebar #searchform input {
    border: 1px solid #333;
    padding: 1px;

}
#searchform #submit {
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent url(img/icons/magnifier.png) no-repeat center top;
    text-indent: -1000em;
    cursor: pointer;
    cursor: hand;
}

Formázott kereső doboz

Ha most letekerünk a lap aljára észrevehetjük, hogy a láb rész még mindig úgy néz ki ahogy (sehogy). Ráadásul az oldalsáv sem ér le a lap aljára. Mivel mind a #content, mind a #sidebar dobozok lebegnek (float: left/right;), rá kell vennünk #footer dobozt hogy zárja le az összes lebegtetést (clear: both;). A viszonylag nagy padding értékek a dizájn elemek érvényesülése miatt szükségesek.

#footer {
    color: #fff;
    clear: both;
    background: #000;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-size: .7em;
    padding: 40px 0 10px;
    background: #000 url(img/footer.bg.jpg) no-repeat 0 0;
}
#footer a {
    color: #ddd;
}
.copy {
    font-family: Verdana,Helvetica,Arial,sans-serif;
     text-align: right;
    margin: 10px;
    color: #ddd;
}

Láb rész szerkezeti felépítése

Ha már idelent vagyunk gyorsan formázgassuk meg a láb részben elhelyezett dobozokat is. A .widgetcontent és .widgettitle kiválasztók padding értékével nagyon-nagyon sok időt el lehet játszani (tapasztalatból mondom 😉 ).

#footer ul {
    list-style: none;
    margin: 0;
}
#footer #footerwidgets {
    float: left;
    background: #000;
    border-top: 1px solid #fff;
}
#footer ul.widgets {
    float: left;
    width: 980px;
    border-collapse: collapse;
}
#footer ul.widgets li.widget {
    float: left;
    width: 490px;
    line-height: 1.3em;
}
#footer ul.widgets li.widget .widgettitle,
#footer ul.widgets li.widget .widgetcontent {
    margin: 20px 40px 10px;
}
#footer ul.widgets li.widget .widgettitle {
    color: #fff;
    font-size: 1.3em;
    font-weight: bold;
    padding-bottom: .5em;

}
#wp-calendar {
    width: 100%;
}

Alsó dobozok a helyükön

A navigációs doboz elhelyezésén és formázásán rengeteget gondolkoztam, de a végén ennél a formánál maradtam

Navigáció

.navigation {
    background: #000 url(img/posttitle.bg.png) no-repeat left bottom;
    color: #fff;
    padding: 15px 20px 15px 15px;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-size: .7em;
    float: left;
    width: 650px;
}
.navigation a {
    color: #fff;
}
.navigation .older {
    float: left;
}
.navigation .newer {
    float: right;
}

Na és akkor foglalkozzunk kicsit magukkal a postokkal is egy picit. Először a bejegyzés címével kezdem. A formázás kialakításakor szempont volt, hogy egy jól olvasható, könnyen észrevehető cím formázás legyen a végeredmény, ugyanakkor szerettem volna átemelni az előző dizájn “átnyúló” (egyesek szerint szövegkiemelős) motívumát. Eddig kintről nyúlt be, most a belső elválasztóvonalként szolgáló “tengelyből” fog kifelé nyúlni.

.post h2.posthead {
    background: #000 url(img/posttitle.bg.png) no-repeat left bottom;
    color: #fff;
    padding: 15px 20px 15px 15px;
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-size: 1.4em;
}

.post h2.posthead a {
    color: #fff;
    text-decoration: none;
}

Formázott bejegyzés cím

A bejegyzés adatait tartalmazó rész kialakításakor megengedtem egy pici játékot (amennyit a szerkezet engedett). A :before, :after kiválasztók és a content szabály használatával az adat blokkok felidézik a HTML kódok szerkezetét. Gondolkodtam rajta, hogyan lehetne atribútum/értéké párokat is megjeleníteni, de úgy tűnt számomra, hogy ezt csak a szerkezet jelentős módosítása, és/vagy a szemantikusság feladása árán lehetett volna elérni.

.post .metadata {
    font-size: .8em;
    font-family: "Consolas","Courier New",Courier,mono,monospace;
    text-align: right;
    padding: 10px 20px;
}
.post .metadata .meta {
    white-space: nowrap;
}
.post .metadata .meta:before{
    content: "<";
}
.post .metadata .meta:after {
    content: " />";
}

Bejegyzés adatai

A bejegyzés forma meghatározásakor a célom az volt, hogy jól olvasható sorok jelenjenek meg, a bekezdések egyértelműen elváljanak, ugyanakkor maradjon egyértelmű, hogy összetartoznak.

.post .entry {
    margin: 0 20px 5px;
    line-height: 1.4em;
    font-size: .9em;
    font-family: Georgia,Times,"Times New Roman",serif;
}
.post .entry p {
    margin: 1em 0;
}

Formázott bejegyzés

És a végére egy kis játék a linkekkel. Szerettem volna picit szinesebbé tenni az oldalt, de az alapszíneke uralkodó mivoltát megtartani. Ezért felvettem a következő két szabályt is.

.post .entry a[href^="http://"] {
    padding-right: 20px;
    margin-right: 5px;
    background: url(img/icons/world_link.png) no-repeat center right;
}
.post .entry a[rel^="lightbox"] {
    padding-right: 0  !important;
    background: none !important;
}

Az elsővel minden “külső” link kap a jobb oldalára egy ikont, mely jelz, kattintásra el hagyjuk az oldalt. Ugyanakkor a postokban elhelyezett lightboxos hivatkozásokon nem szeretnénk ezt az extrát érvényesíteni. A játékhoz hozzátartozik a header.php-ben elhelyezett CSS szabály is mely a belső hivatkozásokat jelöli meg.

.post .entry a[href^=""],
.post .entry a[href^="/"]
{
    background: url(/img/icons/house_link.png) no-repeat center right;
    padding-right: 20px;
    margin-right: 5px;
}

Comments are closed.