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 

Personalizando a caixa de comentários

Yo galera nesse tutorial eu vou encinar a vocês como personalizar a área de comentários,esse tutu vai encinar a vocês um pouco de CSS então preste muito atenção a aula está preste a começar...

                                                                   Demo
           /--------------------------------------------------------------------------------------------------------------/
           Procure pela tang:

b:skin

Acima desse tang cole esse código

<br /> /* Container Comentários<br /> ----------------------------------------------- */<br /> .comments {<br /> background: none repeat scroll 0 0;<br /> clear: both;<br /> color: #000 !important;<br /> margin-bottom: 0;<br /> margin-top: 10px;<br /> padding: 5px;<br /> }<br /> #comments h4 {<br /> color: #000 !important;<br /> font-family: Arial;<br /> letter-spacing:0;<br /> font-size: 20px;<br /> text-transform: capitalize;<br /> }<br /> .comment-header {<br /> background: none repeat scroll 0 0 #ccc; /* COR DA BARRA DE INFOS. DO COMENTÁRIO */<br /> display: block;<br /> color: #000 !important;<br /> margin: 10px -10px !important;<br /> padding: 10px 0 10px 50px !important;<br /> }<br /> .comment-header a {<br /> color:#fff !important;<br /> }<br /> .comment-header a:hover {<br /> text-decoration:none;<br /> }<br /> .comments .comment-block {<br /> background: #e1e1e1; /* COR DO FUNDO GERAL */<br /> border-radius: 20px 20px 20px 20px; /* BORDA GERAL DO FUNDO */<br /> font-family: calibri,arial;<br /> margin-left:0 !important;<br /> padding: 5px 10px;<br /> position: relative;<br /> }<br /> .comments .comments-content .user {<br /> font-size: 20px;<br /> }<br /> .comments a, .comments-content .user a {<br /> opacity: 0.8;<br /> font-weight:normal;<br /> font-size: 18px;<br /> font-family: Arial;<br /> color:#fff !important;<br /> text-shadow:0px 0px transparent !important;<br /> padding-top:20px !important;<br /> }<br /> .comments .avatar-image-container {<br /> margin: 20px 0 0 5px;<br /> }<br /> .comments .avatar-image-container img {<br /> position:relative;<br /> z-index:999;<br /> }<br /> .comment-actions a {<br /> opacity:0.4;<br /> border-radius:5px; /* BORDA DOS BUTTONS */<br /> font-family:Arial;<br /> font-size:13px;<br /> color:white;<br /> background:#ccc !important; /* COR DOS BUTTONS DE RESPONDER E EXCLUIR */<br /> margin-left:2px !important;<br /> margin-bottom:2px !important;<br /> padding:2px 2px 4px 4px !important;<br /> -webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;<br /> }<br /> .comment-actions a:hover {<br /> opacity:100;<br /> -webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;<br /> }

        /--------------------------------------------------------------------------------------------------------------/
          Agora é só você editar o código de acordo com seu templete,dica copie e cole esse código no blocos de notas edite ele e já cole no HTML do seu site pronto.

~Yo minna

Galera já estou começando o system do templete Bleach key.

Templete Bleach [EM BREVE]

Templete Bleach Key-Por Hunter

(Clique para ampliar)