[TUTORIAL] Modificar aparência da versão Mobile dos fóruns
Página 1 de 1 • Compartilhe

[TUTORIAL] Modificar aparência da versão Mobile dos fóruns
![]() | Versão Mobile |
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.--> Tutoriais, dicas e astúcias <--
Modificar a aparência da versão Mobile dos fóruns
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 ->>
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
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.
![[TUTORIAL] Modificar aparência da versão Mobile dos fóruns Mobile18](https://i.servimg.com/u/f18/18/76/69/60/mobile18.jpg)
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.
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.mobile_title.application_header {
sua propriedade
}
![]() | 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:
|
#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!
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.classe:seletor {
propriedades
}
Exemplo:
- Código:
.mobile_title.application_header:hover {
background: #000 !important;
}
- Código:
.mobile_title.application_header {
background: #000 !important;
}
.mobile_title.application_header:hover {
background: #F60 !important;
}
Mouse fora | Mouse por cima |
![]() | ![]() |
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 |
- Anexos
Shek- Principal Contribuidor
-
Membro desde : 11/04/2009
Mensagens : 18768
Pontos : 22612

» [TUTORIAL] Adicionar paginação na versão mobile
» Desativar versão mobile dos fóruns por padrão
» [TUTORIAL] Emular versão mobile do fórum no computador
» [TUTORIAL] Adicionar ações de mensagem na versão mobile
» [TUTORIAL] Modificar regulamento na versão Phpbb3 e Invision
» Desativar versão mobile dos fóruns por padrão
» [TUTORIAL] Emular versão mobile do fórum no computador
» [TUTORIAL] Adicionar ações de mensagem na versão mobile
» [TUTORIAL] Modificar regulamento na versão Phpbb3 e Invision
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos