Curta Nossa Página do Facebook!


  • Desenvolvido Por Iago Melanias

    Estruturando a sidebar

    Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial pra vocês õ/! Bem, no tutorial de hoje, vou ensinar a "estruturar uma sidebar, você deve ter se perguntado "e o que seria especificamente isso?". Um exemplo disso.. aí vai. Olhe a sidebar, ela tem "header, outer e footer".

    Demonstração


    ANTES DE FICAR PERGUNTANDO NA DROGA DO XAT, CERTIFIQUE-SE DE QUE VOCÊ LEU TUDO O QUE EU ESCREVI, EU NÃO PERCO MEU TEMPO ESCREVENDO TEXTOS PARA SEREM IGNORADOS. SE VOCÊ LEU TUDO E FICOU COM DÚVIDAS, VOCÊ ESTÁ BEM VINDO A CONVERSAR COMIGO NO XAT PRIVADO.

    LINKS ÚTEIS
    Aprenda a usar o maldito margin/padding
    Fatiando sidebar


    Sem mais delongas, vamos la! SEM EXPANDIR OS MALDITOS MODELOS DE WIDGETS, busque por:

    h2 {

    No minima original, ou seja, sem alterações feitas você pode encontrar esse trecho assim:


    h2 {
    margin:1.5em 0 .75em;
    font:$headerfont;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:$sidebarcolor;
    }


    Iremos substituir esse código por:

    #sidebar-wrapper h2 {
    background:url(TOPO DA SIDEBAR)no-repeat;
    width:XXpx;
    height:XXpx;
    text-align:left;
    font-weight:normal;
    margin:0px 0px 0px 0px;
    padding:0 0 0 0px;
    font-family:XXX;
    font-size:XXpx;
    color:#XXXXXXX !important;
    letter-spacing:1px;
    line-height:XXpx;
    }

    #sidebar-wrapper .widget-content {
    background:url(MEIO DA SIDEBAR)repeat-y;
    margin:0 0 0 0;
    padding:0 0 0 0;
    }

    #sidebar-wrapper .widget{
    background:url(RODAPÉ DA SIDEBAR)no-repeat bottom;
    padding:0px 0px XXpx 0px;
    }


    As partes em vermelho, provavelmente, você terá de mudar. Por que mudar? Bem, você terá de mudar de acordo com a sidebar que você quiser estruturar. E como eu sei qual sidebar que estou estruturando? Eu não sei, há 99% de chances do seu code ser diferente do meu.. '-'

    NOTAS (LEIA ESSA PORRA, EU NÃO AS ESCREVO A TOA..
    Vamos a algumas notas agora:

    width:XXpx; ------LARGURA DA SUA IMAGEM
    height:XXpx; -----ALTURA DA SUA IMAGEM
    font-family:XXX;--DEFINA A FONTE DO TÍTULO(Arial, Calibri, Impact, etc)
    font-size:XXpx;---DEFINA O TAMANHO DA FONTE(DO TÍTULO)
    color:#XXXXXXX !important;--DEFINA A COR DO TÍTULO
    line-height:XXpx;-----------É A PARADA QUE DEFINE SE O TÍTULO DA SIDEBAR VAI SUBIR(COM NÚMEROS NEGATIVOS) OU DESCER (COM NÚMEROS POSITIVOS

    #sidebar-wrapper .widget{
    background:url(RODAPÉ DA SIDEBAR)no-repeat bottom;
    padding:0px 0px XXpx 0px;
    }

    Provavelmente quando adicionar as imagens da sua sidebar o rodapé dela vai ficar separado, portanto, substitua o "XX" por números(tenta a sorte aí..).

    0 Deixe um Comentário:

    Postar um comentário