joi, 9 octombrie 2008

Adaugare imagine in fundal

Nu uitati sa salvati sablonul inainte de orice modificare in HTML!

Primul pas este sa gasiti (sau sa creati) imaginea pe care o doriti ca fundal. Conditiile de care trebuie sa tineti cont: sa fie mica si sa nu aiba margini distincte (pentru a arata frumos cand se repeta pe toata pagina). Incercati sa nu alegeti o imagine prea mare, pentru ca se incarca greu. Pentru a gasi asemenea imagini, cautati pe Google: "graphic backgrounds".
Dupa ce ati gasit ceva ce va place, salvati imaginea pe calculatorul dumneavoastra, apoi incarcati-o in Photobucket (trebuie sa va faceti un cont) si copiati-i link-ul.

Atentie la copyright! Folositi imaginile gratuite!

In Editati HTML cautati /*Primary layout*/ body{
Sub aceste doua randuri introduceti urmatorul cod: background-image: url(link imagine), unde link imagine va fi inlocuit cu link-ul imaginii dorite, neaparat intre paranteze.



La fel veti proceda si daca doriti sa schimbati imaginea de fundal a spatiului destinat articolelor ( #main-wrapper{ ) sau a spatiului destinat coloanei de meniu a blogului ( #sidebar-wrapper{ ).
In mod automat imaginea se va repeta pentru a umple spatiul alocat (background- repeat: repeat;). In caz ca nu doriti acest lucru, puteti face urmatoarele modificari (inlocuind repeat;): no-repeat; (imaginea nu se repeta), repeat-x; (imaginea se repeta doar pe orizontala), repeat-y; (imaginea se repeta doar pe verticala).
Daca ati ales o imagine care nu vreti sa se repete, poate doriti sa specificati pozitia exacta in care sa apara aceasta imagine. Pentru a realiza acest lucru, in textul HTLM adaugati sub codul in care ati adaugat link-ul imaginii, urmatorul cod: background-position: top left; - imaginea va aparea in coltul din stanga sus a paginii. Alte modificari posibile (inlocuind top left; ): top center; (centru sus), top right; (coltul din dreapta sus), center left; (centru-stanga), center center; (centru), center right; (centru-dreapta), bottom left; (coltul din stanga jos), bottom center; (centru-jos), bottom right; (coltul din dreapta jos).
Dupa ce ati schimbat imaginea, trebuie sa ajustati culorile textului pentru a fi mai vizibil. Pentru asta mergeti la Personalizati->Aspect -> Fonturi si culori.
Si cam atat pentru azi. Data viitoare ne ocupam de header si de linia despartitoare intre articole.