Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Barra azul
Hoje à(s) 04:56 pm por paulim78

» Borda no Rank
Hoje à(s) 04:55 pm por paulim78

» Configurar o arquivo de publicidade ads.txt do fórum
Hoje à(s) 04:07 pm por Connor R.

» Rank de administrador
Hoje à(s) 01:57 pm por Ketholy

» Cor da barra
Hoje à(s) 01:55 pm por Ketholy

» PEDIDO ICONE PARA SUB-FORUN
Hoje à(s) 01:07 pm por gryff

» Sobre loja em um forum
Hoje à(s) 01:02 pm por Eduardo Santos

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Quem está conectado
244 usuários online :: 8 usuários cadastrados, Nenhum Invisível e 236 Visitantes :: 2 Motores de busca

Connor R., DustyRhodes, Eduardo Santos, gryff, Ketholy, Lemon~, MateusAnjosV, paulim78

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

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

Mensagem por Shek em 07/09/15, 02:13 pm

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



- 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 ->>
Seta 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.
Seta 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).
Seta 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.
Seta 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.


- 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: http://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;
}
Mouse foraMouse por cima

- 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: http://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
Mobile_FA.zip Este é um CSS e template para a versão MOBILE, adaptável para todas as versões de dispositivos.Você não tem permissão para fazer download dos arquivos anexados.(97 Kb) Baixado 37 vez(es)
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17016
Pontos Ativos : 21314

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum