quarta-feira, 7 de setembro de 2011
Como deixar a sidebar do Twitter transparente sem usar códigos
Atualização: Não funciona mais com o novo Twitter
Há algum tempo atrás, postamos aqui no blog um tutorial sobre como deixar a sidebar do Twitter transparente utilizando um código javascript. Vide artigo abaixo:
Código para deixar a sidebar do Twitter transparente
O código ainda funciona perfeitamente - para quem tem dúvidas -, mas deve ser aplicado nas versões antigas dos browsers. Porém, descobri uma nova maneira de fazer isto sem usar absolutamente nenhum código. É simples e rápido!
Portanto, selecione o seu browser abaixo e aprenda como fazer.
CLIQUE AQUI E ASSISTA A VÍDEO AULA DESTE TUTORIAL
OBS: Caso ainda assim não consiga, procure-nos no Twitter.
Sidebar do Twitter Transparente
GOOGLE CHROME
1. Faça login em sua conta do Twitter. Clique no seu username e selecione Configurações.

2. Clique na guia Aparência.

3. Agora clique com o botão direito do mouse em qualquer área vazia da página (não em cima das imagens e nem dos botões) e selecione a opção Inspecionar elemento.

4. A janela do aplicativo vai abrir para você. No campo de busca, ao lado direito, procure pelo seguinte componente: user_profile_sidebar_fill_color

5. Este componente será encontrado e marcado de amarelo no campo dos códigos abaixo. Na mesma linha deste componente acima pesquisado, um pouco pra frente, localize a seguinte tag: value="#DDEEF6" ou algo parecido (no seu o valor pode ser diferente de #DDEEF6, neste caso mexa nele). Veja na imagem abaixo.
6. Agora simplesmente clique sobre o valor "#DDEEF6" (ou o valor que estiver no seu) e apague ele. Depois tecle Enter e feche a janelinha.

7. Para finalizar clique no botão Salvar Alterações e pronto! Confira a sua nova sidebar.

FIREFOX
1. Instale a extensão Firebug em seu Firefox e reinicie-o após a instalação.
2. Faça login em sua conta do Twitter. Clique no seu username e selecione Configurações.

3. Clique na guia Aparência.

4. Agora clique com o botão direito do mouse em qualquer área vazia da página (não em cima das imagens e nem dos botões) e selecione a opção Inspecionar Elemento.

5. A janela do aplicativo vai abrir para você. No campo de busca, ao lado direito, procure pelo seguinte componente: user_profile_sidebar_fill_color

6. Este componente será encontrado e marcado no campo dos códigos abaixo. Na mesma linha deste componente acima pesquisado, um pouco pra frente, localize a seguinte tag: value="#DDEEF6" ou algo parecido (no seu o valor pode ser diferente de #DDEEF6, neste caso mexa nele). Veja na imagem abaixo.
7. Agora simplesmente clique sobre o valor "#DDEEF6" (ou o valor que estiver no seu) e apague ele. Depois tecle Enter e feche a janelinha da extensão.

8. Para finalizar clique no botão Salvar Alterações e pronto! Confira a sua nova sidebar.

Fazer sidebar voltar ao normal
Se você não gostar da sidebar transparente, basta ir novamente em Configurações ► Aparência e simplesmente clicar no botão Salvar Alterações.

Sua sidebar voltará para o fundo que estava antes.
OBS: Caso ainda não tenha voltado ao normal, saia de sua conta e feche o Twitter. Depois volte e logue-se novamente.

Artigo escrito por Marcelo
Sou formado em Sistemas de Informação pela UFMG e pós-graduado em Segurança da Informação. Trabalho com TI há mais de 5 anos e sou professor particular de inglês. Nas horas bem vagas costumo arranhar uma guitarra e sou fã do bom e eterno rock'n'roll.
Receba as atualizações automaticamente
Obrigada! Deu mtoooooooooo certooooooo
ResponderExcluir;*
não funcionou :/
ResponderExcluiro meu deu KKKKKKKKKKKKKKK!
ExcluirFunfou blz kara brigadu!!!
ResponderExcluirPS.: pra que serve a extensão Firebug Lite pra Chrome???
@natii
ResponderExcluirVocê fez algo errado aí!
@Anônimo
O Firebug serve para editar, depurar e monitorar códigos CSS, HTML e Javascript dentro de uma página web.
No caso deste tutorial, o que a ferramenta fez foi editar o elemento HTML responsável pela cor da sidebar do seu Twitter (o "value").
Grande abraço e obrigado pelo comentário!
Depois de muitas tentativas consegui pelo Firefox!
ResponderExcluirVlw mesmo!!!!!
Como faz para voltar ao normal?
ResponderExcluirMuitoo obrigada!! :D
ResponderExcluirMesmo! Estava sempre a tentar com os códigos e nunca conseguia! Obrigada! :D
Anônimo
ResponderExcluirBasta voltar em Aparência e clicar em Salvar Alterações, para a sidebar voltar ao normal.
VALEW FUNCIONOU BM
ResponderExcluirAhh Não funcionou eu fiz pelo google chrome e nao funcionou Poderia me explicar o que deu errado E eu não achei o lugar onde ta escrito Value aki nao mostrou nada só mostrou user_profile_sidebar_fill_color em amarelo e olhei pra ver se tinha o value e nao tinha Poderia me ajudar ?
ResponderExcluire no campo de busca não apareceu 2 mathies apareceu not found
ResponderExcluirObrigadaaa, funcionou perfeitoooo
ResponderExcluirBjosssss
Marii
Jééh
ResponderExcluirVocê procurou logo após o "user_profile_sidebar_fill_color"?
deu certoooooooooooooooooooooo
ResponderExcluirmeu mtoo obrigado nem sei como agradecer vc
tentei o outro com codigo mais da mto trabalho
vlw por compartilhar ae
to seguindo seu twitter mi segue di volta :D
PERFEITO....ACABEI DE FAZER NO CHROME E FUNCIONOU DIREITINHO
ResponderExcluir\O/
MTOO OBRIGADA TE LOVE
Deu certo, vlw
ResponderExcluirConsegui \õ
ResponderExcluirSegue la no twitter @Leticia_zc
Funfou tranquilamente!
ResponderExcluirno Firefox funcionou no Chrome :)
ResponderExcluirFuncionou perfeitamente aqui o/
ResponderExcluircaracaaaa perfeito meu amigo!
ResponderExcluirfix no chrome e ficou joia meu tt
to seguindo vcs la me segue tb
geente recomendo por esse método, eu entrei em vários sites & nada. Vi esse e pan consegui de primeira.
ResponderExcluirObrigado !
Afz , eu fiz tudo certinho como esta falando , i naun deu certo ! Meu problema hé tipo o da Jééh
ResponderExcluirmais só apareceu o value=" , o #DDEEF6" naun !!
Bjj i mii ajudee pf !
Lorraine
ResponderExcluirSe esse não deu certo, tente este abaixo:
http://www.seututorial.com/2011/04/como-deixar-sidebar-do-seu-twitter.html
Abraços
Perfeitoooo moço ;)
ResponderExcluirAqui funfou de boa
Tnx
Mi segue? @ednafile
Sigo d volta
BJUSSSSSS
Obaaaaaaaaa deu muito certo!!! Vlw beijooo
ResponderExcluirno meu tb funcionou direitinho =))
ResponderExcluirusei o firefox
brigadinhaaa
bjuxxx =*
OBG!!! me ajudou mt ,valeu
ResponderExcluirnossa cara deu super certo!
ResponderExcluirmuito obrigado!valeu
parabéns!! amigão,,, deu certo
ResponderExcluirdemorei pra achar, mas consegui *-* mt bom (:
ResponderExcluiraaaaaaadorei mmt obg *-*
ResponderExcluirbrigadão, esse site é demais deu certo de primeira (: segue lá e avisa que eu sigo de volta @GabihAlmeeida
ResponderExcluirAhh est foi sob medida heem?
ResponderExcluirGostei,custei...ms cabeça não eh só pra carregar piolho née vei? às vezes agent tem que usar ;P
aaaaaaaah, muito obrigado, realmente ajudou MUITO *o*
ResponderExcluirNossa Funcionou vlw adoorei
ResponderExcluirBjoos :D
dei moral pra você! ninguém ta conseguindo mais mudar, e eu queria muito! valeu
ResponderExcluirnão consegui :(
ResponderExcluirEu procurei pelo user_profile_sidebar_fill_color , ele apareceu em amarelo, mais não achei o Value "#DDEEF6"
Só achei assim Value="#f0f0f0"
G.F.
Continuação:
ResponderExcluirentão, eu tava fuçando aqui
e apaguei esse "#f0f0f0"
e deu certo :D
foi super rápido e ficou ótimo *-*
bem melhor que esses códigos. Eu usei o Chrome.
Sigam-me @gabifranca10 (: sigo de volta
comigo deu certinho. (: @_ellorenna
ResponderExcluirMuito bom mesmo! Podem entrar sem medo! Parabéns!
ResponderExcluirEu fiz pelo Chorome e ficou meio azul e não transparente..
ResponderExcluir@Patrícia
ResponderExcluirAcho que você está confundindo transparência com o background. Às vezes o BG do seu Twitter tem um tom azulado, e com a sidebar transparente, o azulado fica bem mais visível (uma vez que a sidebar não possui cor).
Enfim... ou ele fica transparente ou não fica! Simples assim. Não tem essa de ficar azul, aliás, não tem como! Você certamente alterou outra coisa no código - e não o que está no tutorial.
Att
No meu nao aparece o inspecionar elemento Por que ?
ResponderExcluirPorque você está clicando no lugar errado!
ResponderExcluirObrigada!
ResponderExcluirAqui funcionou tb certinho :*
Camila Campos:
ResponderExcluiroii eu tentei fazer pelo firerox só que na hora de clica no botão não apareceu o inspecionar elemento :(
Aonde você está clicando?
ResponderExcluirFiicoo mais que certoo..!'
ResponderExcluirFunfo @joaorb_ segue!!
ResponderExcluirnao precisei instalar a extensao
ResponderExcluirfiz pelo chrome xD
vlw man!
Eu Acho neem fiz certoo ! kk' Mas Obrigado mesmo assiim *---
ResponderExcluirola, eu consegui, mas só no meu tt ta transparente, pras pessoas que olham o meu nao esta tranparente.. fiz algo errado ?
ResponderExcluirOlá
ResponderExcluirVocê pode passar seu Twitter para que eu possa ver?
É estranho isso! Todo mundo deveria estar visualizando como você.
Você realmente alterou o que mostramos no tutorial? Pois pela quantidade de códigos pode deixar a pessoa meio confusa na hora de remover a parte correta.
Abraços
OBRIGAAAAAAAAAAAAAAAAADA, deu super certo (:
ResponderExcluirAEEEEEEE, deu certo :D brigada.
ResponderExcluirOI , não estou conseguindo. Eu fiz tudo direitinho mas não aparece o "value="#DDEEF6"" Eu procurei logo após o " user_profile_sidebar_fill_color " mas só aparece isso em amarelo . Tenho o Chrome
ResponderExcluirTainá
Perfeito a vídeo aula. Entendi maravilhosamente bem Marcelo.
ResponderExcluirBrigadaaaaaaaaaaaaaaa =)
Valeu mesmo ;
ResponderExcluirme ajudou bastante cara.
Brigadoooo :)
ae kara valeu mesmo me ajudou muito eu consegui e agora eu to muto feliz kkk valeuw mesmo abraços.
ResponderExcluirFUNCIONOU ! MUITO OBRIGADO (:
ResponderExcluirgentennn,
ResponderExcluireu achei o value e tudo, mais não consegui apaga o código.... só seleciona, não dá pra mexer, dá uma helpppp aqui
Nossa, muito mais fácil do que com o código!
ResponderExcluiraeee, funciono certinho ;)
ResponderExcluirNossa muito Bom Vlw pela dica
ResponderExcluirdeu super certo aqui!
ResponderExcluirvaleu ;)
Nossaa ... muito legal mesmo ... amei sério... *-* valew mesmo viiu ? =)
ResponderExcluirdeu mto certo
ResponderExcluirtnx
Oi, gostaria de dizer que este é um ótimo tutorial, e dizer também que consegui fazer de uma maneira bem mais fácil. Eu não estava conseguido fazer assim, aí eu mexi aqui e cliquei em Styles. Lá tem várias "caixinhas" que conforme você passar o mouse em cima, aparecerá se aquela opção está marcada ou desmarcada. No meu caso todas estavam marcadas, então eu li e vi que uma era sobre a sidebar e desmarquei. Fechei e cliquei em perfil, e então a sidebar estava transparente. Sinceramente não me lembro o que estava escrito quando eu desmarquei,rs, só sei que agora não aparece mais desmarcada ou desmarcada, seu eu visse eu lembraria, e não tem nenhuma desmarcada. Pensei que você poderia tentar ver e quem sabe entender e fazer um tutorial. {:
ResponderExcluirOlá Jucy Rodrigues
ResponderExcluirOpa, toda dica e sugestão é muito bem-vinda! Com certeza darei uma bisbilhotada nesse procedimento que você passou.
Embora o tutorial seja bem fácil, pois não tem segredo algum, darei uma olhadinha no que você falou.
Abraços
consegui *-* valeu , eu ja tinha tentados outros sites e nada, esse aí eu conseguir de primeira, obrigada .
ResponderExcluir@Jucy Rodrigues
ResponderExcluirNão conseguimos identificar o componente "Styles" que você citou. Se puder dar uma referência da localização deste componente facilitaria nosso trabalho.
Abraços
eu nao consigo apagar esse codigo. no meu caso é #ffffff. Da pra ajudar?? obrigada
ResponderExcluirUsa Firefox ou Chrome?
ResponderExcluirvaleeeeeeeeeeeeeeewwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
ResponderExcluirO meu deu certinho *---* é só prestar bem atenção que dá certo SIM ;) vlw ;*
ResponderExcluirAii muito obg eu aprendi o meu ta trasparente
ResponderExcluirMUITOOO BOM, EU AMEI *-* tava tentando faze isso e não conseguia, mas vendo seu tutorial consegui ^^ MUITO OBRIGADO!!!
ResponderExcluirdeu certo , muito obrigada *-*
ResponderExcluiraiiii no meu deu certoooooo *----* enfim conseguiii, vlwwwwwwww ♥
ResponderExcluirbjjsss
aaaaaaaaa ajuda :_
ResponderExcluireu consegui colocar transparente , mais dpois fui colocar uma foto d fundo e tals. SAIIIU E AGORA NÃO TO CONSEGUINDO COLOCAR :_ AJUDA :( ahaha'
eu não to conseguindo apagar aquele negocinho la '-'
#HELP
Camii, quando você altera o background, a sidebar também é modificada! Você deveria ter feito o contrário.
ResponderExcluirPorém, como podemos ajudá-la? Você está identificando o componnte "user_profile_sidebar_fill_color"?
Sim, eu encontro o ''user_profile_sidebar_fill_color'' ai toda a linha é amarela, o value=''... ? ? O meu é , por isso eu não consigo apagar :(
ResponderExcluire tem q apagar o ''value..' também ? ou só o ''#... ?? ;s
Camii, só pode apagar o que está dentro das aspas. Apague somente os dados dentro das aspas do value.
ResponderExcluirExemplo: value="#FFFHG56". Você deve apagar apenas os caracteres #FFFHG56 e pressionar Enter. Depois é só fechar a janlinha do código-fonte e clicar em Salvar Alterações.
eu achei aki o value com "*CODFEC"> mas não to conseguindo apagar.o que eu faço? me ajuda porfavor!
ResponderExcluirnão precisa mas responder a pergunta anterior já consegui pelo google muito obrigado!
ResponderExcluirMuito bom, obrigada :)
ResponderExcluiraiiii conseguiiii :')
ResponderExcluirobrigada Marcelo :)
bjss c2'
aaaa euu conseguii , briigadão. u-u
ResponderExcluiroo do firefox funcoinou no crhome velw...
ResponderExcluirsegue..lá sigo de volta
aaaaa' Deu certo neim um dos codigos deu somente esse ( Fiz pelo Google Chrome )
ResponderExcluirNão to conseguindo editar o : value="#DDEEF6"
ResponderExcluir=(
me ajuda?
Qual é o navegador e a versão usada?
ResponderExcluirTwitter novo ou antigo?
Sem maiores detalhes não posso ajudar!
Ajudou muito principalmente no chrome ;D
ResponderExcluirVALEU AJUDO MUITTOOOOOOO
ResponderExcluirdeu muito certoooooo
ResponderExcluirHaaaaha conseguiiiiiii valeu povo Segue ai @Steeh_bs
ResponderExcluirFUNCIONOUUUUUUUUUUU
ResponderExcluirObrigada
ResponderExcluirDeu certissimo
Vlww brow aqui resolveu tb =)
ResponderExcluirGalera é facinho.......
Ae pode dar uma força? Eu uso o Google Chrome e o meu aparece 1 match e o seu aparece 2 match na hora de procurar user_profile_sidebar_fill_color me ajuda?
ResponderExcluirAnônimo, não tem problema. É que no meu há duas referências do componente. No seu pod ehaver apenas uma. O que não afeta em nada no processo.
ResponderExcluirnossa, muito interessante, mudava sempre por códigos, mas deu super certo.
ResponderExcluirobrigada! e parabéns ;$
obriiigada, deu certoo *-*
ResponderExcluir@KarineTaynnara @JonasDelicioso e @MyDreamCrazy =)o resultado é ótiimo ...
SHOOOOOOOOOOW! valeu cara. otimo tutorial!
ResponderExcluirAdorei , deu certinho . Obg ! ;D
ResponderExcluirÉ.. funcionou.. rápido e prático.. valeu pela dica! e se alguém quiser me seguir.. ai está .. @fchristovam .. =)
ResponderExcluirhahahaahhaahaha, tentei de todos os jeitos com codigos e nao deu, assim deu! Obrigado!
ResponderExcluirnossa muito obrigado,deu certinho...nota 100000000000000000000000 bjs
ResponderExcluirMuito bom!!
ResponderExcluirVelho, já não sabia mais o que fazer sem conseguir deixar a sidebar transparente. Hahahahah, tu é fera, brigada!
ResponderExcluirCara Obg mesmo , eu ñ tava conseguindo com códigos mas essa dica foi ótima OBg
ResponderExcluiroi... não estou conseguindo... faço do jeito que está falando aqui, e quando salvo as alterações ainda continua com cor... alguém pode me ajudar!
ResponderExcluirObrigada
Mtoo bom HAHAH' consegui *-*
ResponderExcluironnnnnnnnnnnw euteamo ! ♥
ResponderExcluirDeu super, super certo ♥ ;)
ResponderExcluirFuncionou perfect aqui amore, mto obg !
ResponderExcluirMuito obrigado! Deu certinho!
ResponderExcluirnão consigo de jeito nenhum... nem pelo firefox e nem pelo Google. faço extamente como esta falando aqui nas dias versões e ainda continua branco... :(
ResponderExcluiralguém me ajuda?
Juliana
Juliana, se quiser que façamos para você, informe-nos em nosso Twitter.
ExcluirVinha tentando a bastante tempo e nenhum código funcionava, finalmente, com esse meio deu certo. Obrigada! Larissa.
ResponderExcluirDeu super certooooo!!!
ResponderExcluirQuem quiser ver [ou seguir], RSSSS @priscila_mlc
uhhul eu consegui finalmente . Obgd ,
ResponderExcluirMais quando eu vou troca a imagem de fundo o translade sai e fica normal . u-u
maiis vlws mesmo
Realmente tem esse problema. Quando você altera a imagem de perfil ou do background, os valores do código-fonte do componente retornam. Estamos tentando encontrar uma maneira de evitar isso.
ExcluirMas é só na primeira vez que você troca as imagens.
Nossa eu ameei!!!
ResponderExcluirFuncionou perfeitamente!!
melhor do que com código que não tava dando certoo!
amei o tutorial ta facinho de entender!!
parabéns e obrigada!!! xD
Tentei fazer no Chorme não deu, mas consegui deichar a sidebar transparente com o Mozila :D
ResponderExcluirno meu não aparece esse tal de value, o que eu faço?
ResponderExcluirPatricia
Patricia
ExcluirProcure certinho aí. É impossível o "value" não estar seu código-fonte, uma vez que sem ele, sua sidebar nem apareceria!
Se quiser, podemos fazer o procedimento para você. Para isso, é só nos procurar em nosso Twitter.
http://twitter.com/seututorial
Muito o brigada
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirUPPPP
ResponderExcluirNossa ameeei eu Comseguiiir Valeew ! *----*
ResponderExcluirObrigado!
usei chrome e deu certo, brigada kk
ResponderExcluirNo twitter novo dá certo?? Eu tentei pra ver..mas como não tem mais aquela barra lateral..não mudou nada. Pensei que conseguiria deixar o fundo totalmente transparente. Tem alguma dica ai?
ResponderExcluirO Twitter novo não precisa porque simplesmente o layout é outro. Deixar ou não a sidebar transparente no Twitter novo é a mesma coisa, pois a sidebar (esquerda no caso do novo TT) já é transparente por padrão.
ExcluirCaramba tentei mais de 280 vezes os outros códigos , consegui só nesse cara eu te amo..
ResponderExcluirVlw brigadão mesmo *---* ♥
consegui *--------*
ResponderExcluirtava procurando isso em tudo o que era lugar mas não tava conseguindo deixar transparente
brigada mesmo *--*
funcionou muito de boa, o codigo que eu usava não tava mais funcionando no Chrome, e funcionou agora! obrigado
ResponderExcluirUhuuu deu ..
ResponderExcluirameiiiiiiii, deu totalmente certo! eu não estava conseguindo com os códigos de outros sites, mas com esse método, deu certinho!! obrigada =)
ResponderExcluirEstou usando o crhome, porem nao aparece o código na minha busca, aparece NOT FOUND... e agora?
ResponderExcluirSe está usando o novo Twitter, não tem como colocar a transparência.
ExcluirTudo mudou neste Twitter 2012. O tutorial aplica-se apenas para quem tem o perfil antigo do TT.
nao deu certo aki ,
ResponderExcluirNão funciona mais mesmo por causa do Twitter novo.
ResponderExcluirooooooo me responde no meu não encontrei não
ResponderExcluirNão funciona mais com o novo Twitter amigo.
ResponderExcluiratualização 2019:
ResponderExcluircopie e cole o @ abaixo, mas antes de salvar tire o @.
quando abrirem seu perfil, aparecerá esses dois risquinhos no nome, mas na timeline nao aparece nada
ً
@