Canal Personalizar: regra 1.11 e 1.12

1.11 - Não é permitido que hajam animações em banners e/ou modelos, seja GIF ou Script, exceto no caso específico do efeito de “hover” que mudem apenas para outra imagem (não sendo permitido mais de uma animação por este mesmo efeito), sob pena de exclusão do style;

Isso quer dizer que aqueles efeitos da imagem ficar se movendo, dando a ilusão de ser uma imagem gif, não é permitido mais. As imagens gifs já são proibidas há um bom tempo. Agora só é permitido usar efeito hover, e na parte “não sendo permitido mais de uma animação por este mesmo efeito” creio que não esteja se referindo de colocar um no banner e outro nos títulos, e sim, de ter mais de uma imagem hover, ou seja, tem que ser apenas o que aparece sem colocar a seta, e a segunda imagem que aparece ao colocar seta. 

Resumindo. Você pode colocar uma imagem no cimaLogo e uma imagem para o hover dele, e pode ao mesmo tempo, colocar uma imagem como fundo dos títulos e colocar outra imagem como hover deles, mas não pode colocar duas imagens como hover, dando alusão de ser um gif/animação.

1.12 - Os Styles devem possuir harmonia de visualização, sob pena de exclusão, tais como:

a. as cores e imagens do modelo devem permitir que a visibilidade de letras, de textos e dos elementos da página não sejam prejudicados;

b. as fontes utilizadas devem ter no mínimo 10px, permitindo a plena compreensão dos textos e links;  

Isso quer dizer que todas as fontes inseridas no seu modelo, devem ter a font-size com no mínimo 10px. Se tiver 9.5, por exemplo, já é excluído. Vale lembrar que em alguns cantos o uppercase deixa muito grande, mesmo se tiver usando o 8px e a fonte estiver com a cara de 12, essa regra vale pra ele, pois o que importa também é o tamanho em código. E, além disso, mesmo se tiver usando o font-size 10px, se por causa de códigos extras, ele ficar com cara de 7/8 e dificultar a visualização, vale também.

Resumindo: muita calma nessa hora. é.é

c. as imagens das listagens de conteúdos, tais como listagem de amigos, grupos, fanfics, observações, não podem ser reduzidas e distorcidas, dificultando a compreensão de tais conteúdos;

Isso quer dizer que, não use o width e height no .boxConteudo img, o código efeito que for inserir, tenha cuidado, deve permitir que a pessoa entenda o que tem nessa imagem, ou seja, evite usar efeitos muito escuro, muito desfocado. Use efeitos com o valor que permita enxergar todos os detalhes da imagem.   

d. não possuir cores de textos e fundo extremamente semelhantes, exemplo, a utilização de cores excessivamente claras no mesmo style. O mesmo deve possuir contrastes de cores para ser totalmente legível; 

 

Um exemplo é você usar um fundo vermelho e colocar como cor de fonte, um vermelho só um pouco mais escuro, isso dificulta a visualização (além de queimar os olhos de quem está vendo). Por isso, sempre use como cor de fonte, uma cor mais escura que a cor de fundo, já em fundo escuro, uma cor mais clara.

Agora, abaixo, eu colocarei alguns exemplos, causado por cores iguais.

 

Como vocês estão vendo, usei no “a, body” o color branco, o #fff; Aqui na parte das atualizações, dá pra enxergar direitinho, por muitos ver apenas pelo modelo, ao clicar no nome perfil, não percebe que o “a, body” pode ser muito perigoso. Além de ele mudar cores dessa parte, ele muda também daqui:

Como estão vendo, ele muda a cor dos Nicks dos amigos, no menuDireito. E muda outras coisinhas também dessa parte. Outra parte que ele muda é essa:

 Sim, o “a, body” muda a cor dessa parte também, por isso vivo dizendo pra não usar branco nele, porque ele também muda essa parte:

 
Como podem ver, por o fundo ser branco e o color do a, body ser branco, as letras ficam invisível. E o fundo dessa parte não pode ser alterada e no a, body não se pode usar o text-shadow, por isso, nunca use branco nem nele e nem no a:hover.
 
Não podemos esquecer também do jornal:

Por muitos veem o jornal por cima do fundo que é inserido no .boxConteudo .textoBg1, .boxConteudo tr.textoBg1 td {, pensam que ele vai ter o mesmo fundo ao clicar no título do jornal, sendo que não, ele vai ter como fundo, a cor do base. Por causa disso, muitos styles quebram essa regra, pois a pessoa muitas vezes coloca no a, body a mesma cor ou uma cor semelhante a que tem nele.

Por isso, fiquem mais atentos. XD

E claro, ele muda também a cor da fonte dos favoritos, atualizações que aparecem ao clicarmos em favoritos/atualizações.

Agora, vamos falar de um que muitos não percebem. De quem? O nav na versão mobile. 

Vejam:

A primeira vista tá tudo ok, porém, quando vamos ver o segundo nav que tem no mobile, o menu dropdown, vejam:

Como eu digo pra muitos, pelo o nav conter vários links e por a tela do mobile ser menor que o do desktop, alguns links vão pra um menu, o menu dropdown que tem o fundo branco. Então, o color que adicionamos no nav a, será o color da fonte desse menu. Então, como resolvemos isso?

Primeiro jeito:

Adicione um text-shadow no nav a {

Exemplo:
#nav a {
color: #fff;
text-shadow: 1px 1px 0px #000;
}
Ao adicionar, repare se tá tudo ok.

Segundo jeito:

Adicione o mesmo background que tem no nav, no nav a, sendo que com o -color inserido nele.

Exemplo:
#nav {

background: #000;

}
#nav a {

color: #fff;
background-color: #000;

}
É necessário que seja background-color, ao invés de background, pois pode não funcionar.  

Terceiro jeito, adicionar isso:

} #nav .dropdown-menu > li > a {
color: #000!important;
background: #fff!important; /*esse não é tão importante, coloco apenas por colocar*/
} 

#nav .dropdown-menu > li > a:hover {
color: #ccc!important;
background: #f8f8f8!important;
} 

Muitos que passam esse código não explicam exatamente a função que ele terá no modelo. Só diz que irá corrigir o problema do menu dropdown, mas não explica bem a fundo.

Como estão vendo, ele irá mudar apenas, e só apenas, o menu de fundo branco que aparece no mobile, ao clicar na seta que tem ao lado do nome mais. Sendo que ele só mudará fonte e fundo. Se no nav { tiver: height: 80px!important; - esse menu ficará com um espaço grande entre cada link, e esse código não mudará isso. Ainda deixará com esse espaço. Pra resolver isso, será necessário adicionar no #nav .dropdown-menu > li > a { um height para ajustar o tamanho. Se no #nav a { tiver um text-shadow: 1px 1px 0px #000; será necessário adicionar nessa parte o: text-shadow: none!important; para que não apareça no menu dropdown. E caso esse text-shadow esteja inserido no #nav a:hover, será necessário adicionar no #nav .dropdown-menu > li > a:hover {. Ou seja, tudo que tiver de extra no nav a/nav/#nav a:hover e tiver aparecendo nesse menu, é só adicionar a mesma coisa sendo que cancelando ou ajustando.  

Mas, Bereu, eu não tenho celular, como faço?

Se você usa o Chrome, então é só clicar no botão direito do mouse e depois, no nome inspecionar. Depois ir arrastando a página para esquerda até ficar com a largura menor. Geralmente eu deixo em 320.
Se tiver pelo Mozilla, é só clicar no ícone do meio, que tem entre o – e o X, que fica no topo, no lado direito, que ele deixa quase do mesmo jeito, aconselho usar mais o chrome pra isso, mesmo que nessa aula eu tenha usado o Mozilla kkkkkkkkkkkkkkkkk :V

Eu não poderia esquecer dele, o que muitos ignoram, o fieldset. XD Vejam:

 

Muitos não alteram a cor do color que vem no fieldset, então, em styles escuro ocorre o que estão vendo na imagem acima. Isso, meu povo, é uma das razões de muitos styles serem excluídos. Então, se lembrem: meu base é escuro, #corrertrocaracordocolordofieldset

Agora, vem mais um que faz quebrar essa regra. Sim, o #meio span, #meio span a, .admin, .admin:hover, .ativo, .ativo:hover, .link { que muda os links. Muitos só se lembram que ele muda isso (Os que estão em vermelho):

Isso (data do jornal e o nome apagar):

 

Mas se esquecem que ele aparece nos jornais (por cima do Base):

 Que muda a cor das categorias das fics/nome do autor/exibir sinopse completa:

E até mesmo no livro de visitas e quotes:

E não vamos esquecer do M de mensagens:

Só uma coisa: embaixo desse nome Mensagem, deveria ter o mesmo nome, sendo que menor, sendo que a cor do color fieldset tá preto, por isso ele não apareceu. Se um dia vocês verem que não tem dois, então corra pro fieldset pra verificar se o color dele tá da mesma cor do fundoBase.

Pra finalizar, não vamos esquecer que ele muda também os títulos dos styles ao colocar a seta em cima do preview ^^

 

Bom, espero que tenham gostado. :)