Cor ou imagem nos titulos da sidebar
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
acrescente abaixo:
.sidebar h2{
color: $sidebartextcolor;
line-height: 1.5em;
background: #000000;
margin: 0px;
padding: 8px 0 0 15px;
text-align: center;
}
Se no seu template já existe este trecho do código, é só colocar background: (valor da cor); e ter certeza de que margin:0px;. Padding afasta o título do topo da coluna - você pode alterar este valor e ir visualizando, até que fique como desejado.
Se você deseja inserir uma imagem, é só colocar:
- se a imagem tem as mesmas dimensões estabelecidas para .sidebar h2:
background: url(link da imagem) no-repeat;
- se a imagem for menor e você deseja que ela se repita:
- background: url(link da imagem) repeat-x;
22 comentários:
Olá Ariane, tudo bom?
Fui convidado a participar de um meme para indicar cinco blogs que eu gosto de frequentar e lembrei de indicar o seu. Espero que você aceite a minha indicação. Para ler o convite acesse o link http://heliojenne.blogspot.com/
Um abração, sucesso e muita saúde!
Oi Ariane!
Linkei você no meu blog! Depois passa lá pra dar uma conferida.
Beijos, e, mais uma vez, valeu pelas dicas super-úteis!
http://dramabarroco.blogspot.com/
=)
Será que poderia me dar uma luz, já tentei de tudo e até agora não funcionou, a cor ou imagem não fica atrás do texto por nada no mundo, o texto sempre começa grudado na cor ou imagem.
To colocando desta forma
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
padding-top: 10px;
padding-bottom:20px;
background: #000000;
margin: 0px;
padding: 20px 0 0 0;
text-align: center;
color: $sidebartextcolor;
height: 4px;
}
Meu e-mail: brito.tiagos@gmail.com
Valeu
planet web, padding está aparecendo duas vezes: são 20px para bottom e 30px para o topo! E só tem 4px de height (altura total). Precisa mudar estes numeros. Coloca um Height de 40px, e padding assim:
padding: 20px 0px 4px 0px;
testa e conta se ficou bom. Abraços!
iuhuuuuuuuuuu, nanananananá,nanananananá. Valeu Ariane, funcionou certinho valeu pela ajuda, não aguentava mais mexer e cada vez piorar.
Obrigado mesmo.
Tiago Brito
O conteudo do post ta invadindo o titulo
olha só como ta
http://img89.imageshack.us/img89/9894/printblogar2.jpg
como faço para afastar?
Olá Ariane...
voce poderia me ajudaar?
veja meu blog
http://nandamuiloka.blogspot.com
..
entao.. o fundo das sidebars estao em branco...
vc sabe onde mudo isso?..
ja tentei colocar algumas coisas daqui mas n deu certo n.
se vc kizer posso lhe mandar o template que estou usando.
valeoz. bjus
Olá Ariane,
o que eu necessitava era que os títulos tivessem uma descrição quando passo com o rato, é que deste modo ficam acessíveis às pessoas com deficiência visual que usam leitor de tela. Já agora gostaria de fazer o mesmo para a linkbar.
Obrigado!
Luís Melo
olá
eu não entendi nada
o meu blog é do tipo "simple blog bleck"
você poderia por favor demonstrar em uma imagem?
ou me explique de um modo mais fácil pois eu quero colocar mto urgente uma imagem no título do meu blog
seria ótimo se você me ajudasse
mto obrigado
olá
eu já tentei um montão de veses e a imagem não sai
eu puis assim ó
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
background:/* C:\Meus documentos\persnaruto.jpg */
Naruto, pudera que não dá certo...vc tem que hospedar a imagem, no ImageShack, por exemplo, e depois colocar o link alí. Dá umas lidas nos tutoriais, ok?
Oi Ariane,
Fiz conforme vc disse no tutorial e deu tudo certo no Firefox. Quando visualizo o meu blog pelo IE7 as imagens não aparecem na sidebar.
O que fazer?
Eu fiz uma pergunta ontem mas não consegui achar onde está, ai ai ai rsrs De qualquer forma tenho outra dúvida: Os títulos dos meus gadget não aparecem mesmo q eu use html dentro da área de texto, tem solução isso? Essa eu vou achar pq anotei o link rsrs :D
Olá.
Preciso de sua ajuda. Não estou conseguindo mudar a cor dos links visitados e dos da sidebar.
Tem como me ajudar?
Obrigada!
Haka, dá uma olhada nesta postagem: http://templatesparanovoblogger.blogspot.com/2008/09/como-fazer-um-template-para-o-blogger_22.html
pode ser que ajude. abraços!
olá ariane eu adorei a dica e funcionou mas tipo quiria colocar a imagem do lado direito e não no esquerdo pois duficulta a leitura se vc puder mi ajudar eu agradeço muito o quanto antes melhor preciso fazer isso rapido =D
aqui é o blog
www.obanproject.blogspot.com
Ola,Ariane estou gostando muito do seu espaço e aos poucos, aprendendo algumas coisinhas,gostaria se possível, que vc desse-me uma explicação de como eu poderia mudar as cores do sidebar, através do painel de fontes e cores, acho que deu prá entender o que estou querendo, desde já agradeço pela atenção, felicidades,Silma, SSA-BA.
Ariane mais uma vez eu estou aqui rs! Tipo assim o background ficou também na data do post eu queria somente no titulo da sidebar como posso fazer isso rs! O cara xato hahahaha!!!
Ah! E quando eu consegui fazer com que o mesmo ficasse só no titulo da sidebar as fontes ficaram enormes até a da data do post, tipo assim eu queria colocar menor a fonte da data do post e sem background, almentar o texto do titulo da sidebar se puder dar mais essa ajuda eu ficarei muito grato mais uma vez xD.
Utilizei a dica aqui no meu blog e deu certo, recomendo, dá um visual legal, mais bonito. Obrigado!
Olá Ariane!
Meu nome é Hosana, estava fazendo pesquisas para personalizar meu blog e encontrei o seu, que por sinal é muito bonito!
Bom, estou postando por aqui de forma que vc possa me auxiliar no esclarecimento de algumas dúvidas que tenho!
Gostaria muuuuuuito mesmo que, se possível for, vc me explicasse "O que é Sidebar?". Estou um pouco por fora de certos detalhes que podemos colocar num blog, por isso estou fazendo muitas pesquisas, mas agora no momento o que eu gostaria mesmo é de saber sobre Sidebar!!! O que é, qual a finalidade, como colocar, enfim...tudo o que vc souber me informar!!!
Ficaria muito feliz se vc puder esclarecer essas minhas dúvidas!
Desde já agradeço pela sua atenção
Um abraço!!
Hooy Ariane . No meu outro blog, eu tinha feito isso e deu super certo no modelo viagem. No meu não tinha /* Sidebar, então coloquei no /*Content. Mas nesse blog novo, estou usando o modelo Simples e já tentei de tudo mas não adianta, olha só:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
a:link {
text-decoration:none;
color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:underline;
color: $(link.hover.color);
}
.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}
.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}
.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}
$(content.background.color.selector) {
background-color: $(content.background.color);
}
P.s.: não tem /* Sidebar Content, o que eu faço?? Me ajuda pf !
Ariane,
Perdoe-me a "má lingua" mas fiquei meio pê da vida por ter encontrado na net uma postagem idêntica a esta sua (copiada e colada), sobre cor/imagem na sidebar. O link para a postagem de que falo é:
http://sandrossoares.forumeiros.com/t79-modificar-cor-ou-imagem-nos-titulos-da-sidebar-no-blogger
Imagino o seu esforço e dedicação para com seu blog e seus leitores, e assim foi que não achei nada "simpático", para dizer o mínimo, esbarrar em um plágio como este, mesmo sendo uma postagem do ano de 2008. É lastimável...
AnyaSoh
Postar um comentário
Os comentários são moderados.