Se afișează postările cu eticheta Cum creezi un sablon. Afișați toate postările
Se afișează postările cu eticheta Cum creezi un sablon. Afișați toate postările

joi, 13 august 2009

Cum sa adaugi 3 coloane in footer pe Blogger

Dupa cum stiti blogurile de pe Blogger sunt prevazute cu o singura coloana pentru footer, exceptie facand doar sabloanele care sunt modificate deja.
3 coloane in footer-ul sablonului aduce un plus de flexibilitate  in adaugarea continutului, mai ales daca aveti widget-uri care nu au o latime prea mare.


Acest truc este gasit aici (Create Three Column Footer in Blogger)


Aceasta metoda creeaza 3 noi coloane in footer lasand totusi intacta coloana pe care o aveti deja in footer. Din pacate gadget-urile deja existente vor fi afectate, dar modalitatea de a le pastra este urmatoarea:
Inainte de a umbla la html-ul sablonului duceti-va la Aspect --> Elemente de pagina si mutati toate gadgeturile din footer in sidebar, sau sub postare. Asta pana cand vom modifica footer-ul, apoi le veti putea muta din nou la loc.

Acum vom trece la modificarea sablonului. Urmati calea Aspect --> Editati Html si primul lucru pe care il veti face este sa salvati o copie a sablonului, in calculatorul vostru.
Lasati casuta pentru extinterea sablonului NEBIFATA.

Cautati urmatorul cod:

]]></b:skin>

si inainte de el copiati codul de mai jos.

#footer-column-container {
clear:both;
}


.footer-column {
padding: 10px;
}

Al doilea pas consta in gasirea urmatorului grup de coduri:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Codul va arata asa doar daca ati mutat gadget-urile din footer, sau daca nu aveati oricum nici un gadget adaugat.
Acum pentru a termina treaba inlocuiti aceasta linie:
<b:section class='footer' id='footer'/>
cu acest cod:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Previzualizati pentru a vedea daca va da vreo eroare si apoi salvati. Duceti-va la Elemente de pagina si veti vedea ca cele 3 coloane s-au format, nemaitrebuind decat adaugarea de continut in ele. Observati ca a ramas si coloana originala. In ea puteti la fel sa adaugati continut, sau puteti sa o lasati goala.






Daca vreti sa personalizati footer-ul nu trbuie decat sa adaugati definitii dupa acest cod:
#footer-column-container {
dar daca folositi si footer-ul original atunci trebuie sa il personalizati si pe acesta.

marți, 21 iulie 2009

Cum sa modifici fundalul la sabloane pe Blogger

In acest acest tutorial as vrea sa va arat cum sa modificati culorile de fundal sau adaugarea de imagini la elementele unui sablon.
Priviti-l ca o continuare la celelalte 2 tutoriale despre cum sa creezi un sablon cu 3 coloane si cum sa creezi un sablon cu 3 coloane - varianta 2
Vom lucra din nou pe sablonul default de la Blogger si anume sablonul Minima. Pentru un aspect mai placut al sablonului vom modifica putin dimensiunile pe care le are acest sablon, dar vom ramane tot la un sablon cu 2 coloane (sidebar dreapta)

Sa zicem ca vrem ca sablonul nostru sa aiba corpul de 815 pixeli, cu o coloana de postare de 550 pixeli si un sidebar de 250 pixeli.

Pentru asta vom cauta urmatoarele coduri:

#header-wrapper {
#outer-wrapper {
#footer {

iar sub ele vom gasi aceasta linie: 

width: 660px;

modifica pe 660 cu 815 si astfel vom mari corpul sablonului, latimea header-ului si a footer-ului.

In acest moment daca previzualizati veti vedea ca latimea corpului sablonului a crescut dar coloana de postare si sidebar-ul au ramas la aceeasi dimensiune. Pentru a rezolva asta trebuie sa marim cele 2 elemente ale sablonului.

Pentru a mari coloana de postare (main-wrapper) cautati aceste coduri:

#main-wrapper {
  width: 410px;

si modifica pe 410 cu 565.

Pentru a mari latimea sidebar-ului cautati aceste coduri:

#sidebar-wrapper {
  width: 220px;

si modifica pe 220 cu 250.

Acum avem cele 2 elemente care adunate latimile ne da 815, exact cat ne doream. Dar daca previzualizati sablonul veti vedea ca cele 2 coloane sunt lipite una de alta. Pentru a rezolva si asta vom adauga o distanta de 15 pixeli intre ele.

Cautati acest cod:

#main-wrapper {

si imediat sub el adaugati aceasta linie

margin-right: 15px;

Previzualizati si vedeti ca sidebarul a cazut sub coloana de postare din cauza celor 15 pixeli adaugati. Aceasta problema o vom rezolva prin gasirea codului

#main-wrapper {

si putin mai jos prin gasirea codului care defineste latimea coloanei de postare

width: 565px;

modificati pe 565 cu 550.

Previzualizati si vedeti ca sidebar-ul a revenit pe pozitie. Acum sablonul nostru arata exact asa cum ne doream.



Dupa ce am adus corpul sablonului (#outer-wrapper) la latimea de 815 pixeli observam ca in stanga si dreapta avem ramasa o portiune nefolosita. Aceste portiuni plus tot spatiul de sub outer-wrapper formeaza fundalul (background-ul) sablonului. Acesta are o latime de 1024 pixeli.
Fundalul sablonului este dat de aceasta definitie:

body {
  background:$bgcolor;

in care body { reprezinta tot fundalul sablonului si este trecut in codul de mai sus pentru a sti ce sa cautati, iar background:$bgcolor; reprezinta codul care produce fundalul si de care ne vom ocupa in continuare.

La inceputul sablonului veti gasi acest text: /* Variable definitions iar sub el se afla toate codurile unde se pot modifica toate elementele care se pot schimba si din pagina "Fonturi si culori" , adica fundalul sablonului, culoarea textului, a link-ului, marimea fontului etc.

De exemplu pentru a modifica fundalul fara a umbla la definitia pe care am aratat-o mai sus, puteti modifica aici unde este scris cu rosu:

<Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">


Si apoi fiecare linie de genul asta aplica cate o schimbare elementelor de care aminteam mai sus.

Am vazut ca pentru a modifica fundalul sablonului nu trebuie sa umblam la definitia pe care o are primita in portiunea body { a sablonului. Dar daca totusi dorim asta atunci modificarea va arata asa:

body {
  background: #857553;

Acum sablonul nostru v-a arata ca in poza de mai jos.



Puneti o poza ca fundal

Dar ce se intampla daca vreti sa puneti o poza drept fundal pentru blog. Pai sa zicem ca sunteti fan Batman si aveti un wallpapers care ar arata super drept fundal. In prima faza trebuie sa va hostati poza pe un host care va pune la dispozitie un link direct catre poza. Dupa ce aveti link-ul pozei ne intoarcem la editarea sablonului. Aici va recomand un program micut care recunoaste orice culoare (vezi aici cum functioneaza Pixie) si cu ajutorul lui eu am aflat ca partea de jos a pozei este negru perfect. Asta ma ajuta pentru ca vreau ca poza pusa ca fundal sa nu se repete pe toata lungimea sablonului, ci sa fie afisata decat odata.

Deci voi inlocui acest cod:

body {
  background:$bgcolor;

cu acesta

body {
  background:#000000 url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmTvJPc2sCI/AAAAAAAAJ3M/a8SECdge7Zo/s1600/Dark_Knight6.JPG') no-repeat;

Daca previzualizati veti vedea ca fundalul sablonului este chiar poza noastra, dar daca derulam pagina , mai jos vedem ca fundalul este negru. Asta se intampla pentru ca pe langa faptul ca am pus o poza drept fundal, am pus si o culoare (#000000 - negru) care sa continue ca fundal sub poza.



Daca totusi vreti ca poza sa se repete doar pe lungime atunci codul va arata asa:

body {
  background:#000000 url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmTvJPc2sCI/AAAAAAAAJ3M/a8SECdge7Zo/s1600/Dark_Knight6.JPG') repeat-y;

Previzualizati si vedeti ca poza se repeta la infinit, oricat de lung ar fi sablonul nostru. Observati ca am pastrat si culoarea pentru fundal; asta pentru ca poza ar putea fi mai mica de 1024 si atunci ar ramane spatiu neocupat. Acum ce va ramane de facut este sa modificati si culorile textului.

Ar mai fi si varianta in care nu vreti ca poza sa se deruleze odata cu celelalte parti ale sablonului, adica sa ramana in permanenta pe ecran chiar daca vizitatorul face scroul pentru a citi textul;

atunci codul va arata asa:

body {
  background:#000000 url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmTvJPc2sCI/AAAAAAAAJ3M/a8SECdge7Zo/s1600/Dark_Knight6.JPG') no-repeat;
  background-attachment:fixed;

Salvati sablonul si veti vedea ca acum poza voastra ramane fixa pe ecran

Sa cautam pe Google cuvintele "web backgrounds" si vom da peste un site care ofera gratuit o gramada de fundaluri pe care le puteti folosi. Daca vreti sa le folositi copiati unul in calculator si apoi hostati-l pe un host gratuit care va ofera link direct catre poza.



Dupa cum vedeti poza noastra este foarte mica si nu acopera tot fundalul sablonului. Nu este nici o problema pentru ca fiind o poza special creata pentru fundaluri ea se poate repeta si pe latime si pe lungime facand un tot unitar. Asta se poate realiza astfel:

body {
  background: url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmVaIp63xOI/AAAAAAAAJ3U/tx7kbempyK0/s1600/brown003.jpg');

Previzualizati si vedti ca poza noastra a acoperit tot fundalul. Daca analizam acest cod vedem ca am eliminat culoarea pentru fundal deoarece nu mai avem nevoie de ea, poza ocupand absolut toate spatiile din fundal. Am scos si functia de no-repeat si am lasat setarea implicita a codului care este de a se repeta si pe latime si pe lungime. Din nou ce va ramane sa faceti este sa schimbati culoarea textului.

O alta varianta pe care o voi prezenta este repetarea pe latimea blogului.
Tot pe site-ul pe care l-am gasit pe Google avem posibilitatea de a crea un fundal gradient, adica vom pleca de la o culoare si vom ajunge la alta. Vom avea deci pe fundalul sablonului 2 culori.

Aceste culori este bine sa nu fie prea diferite pentru ca textul sa poata fi citit pe ambele culori.

Intrati aici pe site-ul gasit si la pasul 1 bifati "Vertical", la pasul 2 puneti valoarea 500, iar la pasul 3 vom alege culorile fundalului. Le puteti alege pe care doriti din tabel, dar eu am ales un portocaliu (#ffeecc) la culoarea de sus si am lasat albu (#ffffff) la culoarea de jos. Derulati mai jos si dati clic pe "Make the Gradient Texture". In pagina deschisa va arata o montra de cum va arata fundalul vostru. Derulati un pic mai jos pana la "Instructions" si dati clic la punctul 1 pe "the texture". Se va deschide o noua pagina cu fundalul nostru si dupa cum vedeti este doar un firicel de culoare care trece de la portocaliu la albu.
Dati clic pe imagine pentru a mari.



Salvati poza si hostati-o pe hostul vostru. Acum dupa ce avem link-ul pozei vom merge la editarea sablonului si vom modifica codul fundalului astfel:

body {
  background:#ffffff url('http://3.bp.blogspot.com/_i6co2fwMbTo/SmVk8nZ1PiI/AAAAAAAAJ3c/gM2CpfZuL88/s1600/gradient81043431.png') repeat-x;

Previzualizati si vedeti ca fundalul nostru este acum in 2 culori, incepand de la portocaliu si pierzindu-se in alb. Analizand codul nostru vom vedea ca din nou avem o culoare ca fundal si anume albul care formeaza fundalul dupa ce se termina poza. Apoi observati ca dupa url-ul imaginii am pus functia de repeat-x. Aceasta face ca poza noastra subtire sa se repete pe toata latimea sablonului oricat de mare ar fi ea.

Ultima varianta pe care v-o prezint este repetarea pe lungime a unei poze foarte ingusta. Am gasit pe acest site un fundal care da impresia de
agenda sau cam asa ceva.
Clic pe imagine pentru a mari.



Cu aceasta poza codul nostru va arata asa:

body {
  background: url('http://2.bp.blogspot.com/_i6co2fwMbTo/SmVpBaLVDtI/AAAAAAAAJ3k/JKONhmfjr-w/s1600/bordb2.gif') repeat-y;

Previzualizati si vedeti in partea stanga efectul de agenda si faptul ca poza se repeta pe toata lungimea sablonului. Acest lucru se datoreaza functiei de "repeat-y" pe care i-am dat-o fundalului.

Ce v-am aratat eu aici sunt doar cateva metode a aplica un fundal nou unui sablon blogspot, dar se pot face o gramada de alte lucruri, depinde de cat de mult Css inveti si de imaginatia pe care o ai.

Aceste metode pe care le-am aratat mai sus in cazul fundalului sablonului, se pot aplica si celorlalte elemente ale sablonului.
De exemplu daca vreti sa schimbati numai fundalul corpului sablonului (outer-wrapper) si sa zicem ca avem un fundal pe negru pentru intreg sablonul, dar vrem ca corpul sa fie alb atunci cautam urmatorul cod:

#outer-wrapper {

si imediat dupa el adaugam urmatorul cod:

background: #ffffff;



Daca previzualizati vedeti ca partea in care sunt incluse elementele sablonului este alba. Dar nu suntem multumiti doar cu atat si vrem ca, coloana de postare sa fie bleo, atunci cautati codul:

#main-wrapper {

si imediat dupa el adaugati acest cod:

background: #D6E7FF;

Daca vreti sa folositi o imagine o puteti face dupa metodele aratate mai sus. La fel puteti proceda si cu sidebar-urile (adauga-ti codul dupa #sidebar-wrapper { ) sau cu footer-ul (adaugati codul dupa #footer { ).


Aplicati un fundal pentru Header
In cazul header-ului (header-wrapper) puteti la fel de bine aplica metodele aratate in cazul celorlalte elemente aplicand codul pentru fundal dupa acest cod #header-wrapper {, dar totusi header-ul este un pic mai special pentru ca acolo multi prefera sa puna o poza personalizata, care sa reflecte un pic si continutul din blog.

Dar haideti sa vedem cum facem. Dupa cum stim avem un sablon cu latimea de 815 pixeli, si pentru a nu arata ciudat am marit si header-ul la aceeasi dimensiune. Acum pentru a adauga o imagine ar fi bine sa adaugam si un height (o latime pentru header). Deci haideti sa facem un header cu: width: 815 si height 200. Codul pentru width il avem deja adaugat, mai ramane sa adaugam codul pentru height.

Gasiti codul :

#header-wrapper {

si imediat sub el adaugati

height: 200px;

Dupa cum vedeti header-ul nostru sa marit dar avem 2 randuri de borduri si vrem sa le stergem.
Un pic mai jos de #header-wrapper { gasim acest cod:

border:1px solid $bordercolor;

Pentru sterge bordura exterioara a header-ului fie stergeti toata linia, fie schimbati pe 1 cu zero.
Dupa ce am rezolvat cu bordura exterioara trebuie sa o stergem si pe cea interioara.

Cautati codul:

#header {

si putin mai jos veti gasi acest cod:

border: 1px solid $bordercolor;

Procedati ca mai sus.

Acum daca previzualizati veti vedea ca nu mai avem nici o bordura si este timpul sa adaugam poza noastra. Am gasit pentru blogul nostru un header cu dimensiunile care ne trebuiau.



Deci dupa ce faceti rost de un astfel de banner, hostati-l undeva si cu link-ul obtinut vom face codul pentru header
Cautati codul:

#header-wrapper {

si imediat dupa el adaugati urmatorul cod care trebuie sa cuprinda link-ul spre poza voastra:

background: url('http://1.bp.blogspot.com/_i6co2fwMbTo/SmV9XaSAVHI/AAAAAAAAJ3s/GeN9W3qXGyk/s1600/Coffee_Cup_Newspaper.jpg') no-repeat;

Previzualizati si vedeti ca poza noastra a aparut pe pozitie.

Observati ca avem totusi o mica problema si asta din cauza ca outer-wrapper-ul sablonului are si el un padding de 10 pixeli care inconjoara tot corpul blogului. Daca vreti sa scapati de acei 10 pixeli, tot ce trebuie sa faceti este sa gasiti urmatorul cod:

#outer-wrapper {

si putin mai jos veti gasii aceasta linie:

padding:10px;

Stergeti aceasta linie sau schimbati pe 10 cu zero.



si gata ca a iesit un tutorial super lung. Succes si daca mai aveti si alte intrebari nu ezitati sa ma intrebati.

luni, 20 iulie 2009

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.

sâmbătă, 20 iunie 2009

Cum sa creezi sabloane cu trei coloane pentru Blogger

Este un pic incorent spus 'a creea' pentru ca de fapt veti invata cum sa modificati un sablon dat by default de Blogger si anume 'Sablonul Minima'. Deci vom modifica un sablon gata creat cu 2 coloane si il vom transforma intr-un sablon cu trei coloane, adica un sablon cu o coloana principala pentru postare si 2 sidebar-uri unul stanga si unul dreapta.