Pune-ţi creierul la muncă!
Compară-te cu alţii! Trage concluzii!
Dacă aţi pierdut începutul tutorialului de iniţiere în coding, duceţi-vă aici.
Sper că aţi ajuns cu toţii la forma finală a themei indicată în tutorial, nu? Dacă n-aţi reuşit, încă mai puteţi pune întrebări articolului în cauză. Vă voi răspunde cât de rapid pot.
Înainte de toate, trebuie să ştiţi că vă trebuie ceva mai mult decât Notepad pentru a putea coda. Bine, nu spune nimeni că e imposibil cu Notepad, dar pentru că majoritatea dintre voi sunteţi la început, vă trebuie ceva ajutător. Eu folosesc şi recomand Notepad++. Un freeware care vă va face munca mult mai uşoară. Dacă aveţi alte programe, gen Dreamweaver sau mai ştiu eu ce, le puteţi folosi.
Pentru început e bine de ştiut că fără un design lucrat în Photoshop nu puteţi continua crearea themei. Am downloadat de la ThemeTation un psd al unei theme şi l-am modificat astfel încât să fie cât mai uşor de codat. A ieşit asta (vă rog să downloadaţi arhiva şi să deschideţi .psd-ul – aveţi nevoie de Adobe Photoshop).
Metoda mea este următoarea: tai din documentul .psd imagini pe care le introduc în thema creată la partea #1 a seriei de tutoriale. Alţii folosesc „Slice Tool” şi împart thema în mai multe, după care o salvează drept HTML, apoi se pun pe modificat. Eu n-am încercat a doua metodă, deci să nu vă aşteptaţi să o explic îndeaproape.
Începem! În ediţia de astăzi a tutorialului ne vom lega exclusiv de header. Vom încerca să transpunem din Photosop în thema noastră, astfel încât headerele să arate la fel, sau aproape la fel.
Creaţi în folderul themei, un alt folder care să se numească „img” pentru a salva şi păstra imaginile.
Vom deschide psd-ul cu Photoshop şi vom tăia o liniuţă subţire din header, pentru a o putea folosi ca background în header-ul themei noastre. O vom salva sub format .gif şi o vom numi „headbg”, după care o vom pune în folderul „img” din thema.
Hint: Folosiţi funcţia Save For Web and Devices pentru a salva imaginile special pentru web, în format .gif.
Editarea codului se face pornind de la style.css, unde vom adăuga ca şi background imaginea tocmai tăiată şi vom stabili, pe lângă lăţimea exactă a header-ului şi lungimea acestuia, ca să ne apropiem cât mai mult de ce apare în Photoshop. Secţiunea de header din style.css-ul meu arată aşa acum:
#header{
float: left;
width: 750px;
height: 108px;
background: #7d9c1f url('img/headbg.gif') repeat-x;}Ca să şi explic puţin: am pus culoarea aceea la background ca să poată fi afişată atunci când imaginea nu se încarcă sau, dacă sunt persoane cu viteza mai mică la internet, până apare imaginea să nu rămână totul alb acolo. „repeat-x” face ca liniuţa aia pe care tocmai am decupat-o să fie repetată pe toată lăţimea header-ului.
Acum sunt două lucruri care apar în Photoshop, iar la voi pe pagină nu.
În primul rând, culoarea textului din header. În tutorial e alb, aici nu. Va trebui să ne întoarcem la style.css şi să adăugăm noi facilităţi div-ului header. Acum, secţiunea de header a style.css arată aşa:
#header{
float: left;
width: 750px;
height: 108px;
background: #7d9c1f url('img/headbg.gif') repeat-x;
color: #FFFFFF;
}
#header a{
color: #FFFFFF;
text-decoration: none;}Observaţi că am setat culoarea link-urilor şi a textului din header.
Acum, a doua diferenţă ar fi backgroundul. Dacă aveţi rezoluţii mai mari de 800×600 s-ar putea ca, pe lângă template-ul afişat în Photoshop, dacă vă uitaţi la varianta online, să vedeţi un background alb pe care ar fi mai simplu să-l umplem cu ceva, nu? Am ales să pun o culoare uniformă, care să se potrivească celei din header. Asfel, am modificat background-ul div-ului body astfel încât style.css arată aşa, acum:
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #d7d39a;
color: #000000;
}Pentru astăzi cred că e destul. N-am făcut multe, dar cu paşi mici se ajunge departe. Dacă aveţi întrebări, sugestii sau dacă pur şi simplu nu vă iese ceva, puteţi oricând lăsa un comentariu.
P.S.: Aici nu vă invăţ să faceţi o themă profesională pentru blog. Eu doar vă arat cum se ajunge de la un template în Photoshop la o thema WordPress.
20 Comments
Huh, frumoasa initiativa, felicitari !
@A.Dragos, merci!
Daca am acces la codul sursa a header-ului unui blog, nu ezit sa ii mai adaug niste alt=”seo”-uri la imagini
@Tudor, astea-s optionale. eu nu invat optimizarea pentru motoarele de cautare. Probabil, am sa fac si asta candva, dar deabia dupa ce thema ajunge la final
Hai ca merge :) Incet-incet, parca prinde contur :) Asa, pas cu pas, maine-poimane ne trezim ca nu mai exista teme, doua la fel, in blogosfera :D
Cred ca un template css trebuie inceput prin a declara si a configura global lucruri gen :
heading-urile : h1 , h2 ..
imaginile: img, img a, img a:hover
link-urile (mai important) : a, a:hover …
listele eventual : li
Astea te-ar putea ajuta sa dai o anumita consistenta template-ului.
Succes oricum cu acest gen de articole :)
@BabBarDeL, pai template-ul are declaratele configuratiile globale. de ce n-ai citit tutorialul de la prima parte?
Eu am numai de comentat :)). Ai cateva greseli, prima ar fi:
1.”după care o salvează drept HTML + CSS”. Photoshop-ul nu salveaza niciodata CSS deoarece nu poate. Salveaza imaginile + un fisier HTML care are multe tabele, in care sunt inserate imaginile.
2. „Folosiţi funcţia Save For Web and Devices”. Aici trebuia sa zici si ce Photoshop folosesti (In CS2 se spune doar Save for web…)si ar mai fi ce sa salveze? Mai intai trebuie sa copie portiunea selectata, sa faca un nou document si abia at sa salveze. Daca salveaza din prima, salveaza layout-ul si nu liniuata pt header.
3. Asta e ceva minor, dar pt cei lenesi care nu fac nimic:
#header{
float: left;
width: 750px;
height: 108px;
background: #7d9c1f url(‘img/headbg.gif’) repeat-x;
ai uitat sa pui } dupa repeat-x; Astfel, cei care nu stiu css, si nu stiu sa modifice, o sa se intrebe unde au gresit, si de ce tema lor arata de parca a fost adusa din iad.
Si ceva in plus, ar trebuie ca dupa fiecare cod, cum ar fi sa zicem „color” sa zici ce face. Da culoarea textului.
Ce semnifica header a, odata ce el e in header. Eu stiu, dar ma refer pentru cei care nu stiu…
@PanTeraS,
1. din cate intelesesem eu, Adobe Photoshop CS4 face si treburi cu CSS. nu-i nimic, modific
2. Sa fii prost sa nu-ti dai seama ce sa faci. E asemanator meniul, atat la CS2 cat si la CS3 deci e imposibil sa gresesti. Cat despre crearea unui nou document pentru liniuta, iti trebuie cunostinte minime Photoshop pentru a face o thema WordPress si nu stau eu sa invat pe nimeni, acum, cum se taie o bucatica dintr-o imagine
3. daca ai ajuns sa faci thema din prima parte a utorialului inseamna ca stii ce face fiecare chestie. explica tipul ala. eu nu mai explic nimic. daca urmai tutorialul lui, vedeai.
@Grim_Cris, tutorialul ala e complex, poate explica, dar nu ar strica sa mai explici si tu. Si de CS4 nustiu, dar sa salveze si CSS ar insemna sa nu mai facem nimic, lasam doar photoshop-ul sa faca treaba… Sunt multe coduri si e cam greu.
Si la faza cu Save for web, nu iti fa griji, sunt multi incepatori in photoshop si cauta exact cuvintele scrise in tutorial, de aceea am zis :)
@PanTeraS, inteleg unde bati, dar nu cred ca poti sa faci o thema WordPress fiind afon total in ceea ce priveste calculatoarele.
De cele mai multe ori, dorinta de a crea o thema WordPress creste atunci cand iti dai seama ca stii sa faci un template in Photoshop. Eu pentru acesti oameni scriu tutoriale, nu pentru cei care abia invata sa dea dublu-click pe Adobe Photoshop
eu am sa astept sa termini toate tutoriale si la sfarsit am sa ma apuc sa fac o tema :D
@FLN, o sa mai dureze vreo 3-4 saptamani.
@Grim_Cris nu ma grabesc :D
@FLN, ok then :D
Scuze – il citisem dar nu si site-ul de pe acel link in totalitate.
@BabBarDeL, Nicio problema :D
@Grim_Cris: Daca o sa dureze 3-4 saptamani ar insemna 5-6 lecti nu? In 5-6 lecti nu prea ai ce sa explici…
@PanTeraS, vedem noi :D