Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Programando LayOut - Parte 03

    < Parte 01 | < Parte 02


     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.

    Um comentário:

    1. 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?
      meu email é >>>> kagero_dsn@hotmail.com <<<<...brigado por existir esse site!!!!!

      ResponderExcluir