[TUTORIAL] Modificar aparência da versão Mobile dos fóruns

Introdução

Os aparelhos móveis, como celulares ou tablets foram adaptados para acessarem a internet por meio de navegadores ou outros aplicativos disponibilizados na internet. A versão Mobile como chamamos também pode ser personalizada ao seu gosto, e isso pode ser feito facilmente, usando o CSS.






1º - Identificação dos elementos:
No tradicional HTML, usamos frequentemente o Inspecionar Elemento (?) para buscar o elemento a ser personalizado. Para dar seguimento neste tutorial, aconselhamos que você busque conhecimentos na linguagem "Cascading Style Sheets".

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

2º - Classe do HTML da versão mobile:
Há duas maneiras básicas para editar. Você pode usar o recurso de seus templates para visualizar todos os classe do seu HTML da versão móvel, acessando Painel de Controle >> Visualização >> Templates >> Versão Mobile. Este procedimento pode ser feito para visualizar os classe, mas, se você quer algo mais... Em tempo real, basta usar o Inspecionar elemento.
Pressione o F12 no seu teclado ou, o botão Direito do mouse em Inspecionar Elemento. Em seguida, clique por cima do elemento da página que deseja alterar. Abaixo, um exemplo de parte na qual pode personalizar.


A Class mobile_title.application_header corresponde a parte do título onde o usuário ao clicar na caixa para baixo, será mostrado as opções de login, versão clássica e início.

.mobile_title.application_header {
sua propriedade
}

As propriedades são os meros recursos que você vai usar para personalizar o seu modelo. Muitas propriedades no CSS que podem ser usadas para personalizar um elemento HTML (ou não). A parte em vermelho no código, seria o que você vai substituir pela sua propriedade. Consulte o tutorial Elaborar um código CSS para saber quais propriedades pode ser usada: https://ajuda.forumeiros.com/t16183-tutorial-elaborar-um-codigo-css

Ao lado direito do seu navegador, clique no espaço em branco entre as chaves, e digite, por exemplo, background. Quando começar a digitar, seu navegador lhe dará sugestões de vários tipos de propriedades para personalizar. Se você compreende bem CSS, saberá qual usar. Em nosso caso, como mencionado, será o background: Código: .mobile_title.application_header {     background: #000 !important; }

background: Define a propriedade com a cor de fundo.
#000: Define a cor. Ou seja, é a cor Hexadecimal que o fundo colorido (background) receberá!
!important: O "!important" é usado na maior parte das vezes para informar ao seu navegador que o CSS que você coloca o !important deve ser destacado acima de qualquer outra propriedade da classe em específico.

2.2º - Dicas especiais:
Podemos usar o CSS para incluir imagens nos elementos HTML. Neste caso, ainda podemos usar o .mobile_title.application_header, porém, com um before!

classe:seletor {
propriedades
}

Na verdade, podemos chamar isso de seletor. Os seletores podem ser considerados como definições de "quando" um determinado objeto (classe) irá possuir as determinadas propriedades.

Exemplo:

Código:

.mobile_title.application_header:hover {
    background: #000 !important;
}

Quando o mouse estiver por cima do elemento ou classe HTML .mobile_title.application_header, o seletor :hover será habilitado, pois, então, ao invés de executar a função padrão que colocamos anteriormente de cor preta de fundo, será substituído por outra cor, que vamos definir na propriedade.

Código:

.mobile_title.application_header {
  background: #000 !important;
}

.mobile_title.application_header:hover {
  background: #F60 !important;
}

3º - Classes prontas para personalizar:
Para facilitar, vamos deixar um exemplo pronto com a maior parte das classes disponível na página inicial da versão móvel para que, você use sua criatividade para personalizá-las. Qualquer dúvida, não hesite em abrir um tópico no setor de suporte para perguntar: https://ajuda.forumeiros.com/-f25

/** EDIÇÃO :: VERSÃO MOBILE
Title: Mobile modification
Description: Modificação do template no modelo MOBILE.
Forum: Fórum dos Fóruns
**/
/* PERSONALIZAR MENU */
.mobile_title.application_header {
Propriedade;
}

/* OPÇÃO DE FAVICON */
.mobile_title.application_header:before {
Propriedade;
}

/* SUBFÓRUNS */
.postbody .post_header, .mobile_set {
Propriedade;
}

.mobile_item {
Propriedade;
}

.mobile_item:hover {
Propriedade;
}

.forum_no_new, .cat_no_new {
Propriedade;
}

.forum_new, .cat_new {
Propriedade;
}

.mobile_item_link_content {
Propriedade;
}

/**** FIM MOBILE EDITION ****/

---

Perguntas & Respostas

• Como posso abrir o Inspecionar Elemento no meu navegador?
  O inspecionar elemento na maior parte dos navegadores pode ser aberto no botão de atalho de seu teclado, F12. Se por ventura não abrir, procure a aba Editar >> Codificação >> Inspecionar elemento. Mesmo assim, se não encontrar, por gentileza, pedimos que entre em contato com o suporte do seu navegador para saber mais.
  
  
  
• Meu navegador não tem a versão mobile. O que fazer?
  Nós listamos alguns navegadores que permitem a versão mobile. Você pode consultar no tutorial: [TUTORIAL] Emular versão mobile do fórum no computador para saber mais.
  
  
  
• A versão em Vídeo no canal TV Forumeiros:
  
  
  Assista em 720p para obter resolução HD
  ou no endereço: https://www.youtube.com/watch?v=SXToj0MZb1A
  
  
• Versão MOBILE editada (arquivo em Anexo):
  Para fins de teste, fizemos uma versão mobile dinâmica para que você tenha em mente como é a versão mobile editada, sem perder a sua praticidade e leveza no acesso. Conjunto aos arquivos, você terá a disposição recursos como, mostrar as imagens dos tópicos automaticamente além de se adaptar a cada modelo de visualização.
  
  
  

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Modificar aparência da versão Mobile dos fóruns