Bem vindo(a) ao Nerdesign, tumblr criado no intuito de ajudar em HTML, CSS e Photoshop. Procuraremos responder todas as suas perguntas, então fique á vontade para dar suas opiniões, sugestões e etc.
Um tutorial bem completão com todas as propriedades de background, só clicar em keep reading e aproveitar mexxmo!
Background do theme
Levando em consideração que tudo o que está entre <body> e </body> é o que vai aparecer no seu theme, ao editar o fundo do theme todo, mudamos o fundo da tag body no css (entre <style> e </style>), assim:
<head> </head> <style> body{background: EDITE AQUI;} </style> <body> o que aparece aqui </body>
O fundo pode ter uma cor sólida, um degradê (gradiente) ou uma imagem.
Cor sólida:
Para definir a cor do seu background, utiliza-se o seguinte código:
background-color: COR AQUI;
Lembrando que a cor pode ser em código hexadecimal (aquele que tem um # e seis letras ou números na frente, aqui tem uma tabela ótima) ou em RGBA (temos um tutorial sobre).
Gradiente:
Pra ficar mais rápido e fácil pra todos, aqui tem um site que faz o degradê, ai é só copiar o código que eles dão (só ajustar como você quer e descer a página, tá embaixo da propagandinha) e colar dentro de _body{} _(lembrando que alguns browsers não suportam gradientes)
Já para imagens, são várias as possibilidades na hora de criar um fundo para seu theme:
O fundo pode ser fixo ou não:
Um fundo fixo é aquele que não se move quando subimos ou descemos a página (exemplo), ele possui o seguinte código (note o fixed, é ele que faz o background ficar fixo):
body{background:url('URL DA IMAGEM DO FUNDO') fixed;}
Já um não fixo se move quando subimos ou descemos a página (exemplo), e o código dele é esse (aqui já não tem o tal do fixed, já não fica mais fixo):
body{background:url('URL DA IMAGEM DO FUNDO');}
Ele pode repetir ou não:
Você pode escolher se uma imagem de fundo irá se repetir (exemplo) ou não (exemplo), como também pode escolher em que direção ela se repetirá (horizontalmente ou verticalmente).
A imagem vai se repetir automaticamente se você não der nenhum comando, então para que ela se repita não precisa escrever nada. Porém, se quiser que a imagem:
Não se repita:
Coloque o seguinte código dentro de body{}:
background-repeat:no-repeat;
Se repita apenas horizontalmente:
Coloque o seguinte código dentro de body{}:
background-repeat:repeat-x;
Se repita apenas verticalmente:
Coloque o seguinte código dentro de body{}:
background-repeat:repeat-y;
Outras propriedades (menos conhecidas e menos utilizadas) do background:
Background-Position:
É a posição em que ficará seu background, a imagem dele, é útil quando se tem apenas uma imagem que não se repete como background e voce deseja posicioná-la. Se dá pelo seguinte código:
background-position: position aqui;
Eu fiz uma imagem tentando explicar como funcionam as positions. Abaixo tem o nome delas e a área em que elas deixam seu background. Por exemplo, se você quer a imagem no canto esquerdo, é só colocar _background-position: left top; se quiser ela no centro, é só por background-position: center; _e por aí vai.
Background-size:
Como o próprio nome já sugere, é o que define o tamanho do background. Tem o seguinte código:
background-size: LARGURApx ALTURApx;
Exemplo: se você deseja uma imagem com 100px de largura e 50px de altura:
background-size: 100px 50px;
Background-origin
É onde o background vai se originar. É util quando você for fazer o background de alguma caixinha, por exemplo. Ele pode se originar na borda da caixinha, no conteúdo da caixinha (sem o padding) ou entre a borda e o padding (saiba o que é isso aqui). Pra entender melhor fiz esse gif:
A parte amarela seria a borda da caixinha, a rosa seria aquele espaço do padding e a branca onde fica o conteúdo (textos, imagens etc). O coração é o nosso background <3
Agora vamos entender como funciona:
Quando colocamos
background-origin: content-box; o background começa no conteúdo, deixando a borda e o padding sem nada. Quando colocamos
background-origin: border-box; o background começa no limite da borda, e quando colocamos background-origin: padding-box; _(ou não colocamos nada, já que esta é a ação padrão e escrever isso não mudaria nada) _o background fica logo depois da bordinha.
background-clip:
É a mesma coisa que o background-origin, mas ao invés de determinar onde o background começa, ele determina o que o background vai preencher:
background-clip:border-box; É o automático, ou seja, colocar isso ou não colocar não fará diferença :) Fica assim:
background-clip:padding-box; É que nem o padrão de background-origin, fica entre a borda e o padding, assim:
background-clip:content-box; Cobre apenas o conteúdo, deixando o padding e a borda sem nada, assim:
Por enquanto é isso, aqui estão todas as propriedades de background (algumas vc vai usar muito raramente, mas coloquei aqui pra você ter uma referencia quando precisar <3)
Espero que o tutorial tenha sido útil, qualquer dúvida nos procure :3
Padding é aquele espacinho entre uma caixinha de texto e o texto, assim:
Você pode editar todo o padding de uma caixinha com o seguinte código, deixando todos os espaços (o da esquerda, o da direita o do topo e o da base) do mesmo tamanho:
padding: 15px; /** o número varia de acordo com o seu gosto :) **/
Porém, há como mudar cada parte separadamente, usando:
padding-left para mudar o espaço da esquerda
padding-right para o espaço da direita
padding-top para o topo
padding-bottom para a base
Há também como editar todos os quatro de uma vez só, da seguinte maneira:
padding:10px 5px 15px 20px;
Sendo que: padding:TOPOpx DIREITApx BASEpx ESQUERDApx;
O padding pode ser usado em caixinhas, imagens, ou até mesmo no theme todo, como uma forma de espaçar as coisas.
-Anna. Qualquer dúvida, sugestão ou critica, entre em contato <3
To terminando o tutorial sobre backgrounds (primeira partezinha do novo sobre themes uhuul) aqui e já posto, se quiserem pedir algum tutorial ou resources, to online :3
gostaria de saber como proteger minhas autorias no tumblr
Olha, desde que o MyFreeCopright tá fora do ar, eu recomendaria você bloquear a cópia de seus textos e imagens no seu tumblr, pra dar uma dificultada pra quem quiser copiar (o que não impede 100% que pessoas de mau caráter se apropriem da sua obra, mas já dá uma bela dificultada)
Para fazer isso, existe um código que bloqueia a seleção de texto e o botão direito do mouse, é só colar ele logo abaixo de :
Oiii, eu estou tentando usar o estilo de parceria mas não dá, o código não confere sabe? ele fica totalmente verdinho e bagunça todo meu theme. Pode me ajudar plisss
Ola!
O motivo de ficar inteiro verdinho e sem as letrinhas é pq as letrinhas são na verdade uma imagem. Pra fazer essas letrinhas é só abrir uma imagem de 50px de altura e 50px de largura e escrever o que quiser nelas, depois salvar no formato .png ou .jpg e ir no seu tumblr, abrir o código e apertar naquela engrenagem no cantinho. Apertando nela vc clica em “theme assets” e carrega sua imagem e cola o codigo dela onde tá pedindo o código da imagem.
Já o motivo de ficar bagunçadinho talvez seja pq no seu theme precisaria por os parceiros dentro de uma caixinha, pra fazer isso só seguir os passos abaixo:
1- criar a caixinha no css
Cole esse codigo antes de :
#boxp1{position:auto; background:#COR DO FUNDO; padding:10px; width:LARGURApx; margin-top:DISTANCIA DO TOPOpx; margin-left:DISTANCIA DA ESQUERDApx;}
(Em LARGURA eu recomendaria o valor de 190px. Já se você quiser que ela fique paradinha quando subir ou descer a página é só trocar auto por fixed)
2- colocar a caixinha no theme com os parceiros dentro
Agora é só colar o código abaixo logo após :
PARCEIROS
Onde tá PARCEIROS é só colocar o código que é pra ser posto entre
e
Espero que tenha te ajudado, qualquer coisa só vir perguntar de novo que a gente resolve! :)
Eu vou criar um tumblr novo porque já faz um tempo que eu sai. Ao pegar seus themes eu posso mudar alguma coisa mas sem tirar os créditos claro? A proposito adorei aqui
Claro que pode, meu anjo! Deixando o credito pode ficar a vontade com tudo hahahaha
A maioria dos links do seu tutorial de como criar tema não estão funcionando, pode corrigi-los??? Thanks :)
Oii!
Aquele tutorial vai ser substituido por um outro, que será postado aos poucos como explicado pelo post de esclarecimentos. Sorry por qualquer transtorno :/
ola, queria saber em qual local (numero) eu coloco os codigos aq.. nerdesign.*tumblr.*com/post/64816667816/como-e-bota-pra-fica-aparecendo-no-tumblr-o-numero
Os códigos dos contadores de visitas podem ser colocados em qualquer lugar entre
e , onde você quiser que o contador apareça!
Se não tiver dando certo, manda ask de novo falando o que tá acontecendo que a gente resolve! :)
Como o theme novo tá ficando meio demorado e minha vida meia (muito) corrida, decidi voltar com o Nerd nesse theme antiguinho mesmo, e quando der eu coloco o novo :)
Então é isso, o nerd tá de voltaaaaa!!!!
Sobre o tutorial de themes não estar funcionando 100%
Então, o tutorial que a gente tem aqui é de uma moderadora que já saiu, ou seja, não seria legal eu modificar algo que não é meu. Por isso, vou fazer um tuto de theme novo e do zero, com um formato diferentinho.
Vai funcionar assim: Com o máximo de frequência possível, vou postar sobre uma parte do theme, separadamente, pra assim poder explicar com o máximo de detalhes possíveis, e no fim juntar tudo em um post só com os links das partes. Por exemplo: vou fazer um post falando sobre tudo que tem pra falar de Background, e linkar ele em um post fixo, depois faço outro post falando sobre imagens e por ai vai.
Sobre parceiros
Alguns de nossos parceiros foram desativados, não nos tem mais como parceiros ou não postam há mais de um ano. Esses parceiros serão retirados para dar espaço a novas parcerias <3 (As vagas para novos parceiros serão abertas em breve com um post explicando tudo certinho)
Sobre Moderadores
Por enquanto até eu arrumar toda a bagunça que tá no nerd as vagas não estão abertas, mas estarão em breve!
Por enquanto é isso!
O Nerdesign está de volta, para responder suas dúvidas (vou postar menos resources devido a falta de tempo que tá cruel - eu pensei em desativar tudo, mas não consigo abandonar vcs seus lindos hahahaha) e te ajudar nesse mundinho HTML/Photoshop
Obrigada pra quem leu tudo, e espero que compreendam tudo <3
jbbartram-illu
blakekathryn
baratheonpilled
stormborns
janainaart
annaxmalina
yousharknotpass