Iniciantes Sidebar Vanessa S.
Personalizando a Sidebar
Dando prosseguimento a série de postagens sobre as Variaveis CSS e os Elementos do Blogger, aqui neste post vamos falar sobre a variavel #sidebar-wrapper que corresponde aquela coluna do perfil.
[alerta]Lembre-se que este tutorial se aplica apenas para templates Minima ou modificados. Nos modelos Designer de modelo a código referente a sidebar podem variar dependendo do modelo que você estiver usando e da quantidade de colunas que você já tiver determinado.[/alerta]
Esta variavel está localizada no corpo do html do seu, mais precisamente neste trecho abaixo:
#sidebar-wrapper {
width: 240px;
float: $endSide;
color: $sidebartextcolor;
line-height: 1.8em;
margin:
5px 0 10px 0;
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 */
}
Se você quiser modificar a largura da coluna na sidebar, altere os valores que estão em width. Quanto maior for o valor da widht, mais larga será a sua coluna.
Lembrando que este código acima eu peguei do template Minima (template do proprio blogger). Se você utiliza um template modificado este código pode estar diferente, neste caso procure pelo titulo “sidebar-wrapper” no corpo html do seu blog.
Lembrando que:
#sidebar-wrapper -> é a área total da coluna.
Vejamos outro exemplo:
.sidebar {
width: 220px;
color:#000;
padding:0 0 0 0;
}
.sidebar -> é o interior da Coluna.
Personalizando as cores da sidebar:
Se você quiser incluir uma imagem ou cor na coluna .sidebar, que seja diferente da coluna total (#sidebar-wrapper}, acrescente background em .sidebar , dessa forma:
.sidebar {
width: 220px;
background: #fff url(endereço-da-imagem) repeat-x;
color:#000;
padding:0 0 0 0;
}
Se você quiser, pode acrescentar cor ao fundo da sidebar, para destacá-la no seu blog, inclusive pode acrescentar uma imagem de fundo (background).Para isso, acrescente no código, a seguinte linha :
background-color: #000000; -> apenas cor do fundo
Consulte a Tabela de Cores html.
Se quiser acrescentar uma imagem como plano de fundo, utilize este código:
background:transparent url(URL DA SUA IMAGEM)repeat; -> apenas imagem ao fundo
Sobre as maneiras que você pode estipular o comportamento da imagem do fundo, você poderá seguir as mesmas dicas aplicáveis a background, no artigo Modificando o Background do Blog.
Dica: Você pode usar uma imagem que não se repita na vertical e manter o restante do fundo com uma determinada cor, para que haja uma continuação da cor ao final da imagem.
Veja o exemplo:
background: #000000 url(URL DA SUA IMAGEM) repeat-x;
Se quiser você também poderá aplicar um efeito gradiente ao background.
Leia outros artigos que tratam sobre personalização com efeitos diferentes, talvez você se interesse em conhecer outras maneiras de personalizar a sidebar do seu blog:
• Personalizar Bordas
• Efeito Sombreado
• Bordas arredondadas
Personalizando o título da sidebar:
Se você estiver utilizando o template Minima, você deverá acrescentar o código abaixo. Para outros templates, este trecho já deve constar no código, basta procurar por ele no corpo do html do seu blog:
.sidebar h2 {
color: #FFFFFF; /*--cor da fonte--*/
background: #000000 ; /*--cor de fundo--*/
margin: 10px 0 10px 0;
border: 1px solid $bordercolor; /*--borda em toda coluna do titulo--*/
line-height: 1.5em;
padding: 10px 0 10px 0;
text-align: center; /*--alinhamento do texto do titulo--*/
}
Vamos identificar o que corresponde cada variável, para que você possa defini-las de acordo com sua preferência:
color: é a cor da fonte
background: é aqui que você estabelece a cor do fundo, se quiser pode acrescentar uma imagem
margin: determina a distância entre uma coluna e outra
border: é a borda em volta de toda coluna
line-height: é onde você define a altura da linha
padding: determina as margens internas, é a distância entre o texto e a borda
text-align: é o alinhamento do texto (pode ser: center= Centro, left= esquerda ou right= direita)
Leia outros artigos que tratam sobre personalização com efeitos diferentes, talvez você se interesse em conhecer outras maneiras de personalizar o título da sidebar do seu blog:
• Efeito Sombra
• Bordas arredondadas
Separando as colunas:
Se você quiser, pode estabelecer uma distância de uma coluna para outra, separando-as de forma a dar um visual diferente para sua Sidebar. Para isso, procure por este trecho:
.sidebar .widget, .main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.4em;
padding:0 0 1.4em;
}
E modifique separando desta maneira:
.sidebar. widget{
margin: 0px 0px 20px 0px;
padding:20px 5px 20px 15px;
background: #000000;
border: 2px solid #ffffff;
}.main .widget {
border-bottom:1px solid $bordercolor;
margin:0 0 1.4em;
padding:0 0 1.4em;
}
O template Minima traz o código de widgets do post (main) e da coluna (sidebar) juntos.Se você estiver utlizando o template Minima, você deve separar os dois códigos para que você possa alterar cada um individualmente.
Acrescentar linhas de links na sidebar:
Se no seu template não tiver a linha de código referente a linha de links da sidebar e você quiser acrescenta-la, para poder personalizar a maneira que seus links deverão se apresentar na sidebar.
E acrescente este trecho:
.sidebar ul {
list-style:disc;
margin:0 0 0 0;
padding:0 0 0 0;
}.sidebar li {
margin:0;
padding:0 0 0 15px;
}
Lembrando que você deverá estabelecer os valores de margin e padding de acordo com o seu gosto. Uma dica é sempre ir visualizando antes de salvar as alterações.
Se você quiser acrescentar uma borda abaixo dos links da sidebar, acrescente:
border-bottom: 1px dotted $bordercolor;
no trecho:
.sidebar li{
do código acima, devendo ficar assim:
.sidebar ul {
list-style:none;
margin:0 0 0 0;
padding:0 0 0 0;
}.sidebar li {
margin:0;
padding:0 0 0 15px;
border-bottom: 1px dotted $bordercolor;
}
Veja também, como Personalizar os links da sidebar.
Entendendo melhor cada elemento da sidebar:
.sidebar-wrapper -> é a área total da coluna.
.sidebar -> é o interior da Coluna.
.sidebar h2 -> é a área do titulo da coluna.
.sidebar. widget -> É a área de cada elemento (widget) da coluna. É onde fica o contéudo.
.main .widget -> É a área que trata do widget do post. Tudo que você alterar nesta coluna vai ser alterado também na postagem.
.sidebar li -> Se refere aos itens das listas de links.
.sidebar ul -> Se refere a lista de links inteira.
ALTERANDO A POSIÇÃO DA SIDEBAR:
Se e sua sidebar está no lado direito e você quiser mudá-la para o lado esquerdo
Encontre a tag: #sidebar
E altere:
“float:right;” para “float:left;
Se for o oposto (sidebar no lado esquerdo trocada para o lado direito) é só alterar: “float:left;” para “float:right;”
[alerta]Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima). A eficácia da dica aqui apresentada não foi testada nos novos Designer de Modelo.[/alerta]
Não achei também.
Não achei o código #sidebar…..
Elaine
Não há como eu informar precisamente o código correspondente a sidebar existentes nos templates designer de modelos, pois devido a facilidade de poder escolher como dividir as colunas da sidebar, os códigos referentes a sidebar podem variar, dependendo do modelo que você estiver usando.
Dá uma lida neste artigo:
Presonalizar os titulos da sidebar
Lá u deixei umas dicas que podem ajudar a identificar o código referente a sidebar no modelo de template, designer de modelo. Pode ser que te ajude.
Clau, estou fazendo uns testes com o modelo Picture Window disponibilizado pelo Blogger e gostaria de tirar uma dúvida com você. A sidebar não tem cor de fundo, é transparente. Tem como alterar isso? Gostaria que ela ficasse com o mesmo fundo/borda da área de postagem.
Olá,eu queria tirar uma dúvida,meu template não tem #sidebar-wrapper {,ele é meio complicado,como é que eu faço para adicionar uma imagem na sidebar sem #sidebar-wrapper {?
Se ajudar o nome de meu template é Mystique,o tema verde.
Não tenho nenhumas dessas áreas para modificar a sidebar !
Oi Clau! No meu template, quando eu quero auterar o lado da coluna, ele não autera =/. No meu template, float se encontra assim:
—–>>>> float: $endSide; <<<<——
Já auterei $endSide mas a coluna não vai pro lado que eu quero =/. nem pra esquerda e nem para a direita.
Como se resolve isso/
Resolvido, obrigado. Nesse coiso não havia "width" para alterar. Tive de adicionar.
cumps,
bikercoimbra
Experimente estipular o mesmo valor em .sidebar.widget
É uma sugestão.
Se vc ler o item: "Entendendo melhor cada elemento da sidebar" vai conseguir entender cada item, para tentar descobrir onde está o erro no seu template.
Deixo aqui uma imagem para perceberes melhor o meu problema: http://img522.imageshack.us/img522/6985/semttulocg.jpg
cumps,
Boas, antes de mais nada quero agradecer pela sua disponibilidade e dedicação à ajuda do pessoal. 😉
Bem, entao o que me aconteceu foi que "redimensionei" o sidebar para um tamanho desejado mas, o texto nele contido não acompanhou esse redireccionamento. 😡
Já tentei algumas coisitas mas não consegui mesmo, por é que estou aqui. :b
Orbigado
Clau, como eu faço pra sidebar acompanhar a postagem até o final da página?
E.PSIC.AL
Como vc "mete" eu não sei..mas se vc se refere a inserir o gadget de marcadores, é fácil…é só vc ir na aba "design", clicar em "adicionar gadget" e escolher a opção “marcadores”.
Se quiser dá uma olhada neste artigo no item "INSERINDO MARCADORES NAS POSTAGENS":
Criando uma postagem no blog
Boa tarde Clau,
Gostaria mesmo de ter resposta ao comentário anterior, pode ajudar-me? É que o blogue é para a escola e quanto melhor, mais alta nota 🙂
Beijinho*
Como meto no meu blog, na sidebar, a "categoria de blogger" como você tem?
Muito bom o tutorial! Bem detalhado.
Assim que eu gosto. 😉
Opa! Claro que compreendo, muitíssimo obrigado mesmo!
FJP
Olá, bom dia.
Se vc precisa de atendimento personalizado, peço que dê uma olhada na nossa tabela de serviços que está localizada no menu "Serviços" e solicite orçamento para o tipo de serviço que vc deseja. Infelizmente não posso oferecer este tipo de atendimento individual e personalizado de forma gratuita.
Grata pela compreensão.
Querida "Clau", muito bom dia!Surpreso com a suaeficiência e rapidez em nos responder. Peço encarecidamente que me ajude com esse template, que tento concertar sua sidebar já algum tempo, mas todas as tentativas em vão,me ajuda vai… é um blog de testes esse aqui http://5minutooos.blogspot.com/ Lá eu te explico melhor que está havendo! Desde Já obrigado!
Olá…boa tarde!
Estou montando um blog.e fiz exatamente como voce escreveu acima,apenas personalizei do meu jeito,ou seja…coloquei Bg…E uma sidebar H2 para essas colunas divididaas…mais quando vou adc um gadget,ele apresenta o fundo do sidebar-wraper original,ou seja..fica em cima do bg que eu coloquei…
Será que poderia me ajudar!
Como faço para quando adc um gadget..nessas colunas divididas,nao aparecer dois fundos?
Muito obrigado desde já!
@Jorge G. Goncalves:
Olha pra te falar a verdade, eu não sou adepta a estes novos modelos de designer de template do blogger e como não utilizo nenhum, ainda não estou muito familiarizada com eles. Não sei como te ajudar.Alias, não sei nem como ajudar qdo o assunto é relacionado a esses novos modelos.
Olá Clau
Boa tarde
Talvez você me possa ajudar?
Desde que mudei para o novo template do Blogger, que o blog não carrega nos motores de busca como o google chrome, o mozilla e o opera que são os motores de busca que mais utilizo. Apenas carrega na Internet e dá sempre erro. Tenho tentado ajuda disponibilizada nos vários foruns de todos estes programas, mas ainda não consegui resolver o problema. o blog começa a carregar e depois desaparece a parte do body, com o aviso que é nulo ou não é um objecto. Tenho feito todas as recomendações dadas pelos apoio do blog, mas o problema continua.
Se puder, agradeço.
Com amizade.
JGG
Sim agora entendi,obrigado pela ajuda..
Serve para todos até no header,post,etc..?
Abraços Clau!
@Avelino:
Para fazer com que o IE interprete as imagens, existe um "macetinho": sempre que incluir imagens em background, dê um espaçamento duplo (espaçamento a mais) entre cada elementos, por exemplo:
background:–#000000–url(URL DA SUA IMAGEM)–repeat-x–top–left;
Não é para colocar esses "–", usei isso só pra exemplificar, eles seriam o espaçamento, entendeu?;)
OLá Clau!
Só uma duvida será que você poderia me dizer com a condicional para funcionar imagens no titulo da sidebar sendo que funcionou no FF mais no IE8 não,não sei o que ocorre nunca passei por isso parece que sempre da um problema de imconpatibilidade no IE…
Abraços!
@Holland:
Vc deve estipular as cores dos links ativos e visitados na Sidebar.
Tenta Colocar as cores que vc deseja em .sidebar li e . sidebar ul
Olá estou aprendendo a montar meu blog agora e tenho a seguinte dúvida.
Atualmente meu site está configurado para ter os links na cor branca e os links que já foram usados na cor cinza.
Só que essa configuração não se aplicou a sidebar,só ao corpo do blog, então a sidebar continua com links em azul e roxo. Como modifico para ficar igual ao corpo do blog?
desde já agradeço.
não entendi muito bem , mas mesmo assim obrigada 😀
Herzl:
Eu não entendi bem o que vc quer.
Vc perguntou se caso, no template, as sidebars se apresentem como "right" e left"…mas vc não especificou o q vc quer.Seja mais especifico, quem sabe assim poderei tentar tirar alguma dúvida.
.::Clau::.
e se o blog tiver 2 sidebars uma na direita e uma na esquerda? como fica.
main: ?
sidebar right: ?
sidebar left: ?
me manda a resposta por e-mail se possivel.
gmartins1309@gmail.com