1. Spirit Fanfics >
  2. Membros >
  3. TheBoA

TheBoA

TheBoA
Nome: — our beloved BoA.
Status: Usuário
Sexo: Indisponivel
Localização: Playlists e segredos do mundo.
Aniversário: Indisponivel
Cadastro:

TheBoA


O TheBoA é um projeto de uma pessoa só com o objetivo de divulgar as músicas da BoA e servir os stylemakers do site de tutoriais e materiais úteis para a personalização de um style CSS. Além disso, o projeto também disponibiliza styles e outros itens de uso público.

⥼ Menu (masterlist dos jornais): https://bit.ly/2HPj2J2
⥼ Sugestões: https://bit.ly/2TGDApR
⥼ Pedidos de betagem: https://fics.me/21168626

TheBoA e os Segredos do Mundo: Episódio Três - Fazendo seu primeiro style

Postado

TheBoA e os Segredos do Mundo: Episódio Três - Fazendo seu primeiro style

TheBoA e os segredos do mundo
❗ #PLAYLIST DE HOJE: MERRY-CHRI

🎄

EPISÓDIO TRÊS: FAZENDO O SEU PRIMEIRO STYLE
um resumo de temas já abordados e explicações básicas
para aqueles que nunca fizeram um style antes


Sejam bem-vindos ao jornal de Natal do TheBoA! Esse ano, debaixo da árvore, trago presentinhos para quem quer finalmente começar a fazer styles para embelezar a aba do Personalizar. E, já que estamos em clima natalino, aqui vai uma recomendação de música perfeita para se ouvir nas primeiras horas do dia 25:


Escreveu Merry-Chri, BoA



Na playlist de mesmo nome, estão as duas versões de Merry-Chri (em coreano e em japonês, caso você tenha alguma preferência inexplicada). A diferença é que, dessa vez, você pode adicionar as suas músicas natalinas favoritas na playlist do TheBoA! Não há limite de músicas a serem adicionadas.

Para aqueles que adicionaram músicas antes da data de hoje, aqui está a surpresinha que tinha sido prometida:




Agora, vamos falar de (mais) coisa boa? Esse jornal é uma ajudinha pra você que quer começar a fazer styles. Continue lendo, tenha um Natal incrível e não se esqueça de ouvir BETTER, o melhor álbum de k-pop de 2020 segundo a Billboard, para uma pele limpa e inspiração ilimitada.




‹ clique aqui para acessar a masterlist de jornais do TheBoA,
com um resumo dos temas abordados e materiais disponibilizados ›



Escreveu
ÍNDICE:

ㅤㅤ— O que é CSS?
ㅤㅤ— Fazendo comentários na CSS;
ㅤㅤ— Primeiros passos: adquirindo e manipulando o modelo;
ㅤㅤㅤㅤi) Utilizando o modelo do TheBoA;
ㅤㅤ— As imagens do modelo;
ㅤㅤㅤㅤi) Como cortar meu banner corretamente para fazer um cimalogo?
ㅤㅤ— Adicionando fontes externas ao style;
ㅤㅤ— O style privado para pré-visualização;
ㅤㅤ— Postando um style;
ㅤㅤ— Regras importantes do site;
ㅤㅤ— Outros;
ㅤㅤ— (EXTRA) Style de Natal do TheBoA e jornais de icons natalinos.


O texto do jornal foi colocado em spoilers para diminuir o seu tamanho e facilitar a busca por tópicos específicos. Seria recomendável, contudo, que lesse cada um dos spoiler por ordem, caso você se interesse por styles mas não saiba muito bem por onde começar.

Os jornais do TheBoA não têm o objetivo de ensinar, em detalhes, a fazer um style, mas facilitar ao máximo o processo de aprendizagem dos conhecimentos necessários para se produzir um style CSS para o site.



# O QUE É CSS?

Para fazer um style, nós utilizamos a linguagem CSS, que é relativamente simples. A estrutura da CSS que você verá é algo assim:




Aquilo que está antes da primeira chave (#nav) é chamado de seletor. O background é chamado de propriedade. Existem várias propriedades além do background, como font-size, font-family, letter-spacing… Aquilo que vem depois do “background” é o valor (que, nesse caso, é um um código de cor).

Para facilitar a sua vida, aqui vão alguns documentos com a explicações mais detalhadas sobre os seletores, as propriedades e valores:


ㅤㅤ• dicionário de seletores
ㅤㅤ• dicionário de propriedades




# FAZENDO COMENTÁRIOS NA CSS

Caso queira deixar algum comentário ou escrever alguma coisa que não seja um código dentro do documento, utilize essa estrutura:


/* texto */


Você pode escrever o que quiser, quantas linhas quiser! Entretanto, se você não deixar seu “texto extra” dentro disso: /**/, seu código provavelmente irá bugar. Por isso, sempre se certifique de que os comentários estão feitos corretamente e de que para todo /* há um */ (e vice-versa).




# PRIMEIROS PASSOS: ADQUIRINDO E MANIPULANDO O MODELO

Antes de mais nada, você precisa de um modelo CSS; ou seja, um código base que vai te guiar pela edição do seu style. Você pode baixar o modelo disponibilizado pelo spirit clicando aqui ou utilizar o modelo disponibilizado por algum outro usuário, uma vez que o modelo do site está um pouco desatualizado.

A TheBoA já disponibilizou um modelo base que você pode acessar clicando aqui. O restante do jornal prosseguirá utilizando esse modelo.


Mostrar Spoiler: ATENÇÃO!

Não remova os créditos enquanto estiver utilizando este modelo. Os créditos são essa parte:


ㅤㅤi) UTILIZANDO O MODELO DO TheBoA

Você pode baixar o modelo em .txt, indo em arquivo > fazer o download, como na imagem abaixo:




Ou, alternativamente, você pode simplesmente fazer uma cópia do modelo para um documento seu, dessa forma:




Quando tiver baixado ou feito uma cópia do documento, você poderá começar a editar seu style!




# AS IMAGENS DO MODELO

No modelo do TheBoA, as imagens estão devidamente sinalizadas e legendadas:





O style do Spirit Fanfics tem duas componentes: o banner e a CSS. O banner é a imagem que precede a CSS. Por exemplo, para esse style, o banner utilizado foi esse:




Aqui você encontra o template de banner em psd disponibilizado pelo @aestheticrsc, com as marcações de cada elemento do perfil para facilitar a visualização de como ficará o banner.


Não há tamanho correto para o banner. Você só precisa de uma imagem que abranja a sua tela de forma satisfatória. Um bom tamanho a se usar é o 1800x800 (mas, lembrando: não há tamanho correto. Ele pode ser mais largo ou mais estreito, a única exigência é que ele “caiba” na tela, não tendo problema se passar um pouco da medida lateral).

Para além do banner, que é uma imagem obrigatória, existe outra imagem também obrigatória chamada cimalogo. O cimalogo tem 1000px de largura, com altura mínima de 50px e máxima de 350px. É uma imagem que fica no topo da tela e pode ser feita cortando a parte superior do banner. É obrigatório que conste, no cimalogo, o nome de usuário de cadastro (url) de todas as pessoas que participaram na criação do style.


Voltando ao exemplo desse, o cimalogo utilizado foi esse:




O cimalogo precisa ter a mesma altura que a que está depois de height no código abaixo:




A largura é sempre de 1000px.


ㅤㅤi) COMO CORTAR MEU BANNER CORRETAMENTE PARA FAZER UM CIMALOGO?

Como dito anteriormente, o cimalogo pode ser feito a partir do banner; dessa forma, não é necessário fazer duas imagens separadas. Há um método preciso de corte que pode ser feito pelo Photoshop.




Depois de finalizado o banner, aperte as teclas Ctrl + Alt + C ou vá até Imagem > Tamanho da tela de pintura para abrir essa janela:





Em primeiro lugar, coloque o tamanho do cimalogo que você quer. No meu caso, é 1000px de largura e 200px de altura.




Em seguida, clique nesse quadrado para levar a bolinha central até ele:








Feito isso, clique em OK e depois em Continuar. O cimalogo está cortado! Para voltar ao tamanho inicial, basta apertar Ctrl + Z para desfazer a ação.



# ADICIONANDO FONTES EXTERNAS AO STYLE

Para utilizar fontes diferentes no font-family, é preciso recorrer a fontes de procedência externa. Para isso, utilizamos o site fonts.google.com.




ㅤㅤ• Em vermelho: filtrar por categoria, língua, propriedades da fonte;
ㅤㅤ• Em azul: barra de pesquisa;
ㅤㅤ• Em verde: barra para inserir uma frase personalizada que serve como pré-visualização da fonte.

Depois de escolhida a fonte que você quer exportar para a sua CSS, selecione os estilos que você quer:




Escreveu Especificando os estilos das fontes: exemplos

{ font-family: roboto;
font-weight: 800; }
Fonte: roboto; estilo: negrito 800

{ font-family: roboto;
font-style: italic; }
Fonte: roboto; estilo: itálico.


Eu escolhi três estilos: regular 400, regular 400 italic e medium 500. Assim que eu cliquei nos botões de adicionar style, essa aba apareceu. Para prosseguir, fui em import:



Agora, posso prosseguir de 2 jeitos. Primeiro: copiar toda essa parte e colar no arquivo CSS (recomendo que salve antes de tentar).




Caso não funcione, copie o link entre os parênteses e os apóstrofos para o seu navegador. Em seguida, copie todo o código que aparecer (esse vai funcionar em 100% dos casos).







# O STYLE PRIVADO PARA PRÉ-VISUALIZAÇÃO

Geralmente, para pré-visualizar um código que estamos fazendo, criamos um style privado. Para isso, seguimos o mesmo processo de adicionar um style, com algumas pequenas mudanças.

Para adicionar um style, clique nas três linhas que aparecem na página inicial do Spirit. Vá em “Adicionar conteúdo” e então a Enviar um style.






Você será redirecionado para a página das Diretrizes de Conteúdo do site. É muito importante que leia uma ou duas vezes, caso não esteja familiarizado, pois uma transgressão pode levar a exclusão do seu style, em alguns casos. Caso tenha dúvidas, pergunte no fórum ou tire a dúvida com alguém que se disponibilize a isso.


Depois de ler as diretrizes com atenção, clique nesse botão para continuar:






Você será, então, redirecionado para a página “Adicionar Style”. Como é um style privado (ou seja, não aparecerá na aba do Personalizar para as pessoas verem), você não precisa colocar uma prévia bem arrumada ou uma descrição muito trabalhada. Eu geralmente faço um style privado intitulado prévia, com um banner na área da prévia e um “.” como descrição. A medida em que for editando um style, apenas substituo a CSS no campo específico, e sempre reutilizo o mesmo style privado para pré-visualizar meus styles.





A categoria pode ser qualquer uma; você pode adicionar outras contas suas no espaço da coautoria e a descrição pode ficar assim, APENAS para a utilização do style, em privado, para pré-visualizar seu style.

Depois disso, é só abrir seu style privado e clicar na prévia para acessar a pré-visualização do site.




Para pré-visualizar outras áreas, como a aba dos favoritos, por exemplo, você precisa editar a url, não clicar no botão dos favoritos (caso contrário, sairá da pré-visualização).

Nesse caso, é só adicionar /favoritos depois o usuário de login da conta em que você está pré-visualizando seu style:







# POSTANDO UM STYLE

Para adicionar um style, clique nas três linhas que aparecem na página inicial do Spirit. Vá em Adicionar conteúdo e então a Enviar um style.






Você será redirecionado para a página das Diretrizes de Conteúdo do site. É muito importante que leia uma ou duas vezes, caso não esteja familiarizado, pois uma transgressão pode levar a exclusão do seu style, em alguns casos. Caso tenha dúvidas, pergunte no fórum ou tire a dúvida com alguém que se disponibilize a isso.

Depois de ler as diretrizes com atenção, clique nesse botão para continuar:






Você será redirecionado, então, para a página “Adicionar Style”. É muito importante preencher todos os campos adequadamente nesse caso, uma vez que se trata de um style público.


ㅤㅤ• A prévia do style deve ser um print (screenshot) de um perfil com o style em questão aplicado. Não é permitido colocar apenas o banner na prévia.
ㅤㅤ• Na descrição do style devem constar, obrigatoriamente, todos os links dos materiais utilizados no banner, desde as texturas e psds até os brushes e patterns.
ㅤㅤ• Styles privados (por exemplo: feitos para o uso específico da conta de um projeto) devem ser publicados na aba dos privados; não podem ser feitos público.


Não se esqueça de marcar “não” para publicar um style público:






# REGRAS IMPORTANTES DO SITE

É muito importante que leia as Diretrizes de Conteúdo do Spirit Fanfics e atente-se para as regras. Caso você tenha lido as regras, mas ainda se sinta inseguro ou queira uma segunda opinião para saber se o seu style fere alguma regra, você pode pedir uma betagem de style coma TheBoA. Reitero, contudo, a importância de ler as regras do site, mesmo que vá pedir betagem para alguém.

Uma recomendação, que não é uma regra propriamente dita, mas que pode levar a transgressão de uma, é nunca colocar elementos (icon, informações, botões) para além do limite de 1000px do cimalogo/nav. Ficou confuso?




Esse é o modelo de style da TheBoA, disponibilizado nesse jornal.

Não é necessariamente proibido colocar os elementos na parte em vermelho, mas é recomendável manter tudo na parte central, sinalizada pela largura da nav (azul), uma vez que, em algumas telas, a parte vermelha pode não aparecer. Dessa forma, o style torna a utilização do site extremamente dificultosa, o que fere uma regra:






# OUTROS — DICAS IMPORTANTES

Caso não encontre um tutorial ou solução para um problema que esteja tendo, dê uma olhada nas aulas de style do site ou crie um tópico no fórum de stylemakers. Caso nada disso resolva, apenas como último recurso, tente buscar um Admin Personalizar ou um stylemaker que se disponibilize a tirar dúvidas por mensagem privada.

Caso você já esteja mais familiarizado com a CSS e queira aprender a fazer formas com :before e :after, juntamente com efeitos de hover para esses seletores, acesse esse jornal do TheBoA.





STYLE DE NATAL DO TheBoA


☆ jornais com icons de natal ☆
idol icons (especial de natal) — parte 1, @popconsㅤㅤ
random icons (especial de natal) — parte 2, @popcons

Permalink Comentários (8)

[04/12/2020] Pedidos de Betagem abertos (TheBoA e os Tesouros do Inconsciente parte 1.2)

[31/10/2020] TheBoA e os Segredos do Mundo: Episódio Dois - :before e :after para criar efeitos

[25/10/2020] HalloBoA: it's that time of the year again (ICONS, STYLE)

[28/09/2020] TheBoA e os Segredos do Mundo: Episódio Um - Styles para iniciantes


Atualizações do Usuário

Usuário: TheBoA
A série de styles de b-sides da BoA chegou ao fim! Ou quase...
Style Moon and Sunrise (Sunrise ver.)
Style Moon and Sunrise (Sunrise ver.)
Style Moon and Sunrise (Sunrise ver.) - Style de Styles Originais por TheBoA - Citação: menu: jornais da theboacred. por @EX9 & @TheBoA OUÇA..
Usuário: TheBoA
Adicionei um novo style css
Style: Moon and Sunrise (Sunrise ver.)
Style: Moon and Sunrise (Sunrise ver.)
Citação: menu: jornais da theboacred. por @EX9 & @TheBoA OUÇA A PLAYLIST sugestões de música por @cookiecomleite
Usuário: TheBoA
Na véspera da véspera de Natal, o TheBoA traz os seus presentes adiantados e outras surpresinhas interessantes para aqueles que acompanham a série de jornais "TheBoA e os Segredos do Mundo".
Jornal TheBoA e os Segredos do Mundo: Episódio Três - Fazendo seu primeiro style
Jornal TheBoA e os Segredos do Mundo: Episódio Três - Fazendo seu primeiro style
TheBoA e os segredos do mundo ❗ #PLAYLIST DE HOJE: MERRY-CHRI 🎄 EPISÓDIO TRÊS: FAZENDO O SEU PRIMEIRO STYLE um resumo de temas já abordados e explica..
Usuário: TheBoA
Adicionei um novo jornal
Jornal: TheBoA e os Segredos do Mundo: Episódio Três - Fazendo seu primeiro style
Jornal: TheBoA e os Segredos do Mundo: Episódio Três - Fazendo seu primeiro style
TheBoA e os segredos do mundo ❗ #PLAYLIST DE HOJE: MERRY-CHRI 🎄 EPISÓDIO TRÊS: FAZENDO O SEU PRIMEIRO STYLE um resumo de temas já abordados e explicações básicas para a..
Usuário: TheBoA
É a última oportunidade para colocar suas músicas de Natal favoritas na playlist & receber uma surpresinha mais tarde hihi https://open.spotify.com/playlist/6426AQklnjmYfCAImbPKSu