Culoare și fonturi în șablonul Joomla - șabloane joomla 3

Avem o structură de bază a aspectului paginii. Acum vrem să facem acest aspect să corespundă designului pe care l-am inventat și nu am folosit doar culori și fonturi în mod implicit. Twitter Bootstrap utilizează o versiune CSS numită LESS pentru a genera stiluri complexe. Cu toate acestea, în șablonul nostru simplu vom folosi codul standard CSS.

Creați un fișier gol numit custom.css și salvați-l în dosarul es din șablonul dvs. După aceasta, adăugați o foaie nouă de stil la index.php după tabela template.css.

Link la un nou fișier care urmează să fie adăugat după trimiterea la templat fișier, deoarece unul dintre principiile statelor foaie de stil în cascadă că „ceea ce este în codul de mai jos, redefineste conceptul de mai sus“ (aceasta este etapa).

Am ales o imagine pentru titlul site-ului și utilizând instrumentul online Adobe Kuler a analizat culorile acestei fotografii. Pe baza rezultatelor obținute, am ales culoarea de fundal (# 5E7339), care este o nuanta de verde, și a luat două nuanțe de verde învecinate, # A3BF72 și # 95BF4C. În plus, au găsit o culoare complementară, # 663973.






Am început cu cele mai simple. S-au adăugat stiluri pentru culoarea de fundal și culoarea textului principal și, de asemenea, au definit lățimea containerului care va fi utilizat întotdeauna, indiferent de ceea ce adăugăm la pagină:

După aceea, am adăugat titlul imaginii, precum și culorile și fonturile pentru titluri și linkuri:

În pasul următor, am schimbat alte detalii ale elementelor specifice stilului, redefinind stilurile din fișierul Bootstrap pentru acest lucru. Pentru aceasta am folosit un instrument de browser. Cel mai faimos dintre aceste instrumente este Firebug, care funcționează în browser-ul Firefox și Instrumente pentru dezvoltatori pentru Chrome. Aceste instrumente vă permit să studiați în detaliu structura părților paginii de care sunteți interesat pentru a determina ce stiluri controlează afișarea acestora.

Meniul de sus este controlat de clasa nav, așa că l-am modificat adăugând un câmp mic spre stânga. De asemenea, am adăugat un stil pentru linkuri din meniu (. Nav> li> a). Prin urmare, pagina specială pentru linkurile de meniu utilizează culoarea proprie:

Apoi am modificat setările modulului Căutare inteligentă prin comutarea parametrului Etichetă câmp de căutare din fila Opțiuni avansate în poziția Hide. Vrem ca numele site-ului nostru să fie afișat cu litere albe în partea superioară a imaginii antetului. Pentru aceasta, din nou am adăugat câteva linii de cod PHP și CSS. În blocul de cod PHP din fișierul index.php am adăugat următoarele linii:

Se spune că numele site-ului trebuie extras din metadatele pe care le-am creat în Configurația globală a site-ului web. După aceea, am schimbat ușor blocul