Cum sa gasesc un anumit style in site

De multe ori va intrebati de ce titlul unui articol este scris cu negru si are fontul prea mic... si cum sa faceti sa le schimbati, mai ales ca nu stiti foarte multe despre programare. Ei bine exista o metoda nu fparte complicata care poate ajuta pe cineva cu oarecare inclinatie catre ceea ce inseamna cod, HTML, CSS...

Metoda fosita de noi (si de alti multi programatori) este foarte simpla, trebuie sa intalati web browserul Firefox si apoi un add-on pentru el numit Firebug.

Care e marele ajutor al acestui add-on? puteti face debug si edita CSS, HTML si JavaScript direct in pagina web!!! Nu va ganditi ca modificarile se fac si real in fisiere, este o modificare sa zicem virtuala, insa schimbarile sunt reflectate direct in browser. Daca ne convine acea modificare, ne ducem in pagina care trebuie pe server (sau local) si putem face modificarea finala.

Cum il folosim? Nimic mai simplu. Demonstratia este facuta pe o noua instalare de Joomla!, aceasta este pagina pe care o vedem in site. Urmariti imaginile de mai jos:

Vedeti in coltul din dreapta jos un V micut si verde? acolo este butonul de Firebug. Daca dam click pe el sa o deschida o fereastra jos chiar in pagina noastra, in stanga vedem un cod de HTML (este codul paginii) si in dreapta vedem niste clase cu numele fisierului care include acea clasa (template_css.css in cazul nostru). Odata deschisa fereastra dam click in partea stanga pe butonul Inspect si mergem cu mouse pe pagina site-ului. O sa vedem cum textul apare cu un chenar sau cu un fond in jurul lui. Sa presupunem ca vrem sa schimbam ceva la titlul articolelor, mergem cu mouse pe titlu (Welcome to Joomla!), apare un chenar albastru, dam cllick pe el.

Vedem ca dupa ce dam click pe titlu,, chenarul se transforma intr-un dreptunghi albastru, si dedesupt vedem ca o portiune de cod se subliniaza, este chiar codul folosit de titlu. Este o celula (td), care are o clasa (contentheading), o latime (100%) si contine textul din titlu. Aceasta clasa se aplica pe toate titlurile articolelor.

In fereastra din dreapta care contine stilurile css, dam in jos, si vedem acea clasa, .contentheading, si style din clasa: culoarea textului (color), marimea fontului (font-size), grosimea (font-weight), inaltimea liniei (height)... Daca mergem cu mouse peste color, o sa vedem ca acel cod este de fapt o culoare din gama rosu, noua nu ne place asa o vrem albastra.

Am dat click pe acel numar #C64934 (este codul culorii- este format din 6 cifre), si scriu acolo "blue" (web browser-ele stiu sa citeasca si blue, red, yellow, green ca si culori). Vedem ca titlul nu mai este rosu ci este albastru. Aceasta modificare este numai in pagina vizualizata, daca dam refresh la pagina o sa ne apara din nou cum era initial - asta pentru ca modificarea nu este facuta in sursa.

Tot in dreapta, ne mai apar si alte clase, vedem unele taiate cu o linie - asta inseamna ca nu sunt "citite" de browser pentru formatarea titlului. Gasim la clasa "body" si fontul utilizat pentru titlu, daca schimba acolo o sa vedem ca se schimba si fontul articolului, nu numai al titlului, asta pentru ca acea clasa se aplica pe tot site-ul. Ca sa modificam numai la titlu este nevoie sa facem o noua clasa separata, pe care sa o plicam in codul de php asupra titlurilor, de aici intram in deja in programare...

Dupa ce o sa va "jucati" cateva ore cu acest add-on o sa vedeti ce bun este pentru identificarea codului si claselor folosite. Mai greu o sa va fie daca vreti sa modificati in partea de cod (fisierele de php) si nu stiti programare. Daca intampinati ceva probleme va rog sa imi dati un email, poate reusesc sa va ajut.

TrackBack URI for this entry

Comments (8)

Subscribe to this comment's feed

Show/Hide comments

modificare culoare background
written by Dan Cirstoc, December 10, 2008

fff util site-ul si tutorialele, multumesc mult
am reusit cu ajutorul lor sa-mi fac un site destul de decent (healthshop.ro) in numai citeva zile
ceea ce as mai vrea acum e doar sa schimb culoarea background cu una mai deschisa, cea de acum mi se pare putin prea obositoare

multumesc anticipat pt ajutor

report abuse

vote down

vote up

Votes: +0

schimbare background
written by Alin, December 10, 2008

In template.css (line 107)

#page_bg {
background:#F3F2E7 none repeat scroll 0 0;
padding:0;
}

#F3F2E7 este culoarea pe care o ai acum, o poti schimba.

Sa imi spui daca merge.

report abuse

vote down

vote up

Votes: +0

...
written by Dan Cirstoc, December 10, 2008

nu merge
imi schimba culoarea doar la ceea ce e pe linga pagina principala
m-am tot chinuit si eu cu firebug, dar nu gasesc unde e culoarea de background a paginii active

report abuse

vote down

vote up

Votes: +0

...
written by Dan Cirstoc, December 10, 2008

am reusit
backgroundul era dat de un jpg
multumesc oricum f mult pt ajutor

report abuse

vote down

vote up

Votes: +0

Fisier html
written by Cosmin, February 05, 2009

Foarte interesante tutorialele, multumesc, chiar am reusit sa prind unele lucruri.
Dar unde se gaseste fisierul asta cu html in care tb sa modific. Pt ca pe template.css l-am gasit cu joomla explore in template si acolo in templatul folosit.
Dar acolo nu e si restul (partea din stanga). Practic nu gasesc fisierul cu tot codul html.
Mersi

report abuse

vote down

vote up

Votes: +0

RE: fisier HTML
written by Alin, February 05, 2009

Restul de cod e in index.php din template

report abuse

vote down

vote up

Votes: +0

...
written by Cosmin, February 06, 2009

Mersi, am gasit index.php si e asemanator cu ce imi arata Firefox bug dar nu e tot. De exemplu textul pe care vreau sa il modific, textul ce apare in pagina, nu e. E ceva de genul dar nu gasesc
"a rel="nofollow" href="http://www.joomla.org">Joomla!
is Free Software released under the
GNU/GPL License."
cum apare in Firefox, adica exact partea unde ar tb sa modific.

report abuse

vote down

vote up

Votes: +0

Joomla! is Free Software released under the GNU/GPL License.
written by Alin, February 09, 2009

ce joomla ai instalat? da un link catre site si mie.

report abuse

vote down

vote up

Votes: +0

Show/Hide comment form

Name

Email

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Add Comment