unicornwaste's profile picture

Published by

published
updated

Category: Friends

mini tutorial pra quem ta chegando no spacehey (ja que o spacehey me odeia vou ter que postar por partes). CODIGOS NOS COMENTARIOS PRO SPACEHEY NAO DERRUBAR!

Untitled

OKEY!

COMECANDO COM O BÁSICO DO BÁSICO:

ESTE BLOG ESTA FOCADO Á AQUELES QUE ESTÃO CAINDO COMPLETAMENTE DE PARAQUEDAS NO SPACEHEY. RECOMENDO Á AQUELES QUE JÁ TEM UMA CERTA EXPERIÊNCIA COM OS LAYOUTS DAQUI, QUE PULE ESSA PARTE! 

bom...

Untitled

Pra quem esta vindo pra cá de viagem e não entende muito de informática em geral, entendo que pode ser uma TOTAL dor de cabeça ver esses layouts e não entender porra nenhuma!!! pessoalmente, eu recomendaria já começar com um layout pré-pronto e ir editando. Mas estou de acordo que é muito confuso no começo, então vamos começar primeiro a entender e montar o nosso primeiro perfilzinho nós mesmos!


Ah, e pra ser mais fácil, recomendo usar o seguinte site: clique!

Ele é uma cópia do spacehey feita apenas para testar layouts, então pra quem não quer ficar se dando o trabalho de testar, dar reload no próprio perfil, voltar, testar, e o mesmo loop ate gostar de algo, ele é muito bom! ele é assim:

você apenas tem que colocar os códigos na primeira ou segunda caixinha, e eles vão imediatamente carregar! Bem fácil, né?


UntitledUntitled

Obs: os seguintes códigos que eu vou dar pra vocês funcionam tanto como layouts de perfil tanto como layouts de blog, que como vocês podem ver o meu blog tá todo decoradinho! No caso do blog, vocês tem essa interface:

Vocês vão abrir essa opção aqui:   

e copiar colar o código aí dentro, clicar de novo e essa interface irá fechar com os códigos dentro.

No caso de carregar no perfil, vocês vão até o >edit profile< e vai abrir a página cheia de caixinhas brancas. vocês podem copiar e colar os códigos em qualquer uma das caixinhas, mas é recomendado colocar na seção >about me<


CODIGOS NOS COMENTARIOS!! OBSERVACAO: NO COMECO E FINAL DE CADA CODIGO, COLOQUE O SEGUINTE: 

<STYLE> 

</STYLE>


exemplo:

<style> codigocodigocodigo </style>


LINK DO PROXIMO MINI TUT: aqui!!



36 Kudos

Comments

Displaying 10 of 10 comments ( View all | Add Comment )

aroundevil

aroundevil's profile picture

obrigada chuchu! me ajudou muito >.<


Report Comment

Meyzinha

Meyzinha's profile picture

querida(o), queria tirar uma duvida. você tiras as imagens aonde? ja tentei no pinterest e não vai, se for no pinterest, você gera o codigo aonde?


Report Comment



no pinterest tem como sim! clica com o botão direito do mouse na imagem e clica em "Abrir imagem em outra guia" e copia o link :3

by M4keB3liev3; ; Report

Meulizza

Meulizza's profile picture

Obrigadinha! Vc me ajudou dms.


Report Comment

Manuel Janeiro

Manuel Janeiro's profile picture

Olá "unicornwaste", Valeu! Muito Obrigado pelas suas excelentes Dicas neste seu Tutorial. Muito Bacana! Brigadão! Estamos na seguição!


Report Comment



Hehehe fico muito feliz que tenha gostado, Manuel! Vou postar mais alguns, atentos todos a novas diquinhas!!

by unicornwaste; ; Report

julia

julia's profile picture

Nossa, ajudou muito


Report Comment



a mds a foto do gekyume :(

by sayorii:3; ; Report

florentt

florentt's profile picture

você é mt necessaria ,')


Report Comment

Mindy_woo

Mindy_woo's profile picture

Como eu crio uma página pra layout?, queria postar uns, mas n sei como


Report Comment



infelizmente o spacehey ta com problema nos layouts :(((( faz MESES q ta parado e nao se resolve.. normalmente voce apenas teria que ir na parte dos layouts e ali diz "create your own", mas da erro quando voce posta :(

by unicornwaste; ; Report

˚‧₊˚Mar˚。⋆‧₊˚

˚‧₊˚Mar˚。⋆‧₊˚'s profile picture

Vc é um anjo na terra!! Muito obrigada <3


Report Comment

KOJI

KOJI's profile picture

nossa moça, eu te amo vey...


Report Comment

unicornwaste

unicornwaste's profile picture

BACKGROUNDS:
(imagens de fundo)

Bom, começando por isso que é o mais simples, você vai usar o seguinte código para a imagem de fundo:



body {

background-image: url("https://i.pinimg.com/736x/10/f8/51/10f851038f38654cfe0f4e38d8328c53.jpg") !important;

background-color: black !important;

background-attachment: fixed !important;

margin: 0;

padding: 0;



está vendo onde está marcado com azul? Apenas substitua essa parte com qualquer url de imagem ou gif! --- agora, se você quiser APENAS um background de >COR< ao invés de imagem, use o seguinte:


main {
background-color: black;
}

substitua a cor onde diz "black" por qualquer cor que quiser (contanto que esteja em inglês), ou também você pode usar hexcolor! link de onde pegar hexcolor: color picker (copie o hexcolor com a hashtag)


Report Comment



OTIMO! focando no background de dentro do perfil (onde vão estar suas informações)


main {

background-image: url(SUAURL);}



OU



main {

background-color: cor_ou_hex;}

by unicornwaste; ; Report

OTIMO!
AGORA! lets spice things up! vamos colocar um banner legal?!

BEM SIMPLES :3





main:before {

width: auto;

margin-bottom: 25px;

border: 1px solid black;

height: 150px;

display: block;

content: "";

background-image: url(https://i.pinimg.com/736x/39/c6/c4/39c6c429f43da7923203ed7a1363cc2d.jpg); background-position: center center;

background-size: cover;



SUBSTITUA O QUE ESTÁ ENTRE PARENTESES POR QUALQUER GIF OU IMAGEM! você também pode mudar o tamanho do seu cabeceiro em "height: 150px;", mude para a quantidade de pixels que desejar, e pronto!

by unicornwaste; ; Report

Legal né :P Agora vamos pra penúltima etapa desse tutorial!

vamos mudar essas cores feias do spacehey default!



:root {

--logo-blue: transparent; /* MUDA A COR DA PARTE DE CIMA DO SEU PERFIL */

--darker-blue: pink; /* MUDA A COR DOS SEUS LINKS */

--lighter-blue: lightpink; /* MUDA A COR DA BARRA DE NAVEGACAO */

--even-lighter-blue: #ccc;

--lightest-blue: #fff;

--dark-orange: #FFF; /* MUDA A COR DA FONTE DE ABOUT ME E DO WHO ID LIKE TO MEET */

--light-orange: purple); /* MUDA A COR DOS COMENTARIOS */

--even-lighter-orange: pink; /* MUDA A COR DOS COMENTARIOS */

--green: #38d;

}



é claro, mude as cores de acordo com seu gosto, podendo usar até hexcolor! seja criativo!

by unicornwaste; ; Report

MUITO BEM! vamos para a ultima parte desse nosso primeiro tutorial! ^_^

pessoalmente, a mim me incomoda um pouco como essa parte do meio do perfil (onde estão suas infos) é tão estreita em desktop! Fica esquisito >_> então, pra mudar isso, apenas cole esse pequeno código:



.container {

width: 90%;

max-width: 1600px;

}





onde diz ``1400px``, edite pra quantidade que quiser! a pagina vai aumentar (horizontalmente) a quantidade que você quiser :3

by unicornwaste; ; Report

MEU DEUS VOCÊ É D+

by MiyaTHEclown; ; Report

Obgg diva. Gnt eu boba com esse app kkkkkk igual dos anos 2000

by ˚ ༘♡ ⋆。˚rottngrlℳ ༘♡ ⋆。˚; ; Report

obrigada gente! voces sao uns anjos, que tudo de certo!

by unicornwaste; ; Report

Deus te abençoe grandemente

by Bekkita; ; Report

Oloko ajudou d+

by Silver☆; ; Report

brigado pessoa cronicamente online *emoji de oração*

by Plutonicc; ; Report

faz um tutorial de como mudar os posts do blog pfv!, queria mudar a cor pra vermelho

by sayorii:3; ; Report

faco sim!! proximo blog vai ser de como editar os blogs e deixar eles bonitinhos entao! (≧∀≦)ゞ

by unicornwaste; ; Report

obggg

by sayorii:3; ; Report