~JadeRiddle - Clan Dragon

JadeRiddle
Deusa dos OMG's!
Nome: Sra. Riddle
Status: Usuário
Sexo: Feminino
Localização: São Paulo, São Paulo, Brasil
Aniversário: 2 de Janeiro
Idade: 15
Cadastro:

Como fazer um style - Parte 1 (Fotos)


Postado

Como fazer um style - Parte 1 (Fotos)

O mordomo sempre


Bom, pipous. Eu gostei tanto de fazer styles, e algumas pessoas me pediram para eu ensinar. Então estou aqui.
Existem poucos tutoriais de como fazer, alguns não são tão detalhados e outros estão bem desatualizados, então eu mesma decidi fazer um
(Jade modo professora ON)
Enfim, eu vou dividir o jornal por partes, é muita coisa, e os jornais vão ser enormes (mais ou menos), porque eu vou fazer bem passo a passo mesmo.

Vamos parar de enrolação e bora partir pra aula.


Bom, a primeira coisa a fazer é baixar o style base que o Spirit fornece. Para baixa-lo é bem fácil.
Entre no site do Social Spirit e faça o login. Na página inicial, no canto superior esquerdo você vai encontrar isso:




Ao de clicar ali, você vai achar uma pequena lista. Clique em 'Adicionar Conteúdo' e depois em 'Enviar um style' .

Leia as regras direitinho. Pra não ter problemas. (eu que sei, rsrsrs)

Depois de ler todos os termos, clique em 'Sim, eu aceito os termos' e você vai direto para a página de envio do Style. Na parte de cima há um box amarelo com o link do modelo base de CSS. Baixe esse modelo.



Depois de baixar o modelo, extraia ele e abra o arquivo 'modelo'. É nele que vamos mexer para mudar tudo.

No arquivo extraído vai ter também o símbolo do Google Chrome. Abrindo ele você vai poder ver como o seu tema está todas as vezes que mudar algo, até que ele fique perfeito para ser enviado para o site do Spirit. Se abri-lo agora, ele estará assim:



Vamos começar mudando a parte de cima, onde está escrito 'LOGO'.

Você vai precisar criar uma imagem em algum editor de imagem, como o Photoscape por exemplo, que foi o que eu usei. A imagem criada precisa ter 1000 pixels de largura, já a altura você escolhe. Eu sugiro uns 350 pixels de altura. É o tamanho máximo, nem grande demais, nem pequeno demais.

Depois de fazer a sua imagem no Photoscape, ou em qualquer editor de imagem, você vai precisar hospeda-la em algum lugar. Eu sempre hospedo as minhas imagens aqui: https://imgsafe.org/ ou https://ap.imagensbrasil.org/

Copie o link da sua imagem e no arquivo 'modelo', procure por imgcimaLogo e substitua isso pelo link da sua imagem.



Acima de img/cimaLogo há o código height, que significa a altura. Ele está marcando 120px. Troque o 120 pelo número que você escolheu para a altura do seu topo. No meu caso, foi 350. Vai ficar assim:



Depois de substituir, clique em 'File' e 'Salvar' ou 'Ctrl+S'. Para ver como ficou o seu topo, clique no ícone do Chrome na pasta que você extraiu onde está escrito perfil.



Agora vamos mudar o fundo, debaixo da foto no topo. Pode ser uma imagem fixa, ou ela pode se repetir várias vezes, ou se você preferir, apenas uma cor, sem nenhuma foto.

Para a foto:
Escolha uma imagem de mais ou menos 1022x520, hospede-a em um dos sites e substitua por isso:



-para a imagem ficar fixa, escreva 'fixed' entre 'no-repeat' e 'center top'
-se quiser várias imagens fixas, é só apagar o 'no-' e deixar apenas o 'repeat'


Para a cor:

É só você apagar toda essa parte: "url(img/fundoBase.jpg) no-repeat center top" e subtituir por um código da cor que prefere.

site do códigos: http://www.flextool.com.br/tabela_cores.html

Por exemplo:



Como da primeira vez, salve e clique no ícone do Chrome na pasta extraída, recarregue a pégina, para ver o resultado.


Agora vamos mudar o fundo de tudo, que seria aquela parte cinza degradê ali. Para deixar essa parte fixa você também vai precisar de uma imagem grande, talvez uns 1210x400. Ou então você pode colocar um background que se repete, como eu expliquei no item acima.
Faça a mesma coisa que você fez no item acima, mas dessa vez procure por img/fundoDegrade para colar o link da sua imagem. Se não quiser colocar uma imagem, troque o código pelo # seguido da cor, da mesma forma que foi feito acima.



Bom, então essa foi a primeira parte. Se ainda tiverem dúvida, digam nos comentários. Espero que tenha ficado bem explicadinho. É a minha primeira aula, se gostaram, comentem também. Vou aguardar a opinião de vocês.

beijinhos.
<3


Gostou da Jornal? Compartilhe!

Gostou? Deixe seu Comentário!

Muitos usuários deixam de postar por falta de comentários, estimule o trabalho deles, deixando um comentário.

Para comentar e incentivar o autor, Cadastre-se ou Acesse sua Conta.


Carregando...