Fala aí gente, aqui é o Anon e hoje venho trazer a terceira parte do tutorial de como programar seu layout!Bem, vamos la então Mother Fuckers! Bem, no tutorial de hoje iremos posicionar e personalizar todas as sidebars (colunas de gadgets) do template. Sem mais delongas, vamos la!
Vamos dar início buscando por "<div id='sidebar-wrapper'>". Ao encontrar esse trecho você verá o seguinte código...
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
... pois bem, copie-o e apague. Vamos inseri-lo acima de "<div id='content-wrapper'>". Feito isso, vamos criar uma nova sidebar para as HeadLines do template. Procure por "#sidebar-wrapper {"... você irá encontrar o seguinte código:
#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 */
}
Copie-o e cole logo após o termino "}" do mesmo e vamos fazer algumas alterações deixando-o assim:
#sidebar-wrapper-headlines {
width: XXpx;
margin:0px 0px 0px 0px;
float: left;
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 */
}
Note que apenas renomeamos a sidebar colocando o termo "-headlines" na frente e definimos o lado em que ela vai se encontrar "float:left" (o mesmo que $startSide) para que fique à esquerda de nosso layout. você deve trocar o ''float'' apenas se suas headlines ficarem à esquerda. E não se esqueça de definir a largura de suas headlines em "width: XXpx;" Agora vamos definir onde ela irá se encontrar no template. Novamente iremos usar esse código...
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
...só que fazendo algumas alterações:
<div id='sidebar-wrapper-headlines'>
<b:section class='sidebar' id='sidebar-headlines' preferred='yes'>
</b:section>
</div>
NOTA: Para que o gadget apareça no seu painel você deve procurar por "<div id='crosscol-wrapper'" e apagar o trecho:
<div id='crosscol-wrapper' style='text-align:center'>
</div>
...vamos adicionar o código acima de "<div id='content-wrapper'>". Pronto, o gadget dedicado às HeadLines já está adicionado. Agora você deve adicionar um gadget para testes e posicionar com "margin" no "#sidebar-wrapper-headlines". Se houver dúvidas com relação à adicionar uma nova sidebar, acesse esse LINK (um maravilhoso tutorial feito pelo menu
"querido" Jonny William
Agora vamos adicionar nossa sidebar onde ficará nosso menu. Busque (mais uma vez -.-") por "#sidebar-wrapper" e vamos adicionar mais uma sidebar como fizemos anteriormente...
#sidebar-wrapper-esquerda {
width: XXpx;
margin:0px 0px 0px 0px;
float: left;
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 */
}
Note que apenas renomeei ela, adicionei margin, width (largura) e float. Busque agora por "<div id='content-wrapper'>"
Acima iremos colar o código:
<div id='sidebar-wrapper-esquerda'>
<b:section class='sidebar' id='sidebar-esquerda' preferred='yes'/>
</div>
Nossa sidebar já está adicionada, agora adicione um gadget pra testes e posicione com 'margin' no
"#sidebar-wrapper-esquerda". Bem, por hoje é só, estou cansado de digitar. Até a próxima parte, aliás, pra parte 4 vão ter que conseguir 20 mil seguidores! Pra nunca mais ter que escrever essa %$@#.
Brincadeira, 100 seguidores já são o suficiente. Também quando alcançarem 100 seguidores o Lord-kun ou LordF28 vai fazer não lembro o que de especial.. mas é bom. E o Garug um SUPER ULTRA FUCKING TEMPLATE PREMIUM pra cada usuário da Design On Brasil. COMENTEM POR FAVOR.
É isso aí, qualquer dúvida tire comigo ou com qualquer outro la no xat.
adorei a postagem,porem tenho um defeito no meu template,,quase certo só falta esse defeito..quando adiciono um gadget e posiciono ele sem texto e alinho com marging,quando coloco o texto desalinha e se coloco com texto e tiro o mesmo,desalinha,como alinha texto junto com titulo alinhado,podendo escolher tanto sem titulo quanto sem e estar alinhado?
ResponderExcluirmeu email é >>>> kagero_dsn@hotmail.com <<<<...brigado por existir esse site!!!!!