Central da Comunidade
Registre-se
Advertisement
Central da Comunidade

O Designer de temas é uma ferramenta administrativa fácil e prática que te permite rapidamente customizar o tema, cabeçalho e logotipo da sua comunidade. Escolha um tema predeterminado ou crie o seu próprio design que encaixe perfeitamente com o tópico da wiki e a comunidade para ambos. Mais informações você pode encontrar em temas claro e escuro.

Passo a passo[]

  • Como um administrador de uma comunidade, você pode achar um link para o designer de temas no menu suspenso no canto superior direito ao passar o cursor sobre os três pontos verticais (⋮), nas Minhas ferramentas na barra inferior, ou no painel administrativo. Você também pode navegar até ele apenas clicando no link Especial:ThemeDesigner, na sua comunidade.
  • Existem três seções para personalizar a wiki:
    • Identidade da comunidade: define o nome da wiki e os gráficos da comunidade.
    • Cabeçalho e fundo: define o fundo da wiki e a cor da navegação.
    • Estilo dos artigos: define as cores do fundo e dos links do artigo, além de escolher uma fonte para os títulos.
Mobile theme preview

Você pode trocar entre os temas para desktop e celular com os ícones no canto superior esquerdo da janela de visualização.

  • Cada alteração feita é vista imediatamente na visualização abaixo, para que você possa ver como ficará o seu tema antes de salvá-lo, tanto no desktop quanto no celular. Você pode alternar entre a visualização de desktop e celular usando os respectivos ícones de monitor de desktop e smartphone no canto superior esquerdo da janela de visualização.
  • Os administradores podem personalizar um tema claro ou escuro em sua wiki, acessível no Designer de Temas através de guias separadas, e escolher qual dos dois será o tema padrão da comunidade. Todas as opções em "Cabeçalho e fundo" e "Estilos de artigo" podem ser definidas por tema. Ao alternar as guias, a visualização também muda para exibir o tema que está sendo personalizado.

Para garantir que os temas atendam aos requisitos de acessibilidade, os administradores não poderão salvar uma escolha de tema que tenha avisos ruins de contraste. Veja abaixo para mais detalhes sobre isso.

Quando tiver terminado e atendido aos requerimentos de contraste, clique em "Salvar" e seu novo tema aparecerá para os usuários instantaneamente!

Tema móvel[]

Mobile theme - theming switch

Usuários podem facilmente trocar entre os temas claro e escuro.

O tema móvel está atualmente disponível para qualquer comunidade que deseje participar. Ao abrir o Designer de Temas, os administradores verão um banner na parte superior que diz "Mobile theming is not yet turned on for this wiki. To enable mobile theming, please resolve any color contrast issues and save your changes." Uma vez que o tema for salvo, um pop-up e um banner aparecerão solicitando que você aplique o tema da sua wiki ao site móvel. Depois de ativar isso, ele não pode ser desfeito.

Para permitir uma estética consistente entre as experiências de desktop e móvel, as cores definidas no Designer de Temas para o plano de fundo, navegação fixa e cabeçalho, bem como as cores de destaque, link e plano de fundo do artigo serão as mesmas no desktop e no celular. A imagem de fundo escolhida e a fonte do título por tema também serão as mesmas no desktop e no celular.

Observe que nem todas as opções oferecidas pelo Designer de Temas para o desktop serão aplicáveis ao tema móvel, e quaisquer alterações adicionais feitas no tema do desktop com CSS não se aplicarão ao tema móvel.

O tema padrão escolhido entre claro ou escuro também será o padrão para o tema móvel. No entanto, assim como na área de trabalho, cada usuário poderá escolher sua própria experiência de tema de forma pessoal. As escolhas de temas pessoais feitas no celular são transferidas para o desktop e vice-versa. Mais informações sobre a experiência dos temas claro e escuro podem ser encontradas aqui.

Identidade da comunidade[]

Essa seção permite a customização do nome da comunidade, logotipo, favicon e imagem do site. Essas configurações são independentes dos temas claro/escuro e irá mostrar o mesmo para ambos.

Theme designer
  • Nome da comunidade: você vê o nome da comunidade no cabeçalho ao lado do logotipo. Observe que isso não muda o sitename da wiki.
  • Logotipo da comunidade: o logotipo da comunidade é uma adição gráfica ao nome da comunidade. Os usuários podem navegar para sua página de destino preferida da wiki clicando no logotipo em qualquer página.
    • Os logotipos só podem ser arquivos .png e podem ter um tamanho máximo de 1 MB e dimensões máximas de 500 px x 500 px.
    • O logotipo está armazenado em File:Site-logo.png.
  • Usar na navegação fixa: incluirá o logotipo na extremidade esquerda do painel de navegação, visível após rolar para baixo.
  • Favicon: favicons são pequenos ícones que aparecem na parte superior do navegador e são usados com frequência em guias e favoritos.
    • Os favicons só podem ser arquivos .ico e devem ter 16 px × 16 px de tamanho. Você pode aprender mais sobre Favicons aqui.
    • O favicon é armazenado em File:Site-favicon.ico.

Imagem do site da comunidade: esta imagem representará a comunidade no Fandom e aparecerá em vários lugares, incluindo pesquisa e perfil. Como tal, uma imagem de alta qualidade é recomendada, pois ela aparecerá em vários tamanhos em diferentes navegadores e dispositivos.

  • A imagem do site pode ser .png ou .jpg, e o tamanho recomendado é de 600 px x 450 px, com um tamanho mínimo de 200 px x 200 px. O tamanho de carregamento máximo é de 1 MB.
  • A imagem é armazenada em File:Site-community-image.

Cabeçalho e fundo[]

O plano de fundo é a área fora da área de conteúdo e aparece em todas as páginas da sua wiki. Pode ser uma cor sólida, uma imagem ou ambas.

Theme designer - header and background
  • Imagem de fundo: se você quer que sua wiki tenha uma imagem de fundo, clique nesta área para fazer o carregamento de uma. Você pode fazer o carregamento de um arquivo .jpg, .png ou .gif. O tamanho máximo do arquivo é 1 MB.
    • Tem mais informações e recomendações relacionadas à criação de uma imagem de plano de fundo personalizada para sua comunidade em Ajuda:Imagem de fundo.
    • Abaixo da área de upload, há uma opção para que a imagem de fundo escolhida seja exibida no celular como imagem de cabeçalho. Se deixar desmarcado, ela não aparecerá no tema móvel. Ao ativar o tema móvel, o padrão é não mostrar o plano de fundo.
    • Exibição de imagem: controla se a imagem cobre a tela inteira ou apenas a área do cabeçalho acima do artigo. O plano de fundo pode ser customizado com uma imagem de cabeçalho (recomendado: 2880 px x 656 px) ou full screen (recomendado: 2880 px quadrados).
    • Estilo da imagem de fundo: contém várias opções de como exibir a imagem.
    • Cobrir: estende a dimensão menor da imagem tanto quanto necessário para preencher a tela inteira (equivalente ao CSS background-size:cover).
      • Mosaico: repete a imagem de fundo lado a lado em toda a página, com opções para fazê-lo horizontalmente, verticalmente ou ambos.
      • Encaixe: a imagem será alinhada à área selecionada (cantos superior esquerdo, centro ou superior direito), e a dimensão maior da imagem será esticada para caber (equivalente ao CSS background-size:contain).
    • Opacidade da imagem: define a transparência da imagem de fundo em relação à cor de fundo. Quanto menor a porcentagem, mais transparente a imagem fica, o que é útil para permitir um melhor contraste dos elementos. Como alternativa, você pode ajustar a cor do texto do cabeçalho da comunidade para conseguir isso.

As escolhas de cores seguintes serão aplicadas a ambos os temas para desktop e celular:

  • Cor de fundo da comunidade: define uma cor de fundo sólida para a wiki.
  • Cor de fundo da navegação fixa: define a cor de fundo do painel de navegação fixo, visível na parte superior da tela após rolar para baixo. A cor do texto é determinada automaticamente para contraste.
  • Cor do cabeçalho da comunidade: define a cor do texto do navegador do cabeçalho da comunidade. Tente escolher algo que seja legível diferente da imagem e da cor de fundo, ou você não será capaz de salvar o seu tema.

Estilo dos artigos[]

Theme designer - article styles

As escolhas de cores seguintes serão aplicadas a ambos os temas para desktop e celular:

  • Fonte dos cabeçalhos: fornece algumas opções para alterar a família de fontes dos cabeçalhos dos artigos. O padrão é "Rubik", as outras opções são "Work Sans", "Lora", "Roboto Slab", "BioRhyme" e "Inknut Antiqua".
  • Cor de destaque: na área de trabalho, a cor de destaque é usada nos botões primários (preenchidos) e secundários (sublinhados); o QuickBar, o contador de comentários nas páginas do artigo/blog; infobox: o cabeçalho, o cabeçalho da seção, a borda e a barra vertical nos avisos do site. No celular, é usado em "botões", "bordas de infobox", "luz média" (a cor por trás de um cabeçalho/título de texto) e no "alternador de temas".
  • Cor do link: é a cor da maioria dos links. Tente escolher algo que tenha um bom contraste com o fundo do artigo, seja diferente do texto normal e evite cores vermelhas, pois links vermelhos indicam páginas ausentes.
  • Cor de fundo do artigo: é a cor de fundo da área de conteúdo principal. A cor do texto será determinada automaticamente para contraste.
    • Alterar isso também mudará a cor de fundo dos menus suspensos (tais como o botão suspenso de "Navegação" e "Editar").

Histórico do tema[]

Theme designer - history
  • Toda vez que um tema for salvo com o botão "Salvar", uma entrada é criada nessa lista. A lista é única para ambos os temas, claro e escuro.
  • Se desejar ver ou reverter para uma versão anterior, você pode fazer isso. Clique em uma versão anterior e ela será carregada na área de visualização.
  • Apenas as últimas 10 versões são salvas. Minimizar a quantidade de vezes que você economiza fazendo todas as alterações de uma vez manterá o histórico informativo e utilizável.

Avisos de contraste[]

A intenção é fornecer contraste suficiente entre o texto e seu plano de fundo para que possa ser lido por pessoas com visão moderadamente baixa. Para garantir a conformidade, o botão "SALVAR" no Designer de Temas ficará acinzentado enquanto existirem erros de contraste para uma ou mais cores escolhidas em qualquer um dos temas, e um erro destacando o problema estará presente. É somente depois que todos os problemas de contraste para o tema claro e escuro forem resolvidos que a mensagem de erro próxima ao botão "SALVAR" desaparecerá e permitirá que você salve as suas alterações.

Theme Designer - contrast errors

Destaques vermelhos indicam erros de contraste no Designer de Temas, por cor e por tema.

Enquanto os erros estiverem ativos, cada cor afetada é destacada por uma caixa vermelha ao redor da cor escolhida, e o texto de erro aparecerá em vermelho com um sinal de erro octogonal na frente dele. Os avisos de contraste, por outro lado, são indicados com uma caixa laranja ao redor da cor relevante, e o texto de aviso aparecerá em laranja com um triângulo de aviso na frente. Se o erro for causado por escolhas de cores no outro tema, ou seja, o tema claro quando você está olhando para o tema escuro, ou vice-versa, uma caixa vermelha aparecerá ao redor da guia do tema para chamar a atenção para ela. Se o único problema no outro tema for um aviso, a caixa ao redor da guia do tema ficará laranja.

A mensagem para cada cor é única e explica o porque isso é um problema. Você acionará esta mensagem clicando na cor destacada como tendo um problema. Para cada problema de contraste, serão apresentadas três cores no espectro adjacente à escolhida que atendem à taxa de contraste mínima para fornecer aos administradores uma maneira fácil de resolver o problema. Este pop-up permanecerá aberto enquanto procura uma nova cor, e a mensagem de erro ou aviso reaparecerá se você mudar a cor para algo que não atenda aos requisitos de contraste. Uma vez encontrada uma boa solução de cor, clique no "X" ou fora do pop-up para fazê-la desaparecer.

O requerimento mínimo de padrões de contraste (baseado no WCAG 2.x AA) são:

Cor do link X fundo do artigo - 4,5[]

Se o problema estiver na cor do link na cor de fundo escolhida, você lerá: "Links exibidos nesta cor podem ser difíceis de ler. Recomendamos que você escolha outra cor que tenha melhor contraste com a cor de fundo."

Cor de fundo da comunidade X cor do cabeçalho da comunidade - 4,5[]

Quando a cor de fundo da comunidade e a cor do cabeçalho da comunidade não têm contraste de cor suficiente, elas podem tornar a navegação local ilegível. Se houver problemas com o contraste aqui, a mensagem de erro será: "Links e texto nesta cor (fundo) serão difíceis de ler para alguns usuários. Escolha outra cor que tenha melhor contraste com a cor do cabeçalho da comunidade/cor de fundo da comunidade ou selecione uma das cores recomendadas abaixo."

Observe que quando uma imagem de fundo estiver presente, esse erro não aparecerá, devido ao fato de que quaisquer problemas de contraste são encobertos pela imagem. No entanto, existe a opção de não exibir a imagem de plano de fundo no celular, portanto, se uma imagem não estiver sendo usada lá, os problemas de contraste ainda serão perceptíveis na visualização móvel. Nesse caso, recomendamos resolver o erro de contraste usando a janela de visualização móvel em vez da visualização de desktop.

Os padrões de contraste mínimos recomendados são:

Cor de destaque X cor de fundo do artigo - 3.0[]

Como a cor de destaque define as cores de vários elementos da wiki, como botões, elementos da caixa de informações e o QuickBar, e às vezes é exibida sobre a cor de fundo do artigo, uma escolha de contraste ruim pode fazer com que isso se misture com a cor de fundo. Caso isso ocorra, a seguinte mensagem de erro será exibida: "Esta cor é usada para cabeçalhos e bordas da caixa de informações, botões e outros elementos secundários da interface. Por favor, escolha uma cor que tenha contraste suficiente com a cor de fundo de artigo da sua wiki." Esta é apenas uma recomendação, não é um requisito, então você ainda poderá salvar o seu tema sem precisar ajustar a cor de destaque.

Lembre-se de que apenas uma cor em cada par pode ser alterada para atender às diretrizes de contraste. Quando não conseguir resolver os problemas de contraste de maneira satisfatória, entre em contato com a pessoa de contato atribuída à sua comunidade ou, na ausência de um, use o formulário do Zendesk para entrar em contato com a equipe do Fandom.

Opções de leitura[]

Mais ajuda e feedback[]

Advertisement