Progamando Site- Avançado

Opa galera, Aqui e o Math Trago um tutorial fundamental ou OBRIGATÓRIO para criação  de layots [TEMPLATES] 

Aprenderemos a como Duplicar Sidebar's, criar post area, algumas propriedades fundamentais entre outras coisas

1º Veremos sobre algumas propiedades

Primeiramente.. Para que serve o padding ? Vamos dizer assim que e um forma de "empurrar" o conteúdo (Um texto por exemplo) sem movimentar a Imagem e muito usado na Post areá as vezes o conteúdo da Post areá esta fora da imagem para movimenta-la eu uso a tag

padding: xxpx xxpx xxpx xxpx:

Bom encontramos "xx" esses "xx" vocês mudem para o Px que bem entenderem

2º Propriedade

 Bom diferente da propriedade "padding" Margin serve para "Empurar" tanto o conteúdo quanto a imagem .. como uso-a ?

margin: xxpx xxpx xxpx xxpx:

Bom encontramos "xx" esses "xx" vocês mudem para o Px que bem entenderem

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Agora veremos duplicar ou criar outras sidebar's

Você Procure por .sidebar-wrapper ou #sidebar-wrapper

deve ter encontrado algo parecido


#sidebar-wrapper {
  width: 209px; 
  margin-right: 40px;
  margin-top: -50px; 
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;    
}

e so copiar e colar embaixo com outro nome por exemplo...


#sidebar-wrapper2 {
  width: 209px; 
  margin-right: 40px;
  margin-top: -50px; 
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;    
}

E claro que você terá (provavelmente) que editar largura e tamanho e só editar no "width"

Agora procure novamente por sidebar ate encontrar essa tag


<div id='sidebar-wrapper'>

Você deve ter encontrado


<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar-publicidade' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
      </div>

Ou algo parecido copie e cole ANTES da tag mudando o nome ATENÇÃO o mesmo nome que você renomeo




     

Como colocar Post Area

Procure no seu HTML por "/* Posts" abaixo coloque

<br /> .post h3 {<br /> background:url(imagem do topo DA POST)no-repeat;<br /> width:685px;<br /> height:122px;<br /> } </div>

Post H3 e a imagem do topo da post então e só arruma a largura e colocar sua imagem

Procure no seu HTML por "/* Posts" abaixo coloque

.post-body { <br /> background:url(Imagem do meio)no-repeat; <br /> font-family:Arial; <br /> font-size:13px; <br /> color:#000;<br /> width:650px;<br /> margin:-15px 0 0 20px;<br /> }

onde esta "Imagem o meio" cole sua imagem do meio

Procure no seu HTML por "/* Posts" abaixo coloque

.post-footer {<br /> background:url(Imagem da parte de baixo da post)no-repeat;<br /> width:685px;<br /> height:55px;/*---Edite a LARGURA---*/<br /> }

Edite onde tem "Imagem da parte de baixo da post" coloque sua URL da parte de baixo

Lembrando de sempre editar as larguras e tamanhos.. bom essa aula foi comprida mas espero que ajuda bastante fui