Ú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.
Á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é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;
}
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;
}
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…
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;
}
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;
}
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%;
}
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
.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;
}
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: " />";
}
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;
}
É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;
}