O Having Themes foi criado para te ajudar com edições de html, lhes proporcionar themes, banners, e vários utilitários. Estamos sempre dispostas a esclarecer suas dúvidas e ensinar diferentes scripts. Por favor, sejam educados, pois a resposta será feita como sua pergunta. Esperamos que o Having seja sempre útil. Qualquer dúvida, opinião ou sugestão recorra a nossa ask. Procure nos tutoriais e nos extras antes de perguntar, e também não custa nada ler as últimas ask's respondidas. { / }

Tutorial - Como colocar appearence em um theme

Bom… há séculos que não posto nenhum tutorial no HT, então vamos lá… 

Para falar a verdade, colocar appearence em um theme é fácil, mas exige muita atenção. Vou tentar ensinar do melhor jeito possível. Comece já tendo um theme pronto. 

Para colocar uma cor para mudar por appearence:

Procure pela tag <head> no seu theme e cole este código logo depois dela. Onde está ESTRUTURA, você deve colocar “onde” a cor irá aparecer, para facilitar a identificação. Pode ser no background, negrito, itálico, menu, etc… E, onde está CÓDIGO, você deverá colocar o código da cor escolhida. 

Agora, vá no CSS e procure pela “cor em que você quer colocar appearence”. Achou? Só trocar o código dela (do # até o último número/letra) por isto: 

{color:ESTRUTURA}

E você deverá trocar ESTRUTURA pelo mesmo nome que você colocou no código 1. Certo? Agora é só fazer isso em todas as cores do seu theme, rs. Para cores iguais, você pode repetir os códigos (Não sei se conseguiram entender… Mas, é assim: se você quer colocar a mesma cor no menu e no negrito, por exemplo, você pode deixar só UM código 1 no <head>, e seguir o passo dois normalmente.).

Para colocar uma imagem para mudar por appearence:

Basicamente, são todas as opções a mesma coisa. Então, daqui para a frente, só vou passar os dois códigos para vocês, ok? 

Código 1  |  Código 2 

Para colocar um texto para mudar por appearence:

Quando falamos em “texto”, pode parecer que é uma frase para descrição, ou algo assim. Mas você pode colocar links ali, ou apenas palavras para ativar a ask (como o nome do tumblr da pessoa), ou algo assim. 

Código 1  |  Código 2

Para colocar uma fonte para mudar por appearence:

Código 1|  Código 2

Na opção das fontes, você deve colocar mais de uma, para quem for usar o theme poder escolher qual prefere (Exemplo: content=”arial, helvetica, sans-serif”). 

Então, é isso! Espero que tenham entendido. Se faltou algum detalhe, ou alguma parte estiver confusa, me avisem na ask (estou meio enferrujada com tutoriais, rs…). Obrigada <3 Thaty

Tutorial - Como colocar nitidez numa foto

Então… vamos lá! Abra a foto que você quer editar no Photoshop, primeiramente.

Agora, selecione a camada onde está a foto. Aperte com o botão direito, e clique em duplicate layer (exemplo).

Selecione somente a nova camada. Vá em filter > other > high pass (se a opção other não aparecer, clique em show all menu items, após clicar em filter) - exemplo.

Uma janelinha que nem esta irá aparecer. Escolha um número. Quanto mais alto, mais nítida a foto ficará. Mas, você terá que ir testando, pois tudo vai depender da foto e do próximo passo. Lembrando que a foto não ficará como está no preview. 

Volte para a parte das layers, com a camada de cima selecionada. Você terá que mudar o modo dela - exemplo. Vá mudando onde está normal (poderá selecionar dissolve, darken, multiply…). Você terá que ir testando, mesmo… Teste todos, e deixe o que preferir. 

Agora, é só apertar Alt+Shift+Ctrl+S para salvar. O meu resultado foi esse

Espero que tenham gostado! Beijos, Thaty

Fontes para download (3)

Download: aqui

Download: aqui

Download: aqui.

Download: aqui.

Download: aqui.

Download: aqui.

A maioria delas foi baixada no dafont e outros sites. Não repasse, por favor! Thaty <3

PSD 02 

Download: aqui.

Bom… para quem não sabe, é um efeito para editar suas fotos no Photoshop. Este aqui deixa a foto mais escura, muda o contraste, etc… 

Se não souberem como usar os PSD’s, avisem na ask, que farei um tutorial explicando tudo direitinho. 

Por enquanto, é isso. Espero que gostem e usem! XOXO (Thaty)

PSD 01 

Download: aqui.

Bom… para quem não sabe, este é um efeito para editar suas fotos no Photoshop. Neste, mexi um pouco na saturação, curvas, e acrescentei um gradiente vinho. Você poderá, sim, mudar a cor. 

Se não souberem como usar os PSD’s, avisem na ask, que farei um tutorial explicando tudo direitinho. 

Por enquanto, é isso. Espero que gostem e usem! XOXO (Thaty)

Como colocar um chat em seu tumblr

Pediram este tutorial na ask, então… vamos lá!

Primeiro, entre neste site

Agora, se registre no CBOX para poder usar o chat, seguindo esse modelo:

    

Agora, faça seu login normalmente: 

    

Neste painel, clique em Publish:

    

Deixe as opções deste jeito, e cole o código da caixa azul no local em que você deseja que seu chat apareça (página de falso i-frame, sidebar…): 

    

A largura do chat está em 200 pixels. Se você quiser mudar isso (o que não é aconselhável), altere os valores destacados abaixo. Não esqueçam de deixar eles com o mesmo número: 

    

É isso! Se tiverem alguma dúvida, podem perguntar na ask. Não repasse/reblogue! Se usar, credite ao HT pelo tutorial. (Thaty)

Theme Black Rose #161

Preview: aqui.

Download: aqui

É o theme antigo do meu tumblr pessoal… Como pediram para disponibilizar, está aí! Ele vem nas cores preto e vermelho. O menu é de imagens. No hover, elas tremem e têm um tooltip em forma de balão. Também possui rolagem infinita. A imagem da sidebar e o link da última imagem mudam pelo appearence. O texto da sidebar muda pela Description. Para mudar o about, procure por Escreva sobre você aqui. Para mudar o sobre seu tumblr, procure por Escreva sobre seu tumblr aqui

Espero que gostem, usem e sigam as regras dos themes. (Thaty)

Fontes para download (2)

Download: aqui

Download: aqui

Download: aqui

Download: aqui

Download: aqui

Download: aqui

A maioria delas foi baixada no dafont e outros sites. Não repasse, por favor!  Thaty <3

Fontes para download

Download: aqui

Download: aqui

Download: aqui

Download: aqui

Download: aqui

Download: aqui

A maioria delas foi baixada no dafont e outros sites. Não repasse, por favor!  Thaty <3

Tutorial - Menu tooltip em forma de balão

Me pediram este tutorial, então aqui estou eu (um pouco atrasada, mas…). Para quem não sabe, o tooltip em forma de balão é o que eu usava no antigo theme do meu tumblr pessoal. Clique aqui para conferir. 

Então vamos começar… Para falar a verdade, os códigos são meio confusos, mas dei uma adaptada para vocês entenderem melhor. Peço para que só mudem o que eu falar, pois qualquer código errado pode acabar com o efeito todo. 

Primeiramente, cole este código logo antes de <style> ou <style type=”text/css”>. Não modifique nada nele, pois lá está a parte mais importante - a dos scripts. 

Agora cole este código antes de </style>. Nele, eu vou explicando em cada parte vocês podem mexer… mas, por precaução, vou falar tudo por aqui mais uma vez: 

Quando digo no código que vocês poderão mudar a a cor do background (BG)/fonte/sombra, vocês têm que mudar os códigos de 6 caracteres (letras ou números) que vêm depois de #. Podem também mudar o tipo/tamanho da fonte do tooltip onde está font: 12px Arial. Acho que fica muito legal colocar uma fonte em pixel, fica bem fofinho. Se não souber como fazer isto, é só seguir este tutorial. Na parte do triângulo, só mude #448579, pois qualquer pixel a mais ou a menos mudado pode estragar as coisas.

A última parte é a mais fácil: colocar o tooltip aonde você quiser. O único problema é que esse tooltip só pega em links. Mas tem um jeito de fazer com que ele pegue em qualquer imagem, frase, menu, etc… Vou colocar os códigos aqui, depois explico tudo. Só não esqueçam de trocar as aspas dos códigos! 

Para links normais e com imagens:

  1. <a class=”tooltip” href=”#" title="title">Link 1</a>

Neste código, você deverá mudar o # pela URL do link, title para o que você quer que apareça no balão do tooltip e Link 1 para a palavra que vai ser linkada. Se quiser uma imagem linkada, troque Link 1 por <img src=”URL da imagem”>.

Para palavras e imagens não linkadas: 

  1. <a class=”tooltip” href=”#” title=”title">Link 1</a>
  2. <a class=”tooltip” href=”#” title=”title"><img src="URL da imagem"></a>

O código é o mesmo, mas, ao invés de mudar o # para o link que você quiser, você mantém ele lá. 

Para menu falso i-frame sem personalização por class no CSS e com imagens:

  1. <span onClick=”document.getElementById(‘iframe’).innerHTML=document.getElementById(‘01’).innerHTML”><a title=”title" class="tooltip" href="#">I-frame 1</a></span>
  2. <span onClick=”document.getElementById(‘iframe’).innerHTML=document.getElementById(‘01’).innerHTML”><a title=”title" class="tooltip" href="#"><img src="URL da imagem"></a></span>

As duas primeiras coisas negritadas você irá mudar de acordo com o seu theme, seguindo este tutorial. Title você irá mudar por o que quer que apareça no balão do tooltip. I-frame 1 será a palavra/frase que terá o tooltip no hover. URL da imagem é a mesma coisa. 

Para menu falso i-frame/de links que tenha personalização no CSS: 

  1. <div class=”class"><span onClick="document.getElementById(‘iframe’).innerHTML=document.getElementById(‘01’).innerHTML”><a title=”title" class="tooltip" href="#">I-frame 1</a></span></div>
  2. <div class=”class"><a title="title" class="tooltip" href="#">I-frame 1</a></span></div>

Bom… class você irá substituir pelo nome da class do seu menu/caixa (ou o que for). Iframe já e 01 já sabem em que tutorial vão aprender a modificar. Title também já expliquei… E I-frame 1 mudarão pela palavra que terá o tooltip no hover. 

Enfim… acho que isso é o básico! Há mais lugares onde você poderá colocar o tooltip em forma de balão, mas tendo esses como base, saberão fazer os outros! Não se esqueçam de mudar as aspas dos códigos, senão não irão funcionar mesmo. Não mude nada além do que eu expliquei também! 

Espero que tenham gostado! Não repasse este tutorial ou poste em seu tumblr. Nunca vi algum tutorial do tipo em tumblr’s de HTML, então… Não esqueçam de colocar os créditos específicos se usarem. Grata, Thaty!

Theme 160 - com appearence

Preview: aqui

Download: aqui

O theme vem nas cores cinza, vinho e azul. O menu chama-se down, já que aumenta sua altura no hover (exemplo). A paginação é de setas, há opacidade no hover das fotos e cursor personalizado. O texto da sidebar muda pela description. As cores e o link da aba More+ mudam pelo appearence. Não retire a aba Theme, pois lá estão os crédtios. Tirando isso, vocês não precisam mudar nada. 

Espero que gostem, usem e sigam as regras dos themes! Beijos, Thaty.

Theme 159 - desativação

Preview: aqui

Download: aqui

O theme vem nas cores verde e cinza. O texto muda pela description. Para ativar a ask, procure por SEUUSER no HTML e troque pelo nome do seu tumblr.

Espero que gostem, usem, e sigam as regras dos themes! Beijos! (Thaty)

Theme 157 - com appearence

Preview: aqui.

Download: aqui

O theme vem em tons de verde e 3 colunas. O texto da sidebar do lado direito muda pela description. As fotos e photosets ficam com uma escala de preto e branco no hover. A paginação é no estilo next/previous e está abaixo do menu, na sidebar do lado esquerdo. As cores e a foto da sidebar (lado esquerdo) mudam pelo appearence. A ask não está numa página de i-frame, mas num menu de links, então a única coisa que você terá que fazer é ativá-la em settings (FAQ ensina). A parte dos créditos está em uma página de falso i-frame: não mude nada de lá. 

Espero que gostem, usem, e não retirem os créditos. (Thaty)

Tutorial - Como separar as tags em caixinhas

Perguntaram aqui como separar as tags dos post’s em caixinhas. Confira um exemplo clicando aqui!

  1. Cole este código no seu CSS. 
  2. Procure no seu theme por {block:HasTags}. - (Há vários desses no seu theme… Terá que repetir o procedimento em todos que encontrar.)
  3. Substitua o que está entre {block:HasTags} e {/block:HasTags} por este código.

Está tudo pronto! Se quiser, pode personalizar mais a caixinha (pelo primeiro código). Mude as cores, valor do border-radius, etc…

Espero que consigam usar o tutorial! Qualquer dúvida, recorram à ask. Não copiem/redistribuam! (Thaty)

Tutorial - Ask’s respondidas separadas

Bom, perguntaram aqui no HT como separar as ask’s respondidas dos outros post’s, assim:

Para isso, você terá que ter uma página de falso i-frame (pode ser a mesma da caixa de ask). 

  1. Vá nessa página de i-frame, e cole {block:Posts}{/block:Posts} no espaço reservado.
  2. Procure por {block:Answer} nas suas tags de post, e copie tudo até  {/block:Answer}.
  3. Cole o código entre {block:Posts} e {/block:Posts}.

Está pronto! As ask’s que irão aparecer no i-frame serão as que você respondeu na página em que está. Portanto, se você não tiver respondido nenhuma ask naquela página, nenhuma ask aparecerá no i-frame.

Espero que gostem, e consigam usar. Qualquer dúvida, recorram à ask. Não copiem/redistribuam. (Thaty)

DESISTO! Ai que raiva, não consigo fazer nada que preste. poxinha :c
Estou fazendo um theme e BOOM, INVALID HTML, vá ver se eu estou na esquina tumblr, pelo amor..... AFF ¬¬'