Tutorial:Programando um Layout - parte 3

ae pessoal,não quero mais continuar essa bosta de tutorial,pois eu tento ajudar e vem pessoas falando que a porra do tutorial ta um lixo,ou seja,eu dou minha alma pra ajudar vocês e vem neguinhos e falam que a porra do tutorial ta um lixo....eu tenho meus compromissos,e ainda sim tento ajudar vocês,e vem pessoas(nem sei se da pra chamar de pessoas,e sim uns filha duma égua)falando que meu tuto ta um lixo.faça-me o favor viu,eu tento ajudar vocês e só tomo no meu cú.bom,eu não quero continuar,mas vou continuar por que eu sou integro no que faço e não vou deixar vocês que gostam do meu tutorial na mão.e um recado pra quem num gosta do meu tuto :

VAI TOMAR NO CU BEM REDONDO !!!

[CONTINUE LENDO PORRA]

Bom desculpe o linguajar ali em cima,eu estou nervoso com tudo isso e tal...

OBS:é preciso saber as propriedades da MARGIM.

nessa aula ensinarei a instalar os gadgets....

bom,comece procurando por :

#main-wraper

você achou o seguinte código :

#main-wrapper {width: 410px;float: left;margin:0px 10px 0px 0px;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 */}

ajeite na margin,o posicionamento do post em relação as sidebares.

agora procure por :

sidebar-wrapper

você provavelmente acho esse codigo :

.sidebar-wrapper {width: 210px;float: left;margin:0px 0px 0px 0px;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 */}

copie esse codigo e cole abaixo , só que faça uma alteração,deixando o codigo assim :

.sidebar-wrapper-2 {width: 210px;float: left;margin:0px 0px 0px 0px;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 */}

agora procure por :

class='sidebar-wrapper'>

você deve ter encontrado esse código :

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/></b:section></div>

mas se você abaixar um pouco mais achará outra DIV igual a essa,(só se você usar o minima que indiquei)e essa DIV estará grifada de amarelo,por entanto vamos trabalhar nessa.substitua o 'sidebar-wrapper' por 'sidebar-wrapper-2'

deixando o codigo assim :

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

agora volte no sidebar-wrapper e vá alterando as margins até que a sidebar alcance onde você quer...

para acrescentar mais sidebares,basta copiar a parte CSS (sidebar-wrapper) e copiar a parte HTML(class='sidebar-wrapper'>
) sempre alterando as classes.

classes a alterar:

class='sidebar-wrapper-2'>(toda vez que acrescentar uma sidebar,terá que mudar o nome da sidebar)
exemplo :
sidebar-wrapper-2
sidebar-wrapper-3
e assim por diante...


<b:section class='sidebar' id='sidebar2' preferred='yes'>(toda vez que acrescentar uma sidebar,terá que mudar o ID da sidebar)
exemplo:
sidebar2
sidebar3
sidebar4
e assim por diante

e se você colocou "sidebar-wrapper-2" no CSS,você tem que colocar "sidebar-wrapper-2" no HTML

se ficou alguma duvida me contate pelo xat tudo bem ? estou apto a ajudar vocês no que for !!

acho que é basicamente isso o system de um template,depois vem como mudar a área do post e etc....

na próxima aula ensinarei a como colocar o system de avatar,o titulo da postagem e tudo mais nos devidos lugares