{"id":94,"date":"2008-05-15T17:15:12","date_gmt":"2008-05-15T16:15:12","guid":{"rendered":"http:\/\/vince.tikasz.hu\/?p=94"},"modified":"2011-07-24T15:13:39","modified_gmt":"2011-07-24T13:13:39","slug":"atalakulas","status":"publish","type":"post","link":"https:\/\/vince.tikasz.hu\/2008\/05\/15\/atalakulas\/","title":{"rendered":"\u00c1talakul\u00e1s"},"content":{"rendered":"

\u00dagy d\u00f6nt\u00f6ttem (miszerint, az a v\u00e9lem\u00e9nyem), hogy \u00fajul az oldalam kin\u00e9zete c\u00edme. A s\u00f6t\u00e9tre siker\u00fclt kor\u00e1bbi kin\u00e9zetet vil\u00e1gosabbra cser\u00e9lem, ugyanakkor eleflejtem a 800×600-at \u00e9s 1024×768-as felbont\u00e1sban gondolkodom.<\/p>\n

\"Kor\u00e1bbi<\/a><\/p>\n

\"Az<\/a>
\n
\n\u00c1ltal\u00e1ban, ha \u00faj WP t\u00e9m\u00e1t k\u00e9sz\u00edtek, akkor a alap\u00e9rtelmezett Kubrik t\u00e9m\u00e1r\u00f3l k\u00e9sz\u00edtek egy kigyoml\u00e1lt m\u00e1solatot, amiben csak a legsz\u00fcks\u00e9gesebb \u00e1llom\u00e1nyok maradnak meg (style.css, index.php, header.php, footer.php, sidebar.php, comments.php, comments-popup.php, searchform.php, functions.php), majd ki\u00fcr\u00edtem a CSS-t, hogy null\u00e1r\u00f3l \u00e9p\u00edthess\u00fck fel az \u00faj kin\u00e9zetet. Ezut\u00e1n az alap szerkezetet kiss\u00e9 m\u00f3dos\u00edtottam egy \u00e1ltal\u00e1nosabbra.<\/p>\n

\"A<\/a><\/p>\n

A k\u00e9s\u0151bbi meglepet\u00e9sek megel\u0151z\u00e9se v\u00e9gett, az \u00faj CSS-t CSS reset<\/a>-tel kezdem<\/p>\n

\"\"<\/a><\/p>\n

Azt m\u00e1r biztosan tudom, hogy a szerkezetben maradt hr<\/code> tagokat nem szeretn\u00e9m megjelen\u00edteni, \u00e9s a k\u00f3dblokkokat is k\u00f3dszer\u0171en szeretn\u00e9m megjelen\u00edteni.<\/p>\n

pre {\r\n    font-family: \"Consolas\",\"Courier New\",Courier,mono,monospace;\r\n    font-size: 12px;\r\n    line-height: 1.1em;\r\n}\r\nhr {  display: none; }<\/pre>\n
Hogy bef\u00e9rjen az oldal a fentebb kit\u0171z\u00f6tt felbont\u00e1s\u00fa monitorra, a k\u00f6rbefog\u00f3 #page<\/code> sz\u00e9less\u00e9g\u00e9t 980px-re \u00e1ll\u00edtom, a k\u00e9perny\u0151 k\u00f6zep\u00e9n vel\u00f3 megjelen\u00edt\u00e9s\u00e9r pedig a margin: 0 auto;<\/code> r\u00e9sz felel. A fejl\u00e9c sz\u00e9less\u00e9g\u00e9t, \u00e9s h\u00e1tter\u00e9t is meghat\u00e1rozom, \u00edgy annak tov\u00e1bbi elemeit m\u00e1r tudom a l\u00e1tv\u00e1nyterveben kialak\u00edtott vonalakhoz tudom igaz\u00edtani.<\/p>\n
html, body {\r\n    width: 100%;\r\n    height: 100%;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n#page {\r\n    width: 980px;\r\n    margin: 0 auto;\r\n    padding: 0;\r\n    position: relative;\r\n    background: transparent url(img\/sidebar.bg.jpg) repeat-y scroll right center\r\n}\r\n\r\n#header {\r\n    color: #fff;\r\n    height: 225px;\r\n    background: #000 url(img\/header.bg.jpg) no-repeat 0 0;\r\n}<\/pre>\n
\"\"<\/a><\/p>\n
A k\u00f6vetkez\u0151 l\u00e9p\u00e9ssel kialak\u00edtjuk az alap k\u00e9toszlopos elrendez\u00e9st. A m\u00f3dos\u00edt\u00e1sok ut\u00e1n m\u00e1r az oldals\u00e1v kb a hely\u00e9n l\u00e1tszik, ugyan m\u00e9g kil\u00f3g a sz\u00e1m\u00e1ra sz\u00e1nt helyr\u0151l.<\/p>\n
#content {\r\n    width: 670px;\r\n    float: left;\r\n}\r\n#sidebar {\r\n    float: right;\r\n    width: 260px;\r\n    position: relative;\r\n    right: 20px;\r\n}\r\n#sidebar ul {\r\n    list-style: none;\r\n    margin: 0;\r\n}<\/pre>\n
\"Alakul\u00f3<\/a><\/p>\n
A dobozok kil\u00f3g\u00e1s\u00e1n \u00e9s a doboz c\u00edmek tervnek megfelel\u0151 form\u00e1z\u00e1s\u00e1t a k\u00f6vetkez\u0151kkel \u00e1ll\u00edtottam be<\/p>\n
#sidebar .widget .widgetcontent {\r\n    padding: 5px 15px 10px;\r\n    font-family: Georgia,Times,\"Times New Roman\",serif;\r\n}\r\n\r\n#sidebar .widgettitle {\r\n    font-size: 1.3em;\r\n    color: #fff;\r\n    background: #000 url(img\/sidebar.head.bg.jpg) no-repeat top right;\r\n    margin: 10px 25px 0 0;\r\n    padding: 5px 10px;\r\n    font-family: Verdana,Helvetica,Arial,sans-serif;\r\n}<\/pre>\n
\"Oldaldoboz<\/a><\/p>\n
P\u00e1r pillanatig t\u00e9rj\u00fcnk vissza a fejl\u00e9cre<\/p>\n
#headerimg .description {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50px;\r\n    height: 40px;\r\n    width: 580px;\r\n    background: #f4eedf;\r\n    color: #000;\r\n}\r\n#headerimg .description .desccont {\r\n    padding: 5px;\r\n    text-align: center;\r\n}\r\n#headerimg h1 {\r\n    height: 90px;\r\n    left: 40px;\r\n    position: absolute;\r\n    top: 70px;\r\n    width: 640px;\r\n}\r\n#headerimg h1 a {\r\n    display: block;\r\n    height:90px;\r\n    color: #fff;\r\n    line-height: 90px;\r\n    text-align: center;\r\n    text-decoration: none;\r\n    font-size: 3em;\r\n}\r\n#headerimg h1 a #titletext {\r\n    display: none;\r\n}\r\n#headerimg h1 a #titleimg {\r\n    background: url(img\/titleimg.jpg) no-repeat 50% 50%;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n}<\/pre>\n
Az els\u0151 k\u00e9t kiv\u00e1laszt\u00f3val a le\u00edr\u00e1s mez\u0151t betettem a fels\u0151 (r\u00e9gi diz\u00e1jnb\u00f3l \u00e1tvett h\u00e1tt\u00e9rsz\u00edn\u0171) dobozba. A m\u00e1sodik kett\u0151vel, pedig az oldal val\u00f3di c\u00edm\u00e9t (ami eset\u00fcnkben az URL is egyben) a fekete blokk k\u00f6zep\u00e9re tettem. A #titletext<\/code>, \u00e9s #titleimg<\/code> blokkokkal kicsit a diz\u00e1jnnak is adhatunk…
\n\"Fejl\u00e9c<\/a><\/p>\n
A keres\u0151dobozt kicsit \u00e1talak\u00edtottam, hogy k\u00f6nnyebben lehessen form\u00e1zni. A hagyom\u00e1nyos < input type=\"submit\" \/><\/code> gombot kicser\u00e9ltem egy megfelel\u0151en felparam\u00e9terezett button elemre<\/code><\/p>\n
<button>Keres\u00e9s<\/button>\r\n<\/pre>\n
amit m\u00e1r sokkal k\u00f6nnyebben testre szabhattam.<\/p>\n
#sidebar #searchform input {\r\n    border: 1px solid #333;\r\n    padding: 1px;\r\n\r\n}\r\n#searchform #submit {\r\n    width: 20px;\r\n    height: 20px;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n    background: transparent url(img\/icons\/magnifier.png) no-repeat center top;\r\n    text-indent: -1000em;\r\n    cursor: pointer;\r\n    cursor: hand;\r\n}<\/pre>\n
\"Form\u00e1zott<\/a><\/p>\n
Ha most leteker\u00fcnk a lap alj\u00e1ra \u00e9szrevehetj\u00fck, hogy a l\u00e1b r\u00e9sz m\u00e9g mindig \u00fagy n\u00e9z ki ahogy (sehogy). R\u00e1ad\u00e1sul az oldals\u00e1v sem \u00e9r le a lap alj\u00e1ra. Mivel mind a #content<\/code>, mind a #sidebar<\/code> dobozok lebegnek (float: left\/right;<\/code>), r\u00e1 kell venn\u00fcnk #footer<\/code> dobozt hogy z\u00e1rja le az \u00f6sszes lebegtet\u00e9st (clear: both;<\/code>). A viszonylag nagy padding<\/code> \u00e9rt\u00e9kek a diz\u00e1jn elemek \u00e9rv\u00e9nyes\u00fcl\u00e9se miatt sz\u00fcks\u00e9gesek.<\/p>\n
#footer {\r\n    color: #fff;\r\n    clear: both;\r\n    background: #000;\r\n    font-family: Verdana,Helvetica,Arial,sans-serif;\r\n    font-size: .7em;\r\n    padding: 40px 0 10px;\r\n    background: #000 url(img\/footer.bg.jpg) no-repeat 0 0;\r\n}\r\n#footer a {\r\n    color: #ddd;\r\n}\r\n.copy {\r\n    font-family: Verdana,Helvetica,Arial,sans-serif;\r\n     text-align: right;\r\n    margin: 10px;\r\n    color: #ddd;\r\n}\r\n<\/pre>\n
\"L\u00e1b<\/a><\/p>\n
Ha m\u00e1r idelent vagyunk gyorsan form\u00e1zgassuk meg a l\u00e1b r\u00e9szben elhelyezett dobozokat is. A .widgetcontent<\/code> \u00e9s .widgettitle<\/code> kiv\u00e1laszt\u00f3k padding<\/code> \u00e9rt\u00e9k\u00e9vel nagyon-nagyon sok id\u0151t el lehet j\u00e1tszani (tapasztalatb\u00f3l mondom \ud83d\ude09 ).<\/p>\n
#footer ul {\r\n    list-style: none;\r\n    margin: 0;\r\n}\r\n#footer #footerwidgets {\r\n    float: left;\r\n    background: #000;\r\n    border-top: 1px solid #fff;\r\n}\r\n#footer ul.widgets {\r\n    float: left;\r\n    width: 980px;\r\n    border-collapse: collapse;\r\n}\r\n#footer ul.widgets li.widget {\r\n    float: left;\r\n    width: 490px;\r\n    line-height: 1.3em;\r\n}\r\n#footer ul.widgets li.widget .widgettitle,\r\n#footer ul.widgets li.widget .widgetcontent {\r\n    margin: 20px 40px 10px;\r\n}\r\n#footer ul.widgets li.widget .widgettitle {\r\n    color: #fff;\r\n    font-size: 1.3em;\r\n    font-weight: bold;\r\n    padding-bottom: .5em;\r\n\r\n}\r\n#wp-calendar {\r\n    width: 100%;\r\n}<\/pre>\n
\"Als\u00f3<\/a><\/p>\n
A navig\u00e1ci\u00f3s doboz elhelyez\u00e9s\u00e9n \u00e9s form\u00e1z\u00e1s\u00e1n rengeteget gondolkoztam, de a v\u00e9g\u00e9n enn\u00e9l a form\u00e1n\u00e1l maradtam<\/p>\n
\"Navig\u00e1ci\u00f3\"<\/a><\/p>\n
.navigation {\r\n    background: #000 url(img\/posttitle.bg.png) no-repeat left bottom;\r\n    color: #fff;\r\n    padding: 15px 20px 15px 15px;\r\n    font-family: Verdana,Helvetica,Arial,sans-serif;\r\n    font-size: .7em;\r\n    float: left;\r\n    width: 650px;\r\n}\r\n.navigation a {\r\n    color: #fff;\r\n}\r\n.navigation .older {\r\n    float: left;\r\n}\r\n.navigation .newer {\r\n    float: right;\r\n}<\/pre>\n
Na \u00e9s akkor foglalkozzunk kicsit magukkal a postokkal is egy picit. El\u0151sz\u00f6r a bejegyz\u00e9s c\u00edm\u00e9vel kezdem. A form\u00e1z\u00e1s kialak\u00edt\u00e1sakor szempont volt, hogy egy j\u00f3l olvashat\u00f3, k\u00f6nnyen \u00e9szrevehet\u0151 c\u00edm form\u00e1z\u00e1s legyen a v\u00e9geredm\u00e9ny, ugyanakkor szerettem volna \u00e1temelni az el\u0151z\u0151 diz\u00e1jn „\u00e1tny\u00fal\u00f3” (egyesek szerint sz\u00f6vegkiemel\u0151s) mot\u00edvum\u00e1t. Eddig kintr\u0151l ny\u00falt be, most a bels\u0151 elv\u00e1laszt\u00f3vonalk\u00e9nt szolg\u00e1l\u00f3 „tengelyb\u0151l” fog kifel\u00e9 ny\u00falni.<\/p>\n
.post h2.posthead {\r\n    background: #000 url(img\/posttitle.bg.png) no-repeat left bottom;\r\n    color: #fff;\r\n    padding: 15px 20px 15px 15px;\r\n    font-family: Verdana,Helvetica,Arial,sans-serif;\r\n    font-size: 1.4em;\r\n}\r\n\r\n.post h2.posthead a {\r\n    color: #fff;\r\n    text-decoration: none;\r\n}<\/pre>\n
\"Form\u00e1zott<\/a><\/p>\n
A bejegyz\u00e9s adatait tartalmaz\u00f3 r\u00e9sz kialak\u00edt\u00e1sakor megengedtem egy pici j\u00e1t\u00e9kot (amennyit a szerkezet engedett). A :before, :after<\/code> kiv\u00e1laszt\u00f3k \u00e9s a content<\/code> szab\u00e1ly haszn\u00e1lat\u00e1val az adat blokkok felid\u00e9zik a HTML k\u00f3dok szerkezet\u00e9t. Gondolkodtam rajta, hogyan lehetne atrib\u00fatum\/\u00e9rt\u00e9k\u00e9 p\u00e1rokat is megjelen\u00edteni, de \u00fagy t\u0171nt sz\u00e1momra, hogy ezt csak a szerkezet jelent\u0151s m\u00f3dos\u00edt\u00e1sa, \u00e9s\/vagy a szemantikuss\u00e1g felad\u00e1sa \u00e1r\u00e1n lehetett volna el\u00e9rni.<\/p>\n
.post .metadata {\r\n    font-size: .8em;\r\n    font-family: \"Consolas\",\"Courier New\",Courier,mono,monospace;\r\n    text-align: right;\r\n    padding: 10px 20px;\r\n}\r\n.post .metadata .meta {\r\n    white-space: nowrap;\r\n}\r\n.post .metadata .meta:before{\r\n    content: \"<\";\r\n}\r\n.post .metadata .meta:after {\r\n    content: \" \/>\";\r\n}<\/pre>\n
\"Bejegyz\u00e9s<\/a><\/p>\n
A bejegyz\u00e9s forma meghat\u00e1roz\u00e1sakor a c\u00e9lom az volt, hogy j\u00f3l olvashat\u00f3 sorok jelenjenek meg, a bekezd\u00e9sek egy\u00e9rtelm\u0171en elv\u00e1ljanak, ugyanakkor maradjon egy\u00e9rtelm\u0171, hogy \u00f6sszetartoznak.<\/p>\n
.post .entry {\r\n    margin: 0 20px 5px;\r\n    line-height: 1.4em;\r\n    font-size: .9em;\r\n    font-family: Georgia,Times,\"Times New Roman\",serif;\r\n}\r\n.post .entry p {\r\n    margin: 1em 0;\r\n}<\/pre>\n
\"Form\u00e1zott<\/a><\/p>\n
\u00c9s a v\u00e9g\u00e9re egy kis j\u00e1t\u00e9k a linkekkel. Szerettem volna picit szinesebb\u00e9 tenni az oldalt, de az alapsz\u00edneke uralkod\u00f3 mivolt\u00e1t megtartani. Ez\u00e9rt felvettem a k\u00f6vetkez\u0151 k\u00e9t szab\u00e1lyt is.<\/p>\n
.post .entry a[href^=\"http:\/\/\"] {\r\n    padding-right: 20px;\r\n    margin-right: 5px;\r\n    background: url(img\/icons\/world_link.png) no-repeat center right;\r\n}\r\n.post .entry a[rel^=\"lightbox\"] {\r\n    padding-right: 0  !important;\r\n    background: none !important;\r\n}<\/pre>\n
Az els\u0151vel minden „k\u00fcls\u0151” link kap a jobb oldal\u00e1ra egy ikont, mely jelz, kattint\u00e1sra el hagyjuk az oldalt. Ugyanakkor a postokban elhelyezett lightboxos hivatkoz\u00e1sokon nem szeretn\u00e9nk ezt az extr\u00e1t \u00e9rv\u00e9nyes\u00edteni. A j\u00e1t\u00e9khoz hozz\u00e1tartozik a header.php<\/code>-ben elhelyezett CSS szab\u00e1ly is mely a bels\u0151 hivatkoz\u00e1sokat jel\u00f6li meg.<\/p>\n
.post .entry a[href^=\"\"],\r\n.post .entry a[href^=\"\/\"]\r\n{\r\n    background: url(\/img\/icons\/house_link.png) no-repeat center right;\r\n    padding-right: 20px;\r\n    margin-right: 5px;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
\u00dagy d\u00f6nt\u00f6ttem (miszerint, az a v\u00e9lem\u00e9nyem), hogy \u00fajul az oldalam kin\u00e9zete c\u00edme. A s\u00f6t\u00e9tre siker\u00fclt kor\u00e1bbi kin\u00e9zetet vil\u00e1gosabbra cser\u00e9lem, ugyanakkor eleflejtem a 800×600-at \u00e9s 1024×768-as felbont\u00e1sban gondolkodom.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,22,13,15],"tags":[63,68,77],"_links":{"self":[{"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/posts\/94"}],"collection":[{"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":0,"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/posts\/94\/revisions"}],"wp:attachment":[{"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/media?parent=94"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/categories?post=94"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vince.tikasz.hu\/wp-json\/wp\/v2\/tags?post=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}