Joomla css pentru incepatori, html, programare
Recent, am primit o scrisoare care scoate în evidență punctul meu:
În acest post voi scrie, cum să lucreze cu CSS în Joomla. În următorul post [5] Vă voi arăta cum să adăugați o poziție modul într-un șablon.
Asta un CSS (Cascading Style Sheet, foi de stil in cascada) Wikipedia spune:
Cascading Style Sheets (CSS) este un limbaj de tabel / lista de stiluri utilizate pentru a descrie semantica de prezentare (care este, aspectul și formatarea) unui document scris într-un limbaj de marcare (cu referire la XML sau HTML). Cea mai comună utilizare a CSS - pagini web stil scrise în HTML și XHTML, dar limbajul poate fi utilizat pentru orice tip de document XML, inclusiv SVG și XUL.
CSS este destinat în primul rând pentru a separa conținutul semantic al documentului (scris în HTML sau un limbaj de marcare similar) de la apariția originalului. inclusiv elemente, cum ar fi aspectul, culorile și fonturile.
Textul cu caractere aldine în acest citat din Wikipedia - cel mai important lucru pe care trebuie să știți despre CSS, în opinia mea: separarea conținutului (HTML) și prezentarea vizuală (CSS). Prin utilizarea CSS, putem folosi un singur fișier, situat central, care descrie toate stilurile. Stilul este separat de articolele noastre Joomla. Această metodă poate fi destul de simplu pentru a schimba intregul look al intregului site. Acum, imaginați-vă ce s-ar întâmpla dacă stilul vi se cere separat pentru fiecare articol. Ar fi un coșmar dacă ar fi necesar să se facă o schimbare de stil - în cazul schimbării de proiectare sau șablon.
Sunt întotdeauna foarte surprins când am citit un tweet care spune ceva de genul „Joomla nu acceptă IE!“. Sau „Joomla nu este optimizat pentru motoarele de căutare." Desigur, este! Cu toate acestea, modelul nu poate fi așa. Totul depinde de modul în care șablonul este construit în HTML și CSS ca codul este pus în aplicare.
În cele mai multe cazuri, fișierele șablon CSS sunt în directorul / template-uri / TEMPLATENAME / css /.
Unele template-uri folosesc doar un singur fișier CSS (adesea numit ca template.css), altele au mai multe fișiere CSS. Pentru o performanță optimă a serverului atunci când se afișează pagina, ar trebui să reducă la minimum numărul de fișiere CSS. Acest lucru va reduce numărul de cereri de server necesare pentru a afișa pagina.
Puteti vedea, uneori, că șablonul utilizează fișierul principal CSS care importa toate celelalte fișiere cu următoarea sintaxă (de exemplu):
@import URL-ul ( 'reset.css');
@import URL-ul ( 'joomla.css');
@import URL-ul ( 'typography.css');
@import URL-ul ( 'modules.css');
@import URL-ul ( 'custom.css');
[Cele mai bune practici cu CSS]
Cu toate acestea, există o cale mai bună. Când doriți să resetați CSS în șablon, utilizați stylesheet separat. YooTheme au pus în aplicare de fapt, această structură în șabloane. Ei au cuplat un fișier CSS gol care are un custom.css nume. și care este încărcat după toate celelalte fișiere CSS. În fișierul custom.css din urmă aveți posibilitatea să inserați toate schimbările mele de stil.
Dacă vreau să actualizați șablonul, puteți copia doar custom.css fișier, poate actualiza șablonul meu la cea mai recentă versiune și apoi re-încărcați ale site-ului custom.css vechi. Și asta e tot ce este nevoie pentru a schimba stiluri!
[Nu repetați stilurile, în cazul în care nu este necesară]
La proiectarea elementelor de stil prin CSS important să fie consecvente. Și pentru a păstra dimensiunea minimă a stilurilor de masă. Adică, nu trebuie să repete stiluri, dacă doriți să modificați elementul de stil. Să presupunem că aveți următorul stil pentru tag-ul H1 în CSS principal (template.css sau similar) fișier:
De obicei etichetele H sunt afișate cu caractere aldine (bold). Poate doriți să adăugați stil pentru a face tag-ul titlu de a utiliza o, nu stilul bold convențional, nu cu caractere aldine. Și, în același timp, nu doriți să fi atribuit (litere mari) litere în S1. Desigur, puteți face acest lucru adăugând următorul cod custom.css:
Această metodă funcționează, dar nu va fi cod bun. Ați repetat toate stilurile, chiar și atunci când numai necesitatea de a schimba un stil, și adăugați o alta. Iată o modalitate mai bună:
În acest caz, adăugați doar stilurile care sunt diferite de cele originale. Alte stiluri rămân intacte.
[Pentru a verifica CSS, utilizați Firebug]
Acum puteți începe să joc! Experiment cu CSS direct în fereastra Firebug. Doriți să schimbați elementul de câmp / umplutură? Culoarea de fundal? Scoateți rama? Orice ajustare a stilului pe care doriți să încercați, vor fi afișate imediat în browser-ul atunci când modificați elementul corespunzător. Desigur, dacă vă actualizați pagina, apoi stilul va reporni, iar modificările vor fi pierdute. Deci, atunci când devin mulțumit cu modificările făcute, copiați CSS în fișierul custom.css și încărcați-l la server.
A se vedea. De asemenea, „8 extensii gratuite Firefox care nu ar trebui să aibă fiecare utilizator Joomla“. [3]
[Eliminați un pic de timp de învățare CSS]
Eu cred că fiecare utilizator Joomla / web-designer ar trebui să fie familiarizați cu CSS si HTML pentru a ști pe de rost. Acest lucru simplifică foarte mult modificarea șablonului și de a face mai ușor pentru a obține un rezultat pe care doriți (sau au nevoie de un client).
Nu e ca PHP de învățare. Despre PHP Știu foarte puțin. Cu toate acestea, HTML si CSS face oa doua natura mea. Așa că am luat timp și efort investit în formarea și practica acestor competențe. Acest lucru este valabil mai ales pentru CSS.
[CSS si Joomla: de ce cel mai simplu mod de a începe? ]
În primul rând, puteți încerca să schimbe etichetele titlu. Vrei să antet H2 a fost mai mic? Nici o problema :). Acum schimbați întregul site de lucru, unde se întâlnește cu H2 tag-ul. Alte tag-uri pot schimba, de asemenea, acest link-uri tag (link) tag-ul p (de exemplu, pentru a regla distanța dintre liniile) și etichetele UL și LI (lista bullet lista bullet).
Joomla: formatarea ul lista / li folosind stiluri CSS
Listă stilul ul / li este dat de secțiunea relevantă din template-uri de fișier \ șablon numele \ css \ template_css.css. În continuare vor fi discutate conținutul template_css.css, care afectează aspectul listelor ul / li.
Imagine miniatură arrow.gif setează aspectul începutul listei. În cazul în care calea către imaginea este greșită, sau nu există, în locul imaginii va fi trase, bold.
2. Puteți seta stiluri individuale (aspect diferit) pentru modulele individuale ale site-ului. Aici, de exemplu, cum să setați un aspect special pentru modul mostread (Acest modul afișează o listă cu cele mai populare articole site-ul), pur și simplu prin adăugarea acestui cod la sfârșitul fișierului template_css.css:
[Bibliografie pe CSS]
O altă sursă bună de cunoaștere - A List Apart [4]. Acesta este un site dedicat web-design, și descrie unele dintre tehnicile de utilizare a CSS. „A List Apart Revista explorează proiectarea, dezvoltarea și importanța conținut de pe web, cu un accent special pe web standarde și bune practici.“ Foarte cool!