Guia supremo de uso do MyAnimeList [2]

Olá! Hoje vamos aprender a personalizar nosso MyAnimeList!

O tutorial parece longo e complicado, mas na realidade é fácil e há muitos exemplos com imagens para ajuda-lo. Se precisar, basta clicar nas imagens para ampliar. Vamos lá!

Passo 1: Ache My List Style

Profile > Edit > My List Style

Passo 2: Crie seu Style ID
Agora nessa página clique em Advanced Style CSS Editor que está circulado em vermelho. 

Clique em "I understand..." circulado em vermelho.

Clique em “Click here to create anotehr one” para criar seu segundo Style ID, cada usuário do MAL tem direito a dois, um para a anime list e outro para a manga list.

Passo 3: Clique no seu Style ID
Clique no seu recém criado Style ID marcado em vermelho.

Nota: O seu não terá o mesmo número que na imagem.

Esse é o arquivo CSS que você irá aplicar a sua lista. Os códigos colocados nessa caixa controlam o layout da sua lista.

Passo 4: Apague o texto 
Apague todo o texto na caixa. Nós não usaremos esse código.

Passo 5: Coloque o código pré-pronto na caixa abaixo agora que ela está limpa (cole apenas o que está em azul, o que está em preto é apenas explicação, e o que está em negrito na parte azul, é o que você pode mudar, lembrando que as cores e tudo mais tem que estar em inglês).

BACKGROUND (PLANO DE FUNDO)
Esse é o background principal para a página inteira.
Mude o link da imagem para o plano de fundo que deseja!

body {
background-image: url("http://i.imgur.com/XBoSN.jpg");
background-attachment: fixed;
background-size: cover
}

HEADER COLOR AND FONT
Esses códigos controlam os cabeçalhos principais, fontes e cores.
É só mudar o nome da cor e a fonte para alguma que deseja.

.header_title {
background-color: lightskyblue;
color:white;
font-family: Comic Sans MS;
font-size:35px;
}

SUB-HEADERS BACKGROUND COLOR
Abaixo de cada header principal há um sub-header (Score, Episodes, Tags, etc.)É só mudar o nome da cor para alguma que deseja.

.table_header {
background-color: lightblue;
}

ANIME/MANGA TITLE FONTS
Esse são os títulos de anime/mangá na sua lista. É só mudar o nome da cor e a fonte para alguma que deseja.

.animetitle, .animetitle:visited {
color: aqua;
font-family:comic Sans MS;
font-size:18px;
}

FONTE DA LISTA
Esse é a fonte e cor para os números, links e palavras na lista.

.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: snow;
font-family: Tahoma;
}

LARGURA DA LISTA
Use isso para aumentar a largura da sua lista.

#list_surround {
width:950px;
}

REPOSICIONANDO O BACKGROUND PRINCIPAL
Mude a posição de onde o background começa na sua tela usando “background-position”. Você substitui center por outras propriedades, elas podem ser qualquer uma entre: left, top, bottom, right, ou center.

Então se quer que seu background comece do centro da tela, use center center após background-position no código abaixo, substituindo o center 43%.
Exemplos:
Se quiser que comece do topo e da esquerda, use "top left"
Se quiser que comece do top e do centro, use "top center"
Se quiser que comece da direita e do topo, use "right top"
Se quiser que comece da direita e de baixo, use "right bottom"
E assim por diante...

Adicionalmente, você pode mudar essas palavras para “%”, para determinar o quanto para direita ou para esquerda você quer que a lista comece. Por exemplo, "30% top" irá começar o background do topo, mas 30% da imagem estará para a esquerda do layout. Você também pode mudar “top” para “%” para controlar o quando para cima ou para baixo a imagem começa.

body{

background-position: center 43%;}

Passo 6: Salve o código na caixa
Agora que você colou o código na caixa, clique no botão azul abaixo da caixa onde diz “Update CSS”.

Nota Importante: algumas vezes o código na caixa de texto não será salvo ou irá aparentar ter voltado para antes de ter salvado. Então apague novamente tudo na caixa e cole o código novamente e salve apenas para ter certeza. Isso é opcional, mas é um bom habito. Você deve fazer isso toda vez que fizer mudanças no seu CSS! 

Você deve ter certeza que essa mensagem apareceu quando salvar o código.

Passo 7: Aplique o Style a sua lista
Profile > Edit > My List Style > Advanced Style CSS Editor

Você irá achar o Style ID que salvou anteriormente e então irá seleciona-lo como no exemplo abaixo (a sua não terá o mesmo número que a minha).

Agora salve as mudanças clicando no botão azul "Change Llist Styles".

Você deve ver essa tela quando salvar corretamente.

Passo 8: Veja se sua lista mudou

Vá na sua lista e atualize a página! O meu que fiz para testar ficou assim:

Você pode por a imagem, cores e fontes que quiser.

No próprio MAL você encontra tutorias e pessoas explicando.

Se ainda tem dúvidas, deixe um comentário ou entre:

Em inglês (beeeem completo).

Em português (não tão completo, mas útil).

Até a próxima!