1.13 - Os Styles não podem conter imagens, menus, botões e links falsos, que induzam a erro (layout enganoso), exemplo, prints de páginas ou programas, sob pena de exclusão do style;
Isso quer dizer que aqueles styles feito de prints de sites, feito o do Photoshop, DeviantArt, não são mais permitido. Isso fazia os usuários se confundir, o engraçado é que eu cometia isso, mesmo sabendo que os botões eram falsos, que não existiam no Spirit, imediatamente eu clicava neles kkkkkkkkkkkkkkkkkkkkkkkkkk Então, esses styles estão proibidos por confundir as pessoas.
1.14 - O Style não pode modificar ou ocultar qualquer barra, menu e conteúdos da página do Spirit, sob pena de exclusão do Style, ou seja, ele não pode ocultar ou alterar as cores, fontes e efeitos originais. Sendo eles:
a. cursores do mouse;
b. a barra de rolagem (scrollbar) do lado esquerdo do site, localizada no menu esquerdo;
c. a barra superior do site;
d. o menu pedidos de amizade;
e. o menu notificações;
f. o menu direito de opções (três pontinhos);
g. o menu esquerdo, principal do site (três tracinhos);
h. o menu busca;
i. o rodapé;
j. qualquer elemento da estrutura do site;
k. qualquer elemento do bloco “Minhas Histórias”;
Nota: são
prints da aula antiga, apenas repostando ^^
Muitas
pessoas não entendem exatamente essa regra, até eu às vezes tenho dúvidas de
algumas coisas. XD Porém, os que eu sei, eu citarei aqui para vocês, mostrando
prints e claro, dizendo o que pode ter causado e como resolver. Depois que nos
acostumamos com ela, fica difícil cometê-la, então vamos começar? <3
Não pode alterar as categorias das fanfics (vocês veem, clicando em qualquer título de fanfics, em minhas histórias, no menuDireito
Não pode alterar as categorias das fanfics (vocês veem, clicando em qualquer título de fanfics, em minhas histórias, no menuDireito
A categoria
está com um contorno vermelho. Essa alteração foi causa pelo adicionamento do
text-shadow no: #meio span, #meio span a, .admin,
.admin:hover, .ativo, .ativo:hover, .link {
Nota: a fonte mudou de cor, pois adicionei o !important; no color dele. Ou seja, se o color tiver assim: color: #ff0000!important; nesse lugar, deixe assim: color: #ff0000; pra não alterar as categorias dessa parte, pra evitar a quebra da regra 1.14
A categoria
está com um tamanho grande e sem o sublinhado. Essa alteração foi causada pelo
adicionamento do font-size e o text-decoration no: #meio span, #meio span a, .admin,
.admin:hover, .ativo, .ativo:hover, .link {
Tanto o
título da fic, como o meu nick e a categoria, estão com a cor alterada. Essa
alteração foi causa pelo adicionamento do !important; no color do a, body que
fica quase no finalzinho do modelo.
Tanto
a cor dos comentários, como a cor dos favoritos, estão vermelho. Essa alteração
foi causa pelo adicionamento do código do itálico, o:
#meio i {
color: #ff00000;
}
i, em {
font-family: "Times New Roman";
}
Para resolver esse problema tem que adicionar o:
#fanficPopupContent .favorito i, #fanficPopupContent .comentario i {
font-family: Helvetica,Arial,sans-serif;
}
Vale lembrar que o propósito desse código é deixar o número de favoritos e comentários, das fanfics, no menuDireito, do jeito padrão do site. Ou seja, corrigir a alteração que o código do itálico faz com eles. Então não adicionem, não alterem nada desse código.
Sobre o código que resolve esse problema, que tem todo o crédito sobre ele é a @Dengosa, uma das administradoras do Personalizar. Ela fala sobre isso nesse tópico – e principalmente a @Aloi, que a ajudou bastante com esse problema, e @Overgreen (que pegou com Dengosa) por ter me passado antes dela fazer o tópico/eu vê-lo. XD
#meio i {
color: #ff00000;
}
i, em {
font-family: "Times New Roman";
}
Para resolver esse problema tem que adicionar o:
#fanficPopupContent .favorito i, #fanficPopupContent .comentario i {
font-family: Helvetica,Arial,sans-serif;
}
Vale lembrar que o propósito desse código é deixar o número de favoritos e comentários, das fanfics, no menuDireito, do jeito padrão do site. Ou seja, corrigir a alteração que o código do itálico faz com eles. Então não adicionem, não alterem nada desse código.
Sobre o código que resolve esse problema, que tem todo o crédito sobre ele é a @Dengosa, uma das administradoras do Personalizar. Ela fala sobre isso nesse tópico – e principalmente a @Aloi, que a ajudou bastante com esse problema, e @Overgreen (que pegou com Dengosa) por ter me passado antes dela fazer o tópico/eu vê-lo. XD
Nota:
na postagem: "Por que os administradores não nos avisam quando o style/a
fanfic tá irregular?" uma pessoa me avisou que esse código do itálico
altera a cor da bolinha, que fica girando em carregando (vemos isso, quando
estamos baixando a rolagem, na parte onde fica os amigos, no menuDireito). Ela
disse isso no post do meu blog, que tive que apagar por causa de um problema no
template. Não sei o nome dela, pois ela (creio que seja mulher é.é) comentou em
anônimo. A administradora Dengosa me disse que não há problemas dessa parte ser
alterada, já que ela é tida como parte do menuDireito. Só peço que tenha
cuidado pra não deixá-lo invisível. XD
Evitem colocar o font-size no código do itálico, pois o código não corrige isso.
Evitem colocar o font-size no código do itálico, pois o código não corrige isso.
Resumindo
sobre essa parte onde ficam as categorias: qualquer alteração nela, seja de
fonte, tamanho, cor, tirada de sublinhado ou adicionamento de text-shadow,
resulta na quebra da regra 1.14. Quando você notar que tem algo alterado nele,
procure primeiro aqui: #meio span, #meio span a, .admin,
.admin:hover, .ativo, .ativo:hover, .link { e depois aqui: a, body { - pois
geralmente são essas duas partes que causa alteração nela. Evite adicionar
qualquer código nessa duas partes, pois consequentemente resultará na quebra da
regra 1.14.
Nota: provavelmente o a:hover também deve alterar.
Então, nessas partes só adicionem o color e sem o nome !important; nele.
Uma parte que é ignorada por muitos, é o fieldset {
Uma parte que é ignorada por muitos, é o fieldset {
Sim,
gente, essa parte pode causar a quebra da regra 1.14. Pensava que não, mas a
Dengosa me explicou sobre ele. T-T
Vamos para os prints?
Vamos para os prints?
Essa
alteração foi causada pelo adicionamento de text-shadow no fieldset {
Essa
alteração foi causa pelo adicionamento de alguns códigos como letter-spacing,
text-transform, font-variant no fieldset {
Essa caixinha amarela é tida como parte do site, e não do perfil. Qualquer alteração nela é tida com 1.14 (com exceção da seleção, pois nessa parte - só nessa parte, nas notificações é considerado 1.14 - é tida como alteração do base e não dela mesmo).
Então, pra se prevenir, apenas mude a cor de fonte, border. Pode adicionar um background, caso o "Gostou? Deixe seu comentário!" estiver meio invisível por causa do fundo (pedi para o Overgreen perguntar a Dengosa :V).
Agora vamos pra essa parte:
Essa caixinha amarela é tida como parte do site, e não do perfil. Qualquer alteração nela é tida com 1.14 (com exceção da seleção, pois nessa parte - só nessa parte, nas notificações é considerado 1.14 - é tida como alteração do base e não dela mesmo).
Então, pra se prevenir, apenas mude a cor de fonte, border. Pode adicionar um background, caso o "Gostou? Deixe seu comentário!" estiver meio invisível por causa do fundo (pedi para o Overgreen perguntar a Dengosa :V).
Agora vamos pra essa parte:
Como estão
vendo, ela tá maiúscula e de cor amarela. Essa parte foi alterada pelo
adicionamento de códigos como text-transform, font-variant e !importante no
color do a, body.
É muito comum adicionarem coisas no a, body ou a:hover, fazendo essa parte ser alterada. Nela não se pode fazer nenhum tipo de alteração, nem mesmo adicionar transição – coisas que muitos fazem. Então, tenham cuidado.
É muito comum adicionarem coisas no a, body ou a:hover, fazendo essa parte ser alterada. Nela não se pode fazer nenhum tipo de alteração, nem mesmo adicionar transição – coisas que muitos fazem. Então, tenham cuidado.
Essa parte
foi alterada pelo adicionamento do text-shadow:none!important; no a, body. Como
estão vendo, o meu nick tá sem a sombra embaixo, então isso quebra a regra
1.14.
Tanto os
nomes/links do painel como o nome Spirit tá com a cor alterada. Isso foi
causado por eu ter adicionado o !important; no color do a, body.
Reparem que
o fundo vermelho que tem o ícone de câmera, está quadrado. Isso ocorreu por eu
ter adicionando o border-radius:0px!important; no a, body. Ele tem que tá
redondo.
A seleção -
::selection { - dele está alterada. Deveria ser azul o fundo e branco a fonte
(pelo menos no Mozilla e Chrome é assim) então por tá dessa cor, resulta na
quebra da regra 1.14. Pra resolver isso é só adicionar #base antes do código. Um
exemplo: antes: ::selection { depois: #base
::selection{ - Vale lembrar que esse altera o Chrome, pra alterar o Mozilla,
tem que ser assim: #base
::-moz-selection{ - Ou seja, você usa os dois, um pra alterar o Mozilla e o
outro, o Chrome.
Ao adicionar o nome base nesse código, ele faz que a seleção fique do jeito que você quer, sem alterar a seleção das notificações, menu que fica no lado esquerdo, e outras partes que é considerada do site. Vale lembrar que ele altera a seleção da caixinha amarela que eu disse antes, que é considerada do site, mesmo adicionando o #base. Porém, como eu disse antes, só nessa parte não é considerado 1.14, pois o site tem como se tivesse alterando o base, e não a caixinha em si.
Ao adicionar o nome base nesse código, ele faz que a seleção fique do jeito que você quer, sem alterar a seleção das notificações, menu que fica no lado esquerdo, e outras partes que é considerada do site. Vale lembrar que ele altera a seleção da caixinha amarela que eu disse antes, que é considerada do site, mesmo adicionando o #base. Porém, como eu disse antes, só nessa parte não é considerado 1.14, pois o site tem como se tivesse alterando o base, e não a caixinha em si.
Nota:
Ignorem a mão mal feita kkkkkkkkkkkkkkk Eu não conseguir tirar o print com ela
em cima do meu nick.
Como estão vendo, a rolagem desse menu está alterada, e mesmo estando com a mãozinha em cima do meu nick, não apareceu o sublinhando embaixo. Como colocamos a setinha/mãozinha em cima do nosso nick, nesse painel, deve aparecer um sublinhado embaixo. Isso não ocorreu pelo adicionamento do text-decoration:none!important; no a:hover. E essa rolagem foi alterada pelo adicionamento do código da rolagem, o -webkit-scrollbar.
Mas, Bereu, eu quero modificar a rolagem do meu style, tanto do menuDireito como da principal. Como faço pra alterá-las sem alterar essa daí?
Como estão vendo, a rolagem desse menu está alterada, e mesmo estando com a mãozinha em cima do meu nick, não apareceu o sublinhando embaixo. Como colocamos a setinha/mãozinha em cima do nosso nick, nesse painel, deve aparecer um sublinhado embaixo. Isso não ocorreu pelo adicionamento do text-decoration:none!important; no a:hover. E essa rolagem foi alterada pelo adicionamento do código da rolagem, o -webkit-scrollbar.
Mas, Bereu, eu quero modificar a rolagem do meu style, tanto do menuDireito como da principal. Como faço pra alterá-las sem alterar essa daí?
Bom,
a primeira coisa que você faz é adicionar o nome body nesse código. Adiciona em
todos que começa com isso: ::-webkit-scrollbar. Ou seja, se ele tá assim:
::-webkit-scrollbar, deixa assim: body::-webkit-scrollbar - vale lembrar que ao
adicionar isso, a rolagem do menuDireito irá voltar ao padrão do site, assim é
só você duplicar esse código e deixar a primeira parte começando assim:
body::-webkit-scrollbar e a parte repetida, começando assim: .boxMenuDireito
::-webkit-scrollbar. Assim, os que começarem com o nome body irá mudar a
rolagem principal e o que começar com o nome .boxMenuDireito irá modificar a
rolagem do menuDireito.
Lembrem-se
que o código tem que tá repetido, uma parte começando com o nome body e a outra
.boxMenuDireito - não deixe nenhuma parte começando assim: ::-webkit-scrollbar,
pois basta esquecer de adicionar o body/.boxMenuDireito em apenas um deles que
quebrará a regra 1.14.
Como
estão vendo os avatares estão redondos, quando deveriam estar quadrados. Isso
ocorreu por eu ter adicionado o:
a, body img{
border-radius:80px!important;
}
Antigamente acontecia isso ao adicionar o border-radius no a, body, mas fiz isso e o que alterou foi aquele fundo do ícone da câmera, no painel que fica no lado esquerdo.
a, body img{
border-radius:80px!important;
}
Antigamente acontecia isso ao adicionar o border-radius no a, body, mas fiz isso e o que alterou foi aquele fundo do ícone da câmera, no painel que fica no lado esquerdo.
Tanto nos
títulos como nos nicks, foi adicionando um fundo vermelho. Essa alteração foi
causa ao adicionar um background no a, body - ocorrerá algo igual se adicionar
no a:hover, sendo que ao passar a seta nas notificações.
Reparem que
o tipo de fonte estão alterados e os títulos e nicks estão sem sublinhado. Essa
alteração foi causada ao adicionar o font-family e o text-decoration no a,
body.
Tanto o
tamanho como a cor está alteradas. Essa alteração foi causa pelo adicionamento
do !important; no color do a, body e pelo adicionamento do font-size.
Reparem que
os avatares e os x estão com as cores alteradas. Essa alteração foi causa por
adicionamento de grayscale, hue-rotate e brightness no a, body.
Agora, resumindo sobre essa parte. Não se pode alterar nada nessa parte, nem cor de fonte, nem tipo, nem tamanho, nem seleção, nem tirar sublinhado, adicionar contorno, e nem mesmo adicionar um fundo nele ou alterar o x ou avatares. E a maioria das alterações causadas nele, você procure no a, body e a:hover, pois geralmente é neles. Essas duas partes tem que ter muito cuidado, pois são bastante perigosas. Voltando a repetir: no a, body e a:hover não adicionem nada além do color, e nem adicione o !important; no color deles, pois resultará na quebra da regra 1.14
Agora, resumindo sobre essa parte. Não se pode alterar nada nessa parte, nem cor de fonte, nem tipo, nem tamanho, nem seleção, nem tirar sublinhado, adicionar contorno, e nem mesmo adicionar um fundo nele ou alterar o x ou avatares. E a maioria das alterações causadas nele, você procure no a, body e a:hover, pois geralmente é neles. Essas duas partes tem que ter muito cuidado, pois são bastante perigosas. Voltando a repetir: no a, body e a:hover não adicionem nada além do color, e nem adicione o !important; no color deles, pois resultará na quebra da regra 1.14
Essa
alteração foi causada pelo adicionamento de código como letter-spacing,
text-transform, font-variant no a, body. Não se pode alterar nada nessa parte,
nem cor de fonte, nem tipo, nem tamanho, nem seleção e nem mesmo adicionar um
fundo nele. Antigamente era adicionado um fundo/background no pesquisar, quando
a pessoa tentava mudar aquele fundo branco que tem no menuDireito, onde fica os
amigos, mas agora não precisa se preocupar mais com o adicionamento, já que
agora podemos mudá-lo com o código que já vem no modelo, o #meio input { XD
Essa
alteração foi causada pelo adicionamento de código como letter-spacing,
text-transform, font-variant e o adicionamento de !important; do color do a,
body +
a, body img{border-radius:80px!important;
}
Antigamente essa parte pertencia ao perfil, assim poderíamos mudar a cor de fundo, fonte, tamanho, tipo de fonte. Mas por causa do Logo, teve que ser separado do perfil, já que não podíamos usar um fundo branco ou muito claro, pois não daria pra vê-lo, resultando na quebra da regra 1.12 e se fôssemos fazer alguma alteração nele, por ser parte do portal, resultaria na quebra da regra 1.14. Então a administradora Geral decidiu separá-lo do perfil, sendo assim, quaisquer alteração nela, viola a regra 1.14.
Bom,
espero que tenham gostado da aula. Qualquer dúvida, é só perguntar XD
0 Comentários