PHP | MySQL | HTML | CSS | Javascript

A pedidos do meu amigo @ryzen, irei explicar como traduzir os links absolutos do seu fórum IPS. O bacana de traduzi-los é que dará um ar de 'coisa bem feita'. 
Mas exatamente o que será feito? Ele vai pegar o link https://ggames.com.br/topic/ e transforma-lo em https://ggames.com.br/topico/, outro exemplo é mudar de https://ggames.com.br/search para https://ggames.com.br/busca
Eu tive o maior trabalho para traduzir tudo, mas valeu a pena, vamos ao tutorial.

1. Acesse seu painel administrativo e faça login.

2. Procure SEO e clique na opção Customize Friendly URLs

3. Ele vai exibir todas as opções disponíveis. Basta clicar no LAPIS  editar como desejar.

Após isso ser feito, é só salvar as configurações.
Infelizmente não é possível traduzir algumas informações, como por exemplo o link absoluto do IP.DOWNLOAD ou TUTORIALS. Porém a grande maioria (95%) dá para editar.
 

Se você como eu odeia esse nome ENORME aparecendo aí e desconfigurando o layout, vou explicar como esconder com CSS.
Basta copiar e colar o código baixo no CUSTOM.CSS do seu tema.  Ele vai sumir imediatamente.
.cWidgetPrice {display: none;} O bacana que vai esconder SOMENTE do WIDGET (Coluna!).

Ele não afeta as informações interna, por exemplo quando o produto é pago.

O nick de VALIDAÇÃO ficará muito mais legal e destacado no canto esquerdo do nick. Para coloca-lo lá é simples.

Basta copiar e colar esse código CSS em APARÊNCIA > TEMAS > EDITAR CSS E HTML > ABA CSS e em CUSTOM.CSS cole;
.cAuthorPane i.fas.fa-badge-check.ipsType_success {float: left; padding-right: 10px;} Resultado

Esse código só vai mover o ÍCONE quando for ler o tópico, no perfil vai continuar após o NICK. 

Se seu tema do IPS está cortando o nick na versão MOBILE. Saiba que é bem fácil de resolver.

Basta copiar e colar esse código CSS em APARÊNCIA > TEMAS > EDITAR CSS E HTML > ABA CSS e em CUSTOM.CSS cole;
.cAuthorPane {width: 100%;} Resultado

Antes de iniciar, mostraremos no tutorial como criar dois tipos de sliders, veja no exemplo aqui.
1º – Criar a estrutura em HTML
Para fazer um slide show, precisamos inicialmente criar uma div que irá armazenar todas as imagens presentes nele.
1 2 3 4 <!-- Elemento que envolve o slideshow -->   <div class="caixa-slideshow"> </div> Neste exemplo o nome da classe é “caixa-slideshow”, mas não se esqueça que as classes podem possuir qualquer nome que desejar, contanto que não tenha outra com o mesmo nome que faça algo diferente em seu site, pois isso resultaria em conflitos e devemos evitar sempre.
2º – Adicionar as imagens, suas numerações e descrições
Neste exemplo, cada slide de imagem possui 3 (três) informações: imagem, descrição e numeração, para melhorar a  codificação, adicionaremos esses três itens dentro de uma div que neste exemplo possui a classe “meus-slides”, essa div será duplicada para cada imagem nova que o slide possuir e dentro dela colocaremos os itens citados acima.
Coloque essas divs dentro da div criada acima.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!-- Bloco que contém número do slide, slide e descrição -->   <div class="meus-slides fade">   <div class="numero-imagem">1 / 3</div>   <img src="img/1.jpg" style="width:100%">   <div class="descricao-imagem">Descrição da primeira imagem</div>   </div>     <!-- Bloco que contém número do slide, slide e descrição -->   <div class="meus-slides fade">   <div class="numero-imagem">2 / 3</div>   <img src="img/2.jpg" style="width:100%">   <div class="descricao-imagem">Descrição da segunda imagem</div>   </div>     <!-- Bloco que contém número do slide, slide e descrição -->     <div class="meus-slides fade">   <div class="numero-imagem">3 / 3</div>   <img src="img/3.jpg" style="width:100%">   <div class="descricao-imagem">Descrição da terceira imagem</div>   </div> 3º – Adicionar os botões de “próximo” e “anterior”
Todos os slide show possuem botões em suas laterais para passar para o próximo slide ou voltar ao anterior. Para adicioná-los vamos colocar logo abaixo da última div com a classe “meus-slides” dois elementos “a” com suas respectivas classes, uma para voltar, que vamos chamar de “anterior”, e outra para adiantar, que vamos chamar de “próximo”, e ambas contento o atributo “onclick” chamando o método “controlador_slides()”, que vamos criar no fim do nosso script. Não se esqueça de colocar os parâmetros que estão dentro da chamada do método, mais a frente explicaremos sua função.
1 2 3 <!-- Botões de anterior e próximo --> <a class="anterior" onclick="controlador_slides(-1)">❮</a> <a class="proximo" onclick="controlador_slides(1)">❯</a> 4º – Adicionar controladores para cada slide existente
Geralmente os slides possuem logo abaixo das imagens, bolinhas ou qualquer outro ícone que represente qual a imagem que está sendo exibida atualmente e também servem como controladores para que possamos clicar em qual slide queremos ver no momento, assim pulando os outros e indo diretamente ao slide desejado.
Para fazer isso vamos adicionar uma nova div, assim que nossa div com a classe “caixa-slideshow” for fechada. Essa div irá possuir todos esses controladores.
Para cada slide adicionaremos um novo span com a classe “ponto-indicador-slide” e um atributo “onclick” chamando o método “slide_atual()” passando como parâmetro o número do slide a qual ele se refere. Esse método iremos criar logo logo.
Neste exemplo teremos 3 slides, portanto iremos adicionar 3 elementos “span”.
01 02 03 04 05 06 07 08 09 10 <!-- Pontos indicadores de slides -->         <div style="text-align:center"> <span class="ponto-indicador-slide" onclick="slide_atual(1)"></span> <span class="ponto-indicador-slide" onclick="slide_atual(2)"></span> <span class="ponto-indicador-slide" onclick="slide_atual(3)"></span> </div> 5º – Adicionar o script principal
Se salvarmos o arquivo do jeito que está atualmente e abrimos para ver o que está acontecendo, vamos ver que todas as imagens estão sendo exibidas, porém uma abaixo da outra, de forma desorganizada, sem nenhuma interação com o usuário. Para adicionar essas interações vamos adicionar a tag “script” antes do fechamento da tag “body”.
Primeiramente vamos fazer o método principal que será responsável por mostra o slide atual e ocultar os outros slides, neste exemplo vamos chama-lo de “mostrar_slides(n)” e vamos passar a variável “n” como parâmetro do nosso método.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript"> var indice_slide = 1; //essa variável será usada em todas as nossas funções e será responsável por dizer qual o slide atual mostrar_slides(indice_slide); //aqui já estamos chamando a função para que o slide já comece mostrando o primeiro slide // Função principal que mostra os slides function mostrar_slides(n) { var i; // será usada como um contador dentro de nossa função var slides = document.getElementsByClassName("meus-slides"); //retorna todos os elementos que possuem a classe "meus-slides" var ponto_indicador = document.getElementsByClassName("ponto-indicador-slide"); //retorna todos os elementos que possuem a classe "ponto-indicador-slide" if (n > slides.length) {indice_slide = 1} // caso o número passado como parâmetro seja maior que o número de slides então chama o primeiro if (n < 1) {indice_slide = slides.length} // caso o número passado como parâmetro seja menor que 1 nosso variável "indice_slide" receberá o número total de slides for (i = 0; i < slides.length; i++) { //inicia um loop entre os slides slides.style.display = "none"; //deixa o slide com display none } //encerra o loop for for (i = 0; i < ponto_indicador.length; i++) { //inicia um loop entre os pontos indicadores ponto_indicador.className = ponto_indicador.className.replace(" ativo", ""); // remove a classe "ativo" do indicador } // encerra o loop for slides[indice_slide-1].style.display = "block"; // faz o slide atual aparecer ponto_indicador[indice_slide-1].className += " ativo"; //adiciona a classe "ativo" para o indicador do slide atual } //encerra a função Após criar esse método, nosso slide show já está mais amigável, porém ainda não está usual já que só conseguimos ver o primeiro slide.
6º – Criar os botões de “Próximo” e “Anterior”
Neste passo, vamos criar o método que irá controlar os botões de “próximo“ e “anterior”, para que possamos navegar pelos slides.
1 2 3 4 5 6 7 // Função para controlar os botões controladores function controlador_slides(n) { /*quando passamos como parâmetro para os botões “próximo“ e “anterior” eles serão usados nesta função para calcular qual o slide que deverá ser mostrado por isso passamos como parâmetro os valores "1" e "-1" para ir para frente ou para trás*/ mostrar_slides(indice_slide += n); } 7º – Criar os pontos indicadores de cada slide
Agora vamos fazer o método que será responsável por controlar os pontinhos que ficarão abaixo das imagens e que serão os representantes de cada slide.
Assim como na função criada acima, essa possui quase a mesma estrutura, a diferença é que ao invés de calcularmos um novo valor baseado nos parâmetros passados, vamos atribuir o valor do parâmetro diretamente.
1 2 3 4 // Função que controla o slide atual caso clique no ponto indicador function slide_atual(n) { mostrar_slides(indice_slide = n); } Se executarmos o código agora não iremos achar os pontinhos controladores, isso acontece porque ao contrário dos ícones dos botões “próximo” e “anterior” nossos pontinhos não são ícones e sim elementos “span” que serão estilizados para que possamos vê-los, mas caso queira adicionar um ícone fique à vontade.
8º – Adicionar o CSS
O back-end do nosso slide show já está encerrado, mas ainda não está muito amigável em questão de design. Neste último passo iremos adicionar o front-end para que ele fique ainda melhor e mais completo.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 * {box-sizing:border-box}   /* Div que envolve os slides */ .caixa-slideshow { max-width: 1000px; position: relative; margin: auto; }   /* Esconde as imagens inicialmente */ .meus-slides { display: none; }   /* Botões de próximo e anterior */ .anterior, .proximo { cursor: pointer; position: absolute; background-color: rgba(0,0,0,0.3); top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; }   /* Posicionando o botão 'próximo' a direita */ .proximo { right: 0; border-radius: 3px 0 0 3px; }   /* Preencher o background dso botões com a cor preta no hover */ .anterior:hover, .proximo:hover { background-color: rgba(0,0,0,0.8); }   /* Elemento que envolve a descrição das imagens */ .descricao-imagem { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; background-color: rgba(0,0,0,0.5); bottom: 4px; width: 100%; text-align: center; }   /* Elemento que envolve o número do slide */ .numero-imagem { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }   /* Pontos indicadores de slides */ .ponto-indicador-slide { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } /* Mudando o background color no hover ou quando ativo */ .ativo, .ponto-indicador-slide:hover { background-color: #717171; }   /* Efeito suave para troca de slide */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }   @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }   @keyframes fade { from {opacity: .4} to {opacity: 1} } Você pode estar olhando para o seu slide show e se perguntando “E se eu quiser deixá-lo rodando automaticamente? ”. Se você estiver, não se preocupe, verá isso logo abaixo.
9º – Automatizando o slide show
Neste caso, vamos remover os botões de “próximo e anterior” e também os pontos controladores, e iremos alterar o método principal.
Nosso método é praticamente igual, a diferença é que agora ele não possui mais parâmetros, ao fim do for onde definimos o “display none” acrescentamos + 1 ao valor do nosso índice e adicionamos uma última linha que serve para chamar nossa função a cada 2 segundos que passará novamente pelo loop adicionando mais 1 ao valor do índice e nos retornando o próximo slide, além disso agora nossa variável indice começa com o valor 0.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 var indice_slide = 0; mostrar_slides();   function mostrar_slides() { var i; var slides = document.getElementsByClassName("meus-slides"); var ponto_indicador = document.getElementsByClassName("ponto-indicador-slide"); for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } indice_slide++; if (indice_slide > slides.length) {indice_slide = 1} for (i = 0; i < ponto_indicador.length; i++) { ponto_indicador.className = ponto_indicador.className.replace(" ativo", ""); } slides[indice_slide-1].style.display = "block"; ponto_indicador[indice_slide-1].className += " ativo"; setTimeout(mostrar_slides, 2000); } Não se esqueça de remover os botões e os pontos do conteúdo HTML também, já que não estão mais sendo usados.
10º – Adicionando múltiplos slideshows
Também é possível criar vários slideshows em uma aplicação, para fazer isso basta substituirmos o script atual pelo código abaixo.
Neste caso nossas variáveis passam a se tornar arrays já que possuímos mais de um slide, mas a base é a mesma, a diferença é que agora nossas funções passam a receber 2(dois) parâmetros para que consiga controlar corretamente.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 var indice_slide = [1,1]; var classe_slides = ["meus-slides","meus-slides-2"]; mostrar_slides(1, 0); mostrar_slides(1, 1);   function controlador_slides(n, no) { mostrar_slides(indice_slide[no] += n, no); }   function mostrar_slides(n, no) { var i; var x = document.getElementsByClassName(classe_slides[no]); if (n > x.length) {indice_slide[no] = 1} if (n < 1) {indice_slide[no] = x.length} for (i = 0; i < x.length; i++) { x.style.display = "none"; } x[indice_slide[no]-1].style.display = "block"; } Como podemos ver no nosso novo código, nossos métodos ganharam mais um parâmetro, por isso, devemos passar esse novo parâmetro quando chamamos a função para a ação dos botões de “próximo” e “anterior”, assim como no código abaixo:
1 2 <a class="anterior" onclick="controlador_slides(-1, 1)">❮</a> <a class="proximo" onclick="controlador_slides(1, 1)">❯</a> Com esse novo código é possível criar diversos slideshows na mesma aplicação, mas não se esqueça de adicionar um novo parâmetro para cada slideshow adicionado e também adicionar uma nova classe de identificação única para aquele slideshow e adicioná-la no array de identificadores exatamente como fizemos neste último script.
 
Conclusão
Agora você já poderá criar quantos slideshows quiser e sem a necessidade de instalar algum plugin.
Espero que tenham gostado deste tutorial, qualquer dúvida é só comentar e também não se esqueça de compartilhar se curtiu, isso nos ajuda muito, até a próxima!

Neste tutorial irei ensinar como fazer isso, clique aqui uma demonstração do efeito.
Agora vamos começar e aprender como fazer, vamos lá.
1. Estrutura HTML
Pense no seguinte, neste exemplo tanto a imagem quanto o conteúdo oculto devem estar dentro de uma única div, para que quando passar o mouse sobre essa div o conteúdo oculto apareça, então é isso que paremos.
Primeiro crie a div que receberá todo o conteúdo, neste exemplo vamos chama-la de ‘caixaImg’, agora dentro dela coloque a imagem que deseja e em seguida crie uma nova div que terá todo o conteúdo oculto dentro dela e coloque nela uma classe para podermos estilizar, chamarei ela de ‘sobreposicao’.
Confira abaixo o código completo da estrutura HTML.
1 2 3 4 5 6 7 <div class="caixaImg"> <img src="img/img.jpg" alt="Imagem" class="imagem">   <div class="sobreposicao"> <div class="texto">Conteúdo aqui</div> </div> </div> 2. Estilizar a div principal
Para começar precisamos definir a nossa div que contém a classe ‘caixaImg’ como posição relativa, isso é importante para podermos posicionar corretamente o conteúdo oculto, aqui também vamos definir width de 50% e display = inline-block mas é apenas para alinhamento mesmo, não é necessário.
1 2 3 4 5 6 /* div que irá mostrar a imagem, dentro dela terá a imagem e o conteúdo oculto*/ .caixaImg { position: relative; width: 50%; display: inline-block; } 3. Estilizar a imagem
Uma coisa muito importante é colocar a imagem com o tamanho completo da div principal, para que não tenha o risco de ela acabar ficando menor ou maior do que o conteúdo oculto, confira o código.
1 2 3 4 5 6 /* deixar a imagem do tamanho da div*/ .imagem { display: block; width: 100%; height: auto; } 4. Posicionando e estilizando o conteúdo oculto
Para que o conteúdo oculto seja sobreposto a imagem, precisamos definir sua posição como absoluta, assim ele ficará ‘ligado’ a nossa div principal, além disso precisamos fazer com que ele fique do tamanho da imagem que é o mesmo tamanho da nossa div principal então para deixar do tamanho certo a já posicionar ela no devido lugar basta definirmos as propriedades “top, bottom, left e right = 0” e assim terminamos essas duas etapas.
Vamos também definir uma cor de fundo e um transition para melhorar o efeito e é claro o mais importante, definir sua opacidade como 0 para que possamos ver a imagem primeiramente.
Código completo deste passo.
01 02 03 04 05 06 07 08 09 10 11 /*conteudo oculto*/ .sobreposicao { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; background-color: #008CBA; } 5. Mostrar conteúdo oculto com o passar do mouse
Beleza, já posicionamos o conteúdo e todo o resto agora precisamos fazer esse conteúdo aparecer quando passar o mouse sobre a imagem, mas na verdade vamos fazer essa ação do mouse na nossa div principal, mas a impressão fica sendo que aparece quando passamos o mouse na imagem, basta colocar sua opacidade = 1. Confira.
1 2 3 4 /* exibir o conteudo oculto*/ .caixaImg:hover .sobreposicao { opacity: 1; } 6º – Estilizando o texto oculto
Neste exemplo existe um texto dentro da nossa div oculta, então vamos editar ele. Que tal centraliza-lo vertical e horizontalmente?
Para isso basta definir sua posição como absoluta e definir as propriedades top e left = 50%, mas ainda não vai ficar centralizado, já que left = 50% faz nosso conteúdo começar a partir da metade de nossa div e não é isso que queremos, para arrumar sua posição e deixa-lo exatamente no centro basta usar a propriedade translate e definir (x,y) como -50%, confira abaixo.
01 02 03 04 05 06 07 08 09 10 11 12 /* estilização do texto oculto*/ .texto { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } É isso aí, está pronto, agora você já pode espalhar imagens com conteúdo oculto por todo o seu site, divirta-se.

Se você nós vive de anúncio, essa pequena dica vai ajuda-lo a faturar mais fazendo o mesmo. Vou explicar como colocar um BANNER de anúncio dentro do POP-UP do IP.Downloads da IPS.
Você poderá colocar tanto anúncio do ADSENSE como um texto convidando o pessoal para se cadastrar. Aqui no GGames temos a seguinte regra, quem é visitante aguarda 2 minutos para realizar o download, com limite de 1 download por mês. Quem é leecher também, PORÉM com downloads ilimitados. Já quem é membro, o tempo de espera é menor.
Antes de tudo, recomendamos que você coloque um tempo de espera para seus usuários aguardarem o início do Download, dessa forma a visualização do BANNER é garantida. Agora vamos ao tutorial.
1. Vá em Configurações > Promoções do Site > Anúncios > Criar novo.
2. O título fica a seu critério, marque a opção FORNECEDOR CÓDIGO HTML, selecione a opção DEFINIR SUA PRÓPRIA LOCALIZAÇÃO, e em CHAVE DA LOCALIZAÇÃO digite : downloadspopup


3. Feito isso, vamos editar o código do layout. Vá em Customização > Temas > Editar HTML e CSS.
4. Navegue até DOWNLOADS/FRONT/VIEW/DOWNLOAD

5. Antes da tag </div> insira o seguinte código:
<div style="padding-top:10px;padding-bottom:10px;"><center>{advertisement="downloadspopup"}</center></div> Agora é só salvar. Esse é o resultado.

Instalou um pacote de plugins e notou que precisa ser traduzido? Isso é muito comum! Para sua sorte existe um método simples para traduzir pequenas frases ou palavras.
1. Vá em ADMINCP > CUSTOMIZAÇÃO > IDIOMAS.
2. Localize o idioma desejado e clique no GLOBO (traduzir).
3.  No canto superior esquerdo, terá um campo de busca... digite a frase que deseja traduzir. No meu caso será TOPIC COUNT.

4. Após a busca, ele vai mostrar as strings em inglês, no campo a direita você digita o que deseja escrever. Depois só apertar salvar.

5. Muito simples... segue resultado.

É bem simples;
1. Faça o download do XML da nova atualização.
2. Acesse o ADMINCP vá em Customizações > Temas. Localize o tema desejado, clique na seta para baixo e clique em UPLOAD DE NOVA VERSÃO.

3. Localize o XML em seu computador e depois clique em UPLOAD.

4. Se você customizou seu tema, ele vai perguntar qual versão deseja usar a ORIGINAL ou a CUSTOMIZADA. Eu irei usar a customizada.


5. Prontinho, tema atualizado e corrigido! 

Fiz um vídeo, mas como ficou bizarra a voz por causa da conexão... tive que escrever em detalhes.
1. Pegue a imagem e salve em uma formato quadrado. Por exemplo 150x150 - Salve-a com fundo transparente e em PNG.

2. Acesse esse site e insira localize a imagem que exportou anteriormente.
3. Ele vai transformar imediatamente, é só clicar sobre ela e fazer o download.

Em anexo está os dois resultados. Usei tanto na WEB como no WINDOWS.

Exemplos: rodapé.ico / transformar-em-ico.ico

Para realizar a instalação é bem simples.
1. Realize o download do seu HOOK no marketplace da IPS. Se for PAGO não se esqueça de compra-lo.

2. Acesse seu ADMIN CP e vá em CONFIGURAÇÕES > RECURSOS DO SITE > PLUGINS.

3. Clique em INSTALAR NOVO PLUGIN no canto superior direito (botão laranja) e selecione seu XML, depois aperte INSTALAR.

4. Prontinho, agora é só curtir!

Para corrigir um erro padrão desse APP que não puxa as configurações padronizadas do tema é simples, basta colocar esse código CSS em seu CUSTOM.CSS. Isso fará com que apareça UNDERLINE em seus links publicados dentro do TUTORIALS.
Acredito que isso também afetará os demais APP como BLOGS e PAGES, porém não posso confirmar.
section.ipsType_normal.ipsSpacer_top a {text-decoration: underline;} .ipsItemControls a {text-decoration: none!important;} A primeira linha section.ipsType_normal.ipsSpacer_top o sublinhado dentro do conteúdo, já a segunda remove .ipsItemControls dos botões de moderação.

Para o layout padrão, não funciona.

Tem um background chamativo e quer dar mais ênfase para ele? É bem simples. Veja a diferença desses itens.

Para conseguir fazer isso, aperte F12 no seu navegador e passe o mouse sobre o quadrado.
Na barra de transparência, selecione o tom desejado. Ele vai criar o código para você com sufixo, no meu caso BE0; Copie o código gerado e cole em seu CUSTOM.CSS, depois é só salvar.
Caso queira o efeito no RODAPÉ (se usar um classe diferente, como é meu caso) faça o mesmo.
Meu código: 
#ipsLayout_contentWrapper {background-color: #22232be0;} Para o rodapé ficou assim;
#secondaryFooter { background: #22232be0;} Espero que ajude-os.

Se você como nós usam ícones nas categorias, é comum passar pelo problema com o padrão dos mesmos. 
Para resolver isso é simples, basta definir um MAX-WIDTH para eles, então nunca vão ultrapassar esse tamanho, além de continuarem responsivos.
.ipsItemStatus:not( .ipsItemStatus_large ) {max-width: 45px;} Em 45px você defini o limite. Copie e cole o código em custom.css no seu IPS.

O ícone do MINECRAFT era bem maior que os demais, com o código isso foi resolvido.

Se você quer alinhar seu logo ao centro na versão mobile usando o tema padrão, é bem simples.
1. Vá em Aparência > Temas > em Padrão clique em Editar HTML e CSS.
2. Na aba CSS, selecione abra FRONT > CORE_RESPONSIVE.CSS e cole esse código lá.

Copie e cole o código.
@media screen and (max-width: 767px){ #elLogo img { max-width: 100%; margin-left: auto; margin-right: auto; display: block; }} Agora é só salvar. Segue o resultado.

Se você quer fazer nevar em seu website, é simples, basta copiar e colocar esse código abaixo e coloca-lo dentro da tag <head>.
<script src="https://edu-de-lucas1.webnode.com/_files/200000134-b6879b8327/CodigoNeve.js"></script>

Gostou do nosso botão flutuante?

hehehe, pois é, agora vou ensinar para você como fazer para ter em seu site, são passos bem simples que te ajudarão a por no seu site sem erros. então vamos lá
 
1º Passo
 
2. Passo
 
3º Passo
 
4º Passo
 
5º Passo
Em caso de dúvidas, só postar aqui
Gostou do tutorial e quer me motivar para trazer mais? Então não se esqueça de curtir ❤️

Na vida de um desenvolvedor visual FRONTEND é comum pegar códigos bem bagunçados sem formatação, ou seja - conteúdo escrito em uma linha só. Mas é fácil de resolver isso usando o DREAMWEAVER. Estou usando nesse exemplo a versão CS6 do software.
Exemplo de código sem formatação:
<div class="container" style="margin-top: 50px;"> <div class="sixteen columns"> <div class="homepage_content section clearfix image_with_text image-text--align-center"> <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div> <div class="seven columns content_column offset-by-one omega text-align--center"> <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1> <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3> <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br />MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p> </div> </div> </div> </div> Para realizar a formatação de forma automática é simples. Abra seu arquivo HTML no DREAMWEAVER e vá em COMMANDS > APPLY SOURCE FORMATTING.

Esse é o resultado.
<div class="container" style="margin-top: 50px;"> <div class="sixteen columns"> <div class="homepage_content section clearfix image_with_text image-text--align-center"> <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div> <div class="seven columns content_column offset-by-one omega text-align--center"> <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1> <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3> <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br /> MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p> </div> </div> </div> </div> Bem mais fácil de ler né?

Primeiramente entre no AdminCP do seu fórum, após isso, procure Promotions e depois Advertisements
Depois crie um novo anúncio de sua preferência.
Nota: se for usar anuncio na sidebar, crie outro anúncio!
Ao criar o anuncio, preencha os campos, e no código coloque:
<div class="ipsBox"> <h2 class="ipsType_sectionTitle ipsType_reset ipsType_blendLinks cForumTitle"> <center> Anúncios </center> </h2> <!--1º ADS coloca somente pra celulares e só funciona somente para mobile--> <div class='ipsResponsive ipsResponsive_showPhone ipsResponsive_hideTablet ipsResponsive_hideDesktop'> <center> <!--Codigo do ADSense--> </center> </div> <!--2º ADS coloca somente pra tablets e só funciona somente para tablets--> <div class='ipsResponsive ipsResponsive_showTablet ipsResponsive_hideDesktop ipsResponsive_hidePhone'> <center> <!--Codigo do ADSense--> </center> </div> <!--3º ADS coloca somente pra desktop e só funciona somente para desktop--> <div class='ipsResponsive ipsResponsive_showDesktop ipsResponsive_hidePhone ipsResponsive_hideTablet'> <center> <!--Codigo do ADSense--> </center> </div> <!--Os codigos acima, cria 1 anuncio para cada area, evita bugs e mostra mais variedades, caso não haja código algum, deixe em branco--> </div>  
A onde tem <!--Código do Adsense--> substitua conforme o desejado, recomendo criar uma para cada área, ou seja, crie 3 anúncios no seu adsense preferido e substitua ai conforme desejado!
Mostra anuncio apenas para Mobile Mostra anúncio apenas para Tablets Mostra anúncios apenas para Computadores Caso tenha dúvidas, use o tópico de suporte!

É bem simples.
Acesse o título desejado, e localize a opção EMBED.

2. Ao clicar, vai subir um popup, clique em CRIAR, em seguida copie o código HTML - IFRAME.

Agora é só colocar na página. Olha o teste em um tópico, ou então o resultado abaixo.