Creaza sablon cu 3 coloane pentru Blogger - varianta 2

Dupa cum am vazut in primul tutorial pe care l-am scris despre cum sa faci un sablon cu 3 coloane pe Blogger, ne-am folosit de un sablon default pe care blogspot ni-l pune la dispozitie si anume Minima. Atunci am vazut cum sa faci un sablon cu coloana de postare pe mijloc si 2 sidebar-uri laterale, unul stanga si unul dreapta.

Astazi vom vedea cum sa facem un sablon cu coloana de postare in stanga si 2 sidebar-uri in dreapta. Vom ajunge la un sablon precum il vedeti in poza de mai jos.



Pentru cei care au deja un blog cu sablonul Minima instalat si vor sa-l modifice ar fi bine sa salveze o copie a acestuia in calculator, pentru ca in cazul in care ceva nu merge cum trebuie sa puteti reveni la el. Eu va recomand sa va faceti un blog test pe care sa incercati acest experiment.

Si pentru ca deja am vorbit despre aceasta modificare in celalalt articol, de data aceasta voi trece direct la subiect.

Duceti-va la pagina "Editati Html" si lasa-ti nebifata casuta cu "Extindeţi şabloanele control" . Dupa cum ati vazut deja, Minima are o latime de 660 pixeli. Noi trebuie sa ajungem la o latime de 970 pixeli pentru a face loc si celui de-al doilea sidebar.

Cautati (Ctrl+F) aceasta linie de cod :

#outer-wrapper {

si imediat sub ea veti gasi acest cod:

width: 660px;

Pentru a mari latimea corpului sablonului schimbati pe 660 cu 970.

Acum vom aduce si Header-ul si Footer-ul la aceeasi dimensiune. Cauta urmatoarele coduri:

#header-wrapper {

si

#footer {

imediat sub fiecare dintre ele vom gasii urmatoarea linie:

width:660px;

schimbati pe 660 cu 970. Aceasta modificare a latit cele 2 elemente ale sablonului. Previzualizati sablonul. Observati cat de mult sa latit sablonul nostru, dandu-ne astfel posibilitatea sa introducem un al doilea sidebar.

Pentru a crea al doilea sidebar trebuie sa urmam acesti pasi:

Cauta acest grup de cod:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Selecteaza tot codul, da-i un Copy si apoi Paste imediat sub el. Deci practic copiem inca o data sidebar-ul existent pentru a crea prima parte a celui de-al doilea sidebar.
Dupa cum am vazut in celalalt articol, sidebar-urile trebuie sa aibe o denumire unica, asa ca vom modifica aceasta parte:

    #sidebar-wrapper {

cu aceasta

    #sidebar2-wrapper {

si pentru ca acest nou sidebar sa fie la mijloc intre coloana de postare si primul sidebar vom

modifica si aceata parte:

    float: $endSide;

cu aceasta:

    float: $startSide;

Acum pentru a termina al doilea sidebar si al face vizibil trebuie sa gasiti acest grup de cod:

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postări de blog' type='Blog'/>
</b:section>
      </div>

si imediat dupa el sa adaugati urmatorul cod:

<div id='sidebar2-wrapper'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
      </div>

Acest cod adaugat reprezinta identitatea celui de-al doilea sidebar si dupa cum vedeti are denumirea "sidebar2" la fel cum am schimbat si mai sus.Acum este momentul sa salvati sablonul si daca nu aveti nici o eroare inseamna ca totul a decurs cum trebuie. Duceti-va la "Elemente de pagina" si veti vedea ca al doilea sidebar este definit dar nu are nici un obiect gadget in el. Pentru cei care au alte gadgeturi instalate in celalat sidebar puteti sa mutati cateva si in cel format nou. Daca nu aveti alte gadget-uri puteti adauga unele noi sub forma de text. Aici gasiti text care nu inseamna nimic dar care se aseaza foarte bine in coloane astfel observand mai bine ce se intampla cand editam sablonul.



Daca priviti acum blogul vostru vedeti ca avem 3 coloane dar cu latimi care in total  nu au latimea corpului sablonului. Pentru asta trebuie sa mergem din nou la "Editati Html" si sa marim coloana de postare si cele 2 sidebar-uri.

In acest moment avem doua sidebar-uri cu o latime totala de 440 pixeli. Ne raman 530 de pixeli pentru coloana principala. Cautati urmatorul cod:

    #main-wrapper {

si imediat sub el veti gasi width: 410px; schimbati valoarea 410 cu 530.

In acest moment suma latimilor celor 3 elemente a ajuns la latimea corpului sablonului, dar dupa cum vedeti coloanele sunt lipite una de alta. Asa cum am facut si la sablonul cu sidebar-uri pe laterale si aici vom adauga o bordura in jurul celor 3 elemente.

Deci cautati in aceasta ordine urmatoarele linii de cod:

    #main-wrapper {
    #sidebar-wrapper {
    #sidebar2-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

    border: 1px solid #000000;

Daca previzualizati veti vedea ca sidebar-ul din dreapta a cazut in jos si asta din cauza ca am adaugat bordura de 1 pixel in jurul fiecarui element. Pentru a face sidebarul sa revina pe pozitie trebuie sa scadem din coloana de postare 6 pixeli.

Cautati codul

    #main-wrapper {

si sub el gasiti width: 530px; modificati 530 cu 524
Previzualizati si vedeti ca sidebar-ul dreapta a revenit pe pozitie.
Urmatorul pas este de a desparti coloanele prin adaugarea unei margini. Deci cautati urmatoarele coduri

#main-wrapper {

si

#sidebar2-wrapper {

Adaugati urmatorul cod imediat dupa fiecare dintre ele.

margin-right: 10px;

Previzualizati si vedeti ca din nou sidebar-ul din drepta a cazut in jos, din cauza celor 20 de pixeli adaugati. Din nou vom scadea din latimea coloanei de postare.
Cautati deci codul:

    #main-wrapper {

si sub el gasiti width: 524px; schimbati pe 524 cu 504 si previzualizati.  Dupa cum vedeti sidebar-ul a revenit pe pozitie. Observati si spatiul dintre coloane.
Ar mai fi o problema de rezolvat si anume sa departam scrisul de bordura din jurul elementelor.

Pentru a face asta avem la dispozitie 2 metode

1. Daca nu doriti sa aveti bordura in jurul coloanelor tot ce trebuie sa faceti este sa cautati acolo unde ati adaugat aceasta linie :

    border: 1px solid #000000;

 si sa schimbati valoarea lui 1 cu 0 si bordurile vor disparea rezolvand astfel si problema textului lipit de bordura.

Stergand bordurile latimea celor trei elemente scade cu 6 pixeli. Acesti 6 pixeli ii vom adauga la main-wrapper.
Cautati deci aceste linii

#main-wrapper {
width: 504px;

si schimbati pe 504 cu 510.

Daca distanta de 10 pixeli creata prin adaugarea codului margin-right:10px;  intre coloane vi se pare mica atunci cresteti valoarea lui 10 cu ce dimensiune doriti dar apoi nu uitati sa-i scadeti ori din latimea coloanei de postare, ori din latimea sidebar-urilor.

2. Daca doriti sa pastrati bordura din jurul coloanelor atunci urmati aceasta varianta.  Cautati aceste linii:

    #main-wrapper {
    #sidebar-wrapper {
    #sidebar2-wrapper {

si dupa fiecare dintre ele adaugati urmatoarea linie:

    padding: 0 5px 0 5px;

Previzualizati.

Prin adaugarea acestei linii din nou sidebar-ul din dreapta cade, datorita adaugarii a 30 de pixeli in plus. Pentru a reveni la normal din nou trebuie sa taiem din latimea coloanelor. Deci acum

ramane la alegerea voastra din care sa taiati. Cautati urmatoarele linii:

    #main-wrapper {
    #sidebar-wrapper {
    #sidebar2-wrapper {

Sub fiecare dintre ele veti gasi si latimea :

#main-wrapper {
width: 504px;   modificati 504 cu 494

#sidebar-wrapper {
width: 220px;   modificati 220 cu 210

#sidebar2-wrapper {
width: 220px;   modificati 220 cu 210




Previzualizati si daca va place cum arata sablonul creat de voi, salvati-l.
Din nou avem problema cu descrierea blogului care este deplasata spre stanga. Pentru a corecta asta gasiti acest fragment de cod:

    #header .description {
      margin:0 5px 5px;
      padding:0 20px 15px;
      max-width:700px;
      text-transform:uppercase;
      letter-spacing:.2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
     }

Stergeti aceasta linie

     max-width:700px;

si prezizualizati. Daca e bine salvati.