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

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

CesarWatsom2, DustyRhodes, Holkis, iScroll, Ketholy123, Kliha, Luiz, PlayWillian, Railison Ramon, Rolim, TugaTech, Xigncode3, zHugh

[ Ver toda a lista ]


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

Ícones flutuantes

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

Em curso Ícones flutuantes

Mensagem por zHugh em 05/10/17, 12:44 pm

Detalhes da questão


Endereço do fórum: http://pokemonillium.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Olá,

Gostaria de aplicar o seguinte código a meu fórum: http://cupcakegraphics.forumeiros.com/

Acessando o fórum disponibilizado, note os widgets localizados a esquerda. Os nomeados "i. ,ii, iii, iv.". Clicando sobre o quadrado, irá aparecer um quadro ao centro da página, gostaria de algo semelhante. Entretanto, não utilizo widgets em meu fórum então há algumas considerações a serem seguidas.

1) Os ícones deveriam aparecer ao lado do wrap do forum.
2) Os ícones devem aparecer em todas as páginas para que haja fácil acesso aos mesmos.

Por não utilizar widgets, acredito que as unicas formas de fazê-lo seja desenvolvendo o codigo em uma pagina html e atribuindo a descrição do fórum, ou via java script. Entretanto não sei como fazê-lo em nenhuma das situações :<
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por Luiz em 05/10/17, 04:31 pm

Olá,

Esse tipo de código é um pouco complexo de ser feito, o que vai além do nosso escopo de trabalho por aqui.
Tendo isso em vista, não é certo de que seu tópico será ou não atendido por membros da equipe, por ser algo mais complexo.

Assim, fica à critério do senhor manter ou não os UP's neste tópico, bem como mantê-lo aberto ou não.

Obrigado pela sua compreensão. o/


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Luiz — Ajudeiro
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5041
Pontos Ativos : 5840

Ver perfil do usuário https://github.com/lffg/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 05/10/17, 05:59 pm

Tudo bem Luiz, estarei aguardando a possível disponibilização de um usuário.

@EDIT, acredito que um efeito semelhante ao do lista de membros localizado aqui no FDF tbm seja valido, entretanto deveria ser adaptado para que apareçam as divs que desejo ao invés de uma lista propriamente falando.

Desde já, agradeço
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 06/10/17, 05:40 pm

up

outro método que imaginei para aplicar o efeito a todas as paginas, seria via edição de template, assim como o utilizado ao lado do logo do meu forum.
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 08/10/17, 01:35 pm

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 09/10/17, 06:04 pm

UP

Acredito que so o efeito desejado já me baste, não sendo necessário que haja um icone flutuante em todas as paginas
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 11/10/17, 11:11 am

upzinho Feliz
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 12/10/17, 01:23 pm

*-* up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 13/10/17, 05:06 pm

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por tatsuhito em 14/10/17, 02:01 am

Olá zHugh -qq
Então, eu possuo um código que tem este efeito. Só que ele é um pouco diferente, você precisará personalizá-lo para melhor agrado. Ele não foi feito por mim, ele é disponibilizado gratuitamente em um tumblr de códigos, estou apenas repassando-os para você.

Se você deseja que apareça em todas as páginas, recomendo colocar no template overall_header, na seção de templates e opção geral, no final do código mesmo, já que ele está em modo position: absolute, ele não irá atrapalhar os códigos do fórum.

Código:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />
<center>
                     
        <div class="tablon-anuncios">
                                                                                             
                <div id="example-popup" class="modal-content">
                                                                                                           
                        <table cellspacing="0">
                                                                                                       
                                <tbody>
                                                                                                               
                                        <tr>
                                                                                                                       
                                                <td>
                                                                                                                               
                                                        <div class="ambientacion">
                                                                                                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. <br /><br />Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.                                 
                                                        </div>
                                                                                                                               
                                                </td>
                                                                                                                       
                                                <td>
                                                                                            <img src="http://goo.gl/oFJdKT" style="width: 300px;" />                                     
                                                        <div class="bot-negro">
                                                                                                                                         
                                                        </div>
                                                                                                                               
                                                </td>
                                                                                                                       
                                        </tr>
                                                                                                               
                                </tbody>
                                                                                                       
                        </table>
                                                                                                   
                </div>
                                                                                             
                <div id="admin-tab" class="modal-content">
                                                                               
                        <div style="margin-right: 4px;" class="admin">
                                                            <img src="http://i.imgur.com/FipfoTz.jpg" />                           
                                <div class="info-admin">
                                                                    Thor                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                           
                        <div style="margin-right: 4px;" class="admin">
                                                            <img src="http://i.imgur.com/k1GF747.jpg" />                           
                                <div class="info-admin">
                                                                    Natasha                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                           
                        <div class="admin">
                                                            <img src="http://i.imgur.com/akymeww.jpg" />                           
                                <div class="info-admin">
                                                                    Bruce                         
                                </div>
                                                                                     
                                <div class="info-admin">
                                                                    Admin                           
                                </div><a class="info-admin" href="url">Contacto</a>                           
                        </div>
                                                                                                 
                </div>
                                                                               
                <div id="links-tab" class="modal-content">
                                                                                             
                        <div style="margin-right: 4px;" class="link-title">
                                                      Principales                     
                        </div>
                                                                   
                        <div class="link-title">
                                                      Secundarios                     
                        </div>
                                                               
                        <div class="links-pples">
                                                    <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a>                   
                        </div>
                                                             
                        <div class="links-sdarios">
                                                    <a href="url">Enlace 1</a><a href="url">Enlace 2</a><a href="url">Enlace 3</a><a href="url">Enlace 4</a><a href="url">Enlace 5</a><a href="url">Enlace 6</a><a href="url">Enlace 7</a><a href="url">Enlace 8</a><a href="url">Enlace 9</a><a href="url">Enlace 10</a>                 
                                <div class="bot2">
                                                                           
                                </div>
                                                                     
                        </div>
                                                                                               
                </div>
                                                                               
                <div id="news-tab" class="modal-content">
                                                         
                        <div class="column-tab" style="margin-right: 4px;">
                                                                                               
                                <div class="novedad">
                                                      Última<br />novedad             
                                </div>
                                                           
                                <div class="nov-cont">
                                                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.             
                                </div>
                                                           
                                <div style="margin-top: 64px;" class="link-title">
                                                          Noticias anteriores                 
                                </div>
                                               
                                <div class="noticias">
                                                00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.<br /><br />00/00 Título de la noticia.       
                                </div>
                                                               
                        </div>
                                                         
                        <div class="column-tab">
                                                               
                                <div class="link-title">
                                                          Búsquedas                 
                                </div>
                                           
                                <marquee scrollamount="2" class="busquedas" direction="up" onmouseout="this.start()" onmouseover="this.stop()">
                                              <a href="url">Título de la búsqueda 1</a><br /><br /><a href="url">Título de la búsqueda 2</a><br /><br /><a href="url">Título de la búsqueda 3</a><br /><br /><a href="url">Título de la búsqueda 4</a><br /><br /><a href="url">Título de la búsqueda 5</a>     
                                </marquee>
                                                               
                        </div>
                                                                                     
                </div>
                             
        </div>
</center>
<div class="botones">
                                                                                             
        <div class="title">
                                                          Menu                                         
        </div><a href="#" class="modal-link" data-modal-target="example-popup">Index</a><a href="#" class="modal-link" data-modal-target="admin-tab">Staff</a><a href="#" class="modal-link" data-modal-target="links-tab">Links</a><a style="border-bottom: 3px solid #000;" href="#" class="modal-link" data-modal-target="news-tab">News</a><span style="font-size: 10px; font-weight: 700;  text-transform: uppercase; font-family: calibri; position: relative; top: 5px; text-align: center;"><a href="http://thecaptainknowsbest.tumblr.com/" style="color: #000;">© HARDROCK</a></span>
</div>

Código:
.botones {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 73px;
}
 
.busquedas {
  background: #e1e0e0;
  text-align: center;
  height: 146px;
  overflow: hidden;
  font-weight: bold;
}
 
.busquedas a {color: #000;}
 
.tablon-anuncios {font-family: source sans pro;}
 
.noticias {
  font-size: 11px;
  line-height: 100%;
  color: #000;
  font-weight: bold;
  text-align: justify;
}
 
.novedad {
  display: inline-block;
  line-height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 70px;
  background: #000;
  margin-right: 1px;
  text-align: center;
  padding-bottom: 20px;
  color: #f2f2f2;
  padding-top: 20px;
}
 
.nov-cont {
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 50px;
  background: #e1e0e0;
  line-height: 100%;
  text-align: justify;
  color: #000;
  width: 186px;
  padding: 5px;
}
 
.column-tab {
  width: 270px;
  overflow: hidden;
  position: relative;
  height: 181px;
  display: inline-block;
}
 
.links-sdarios .bot2 {
  margin-top: 5px;
  width: 100%;
  height: 40px;
  background: #000;
}
 
.links-sdarios {
  height: 150px;
  overflow: hidden;
  width: 270px;
  display: inline-block;
}
 
.links-sdarios a {
  display: inline-block;
  background: #e1e0e0;
  line-height: 100%;
  color: #000;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 134px;
  margin-top: 1px;
  margin-right: 1px;
  text-align: center;
  font-size: 11px;
  transition: 1s;
}
 
.links-sdarios a:hover {letter-spacing: 2px; transition: 1s;}
 
.links-pples {
  width: 270px;
  height: 150px;
  overflow: hidden;
  margin-right: 5px;
  display: inline-block;
}
 
.links-pples a {
  display: block;
  background: #e1e0e0;
  line-height: 100%;
  color: #000;
  padding-top: 9px;
  padding-bottom: 9px;
  margin-top: 1px;
  text-align: center;
  font-size: 11px;
  transition: 1s;
}
 
.links-pples a:hover {transition: 1s; letter-spacing: 2px;}
 
.link-title {
  display: inline-block;
  margin-bottom: 5px;
  width: 270px;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  line-height: 100%;
  font-family: Source Sans Pro;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #f9f9f9;
  background: #000;
}
 
.admin .info-admin {
  display: block;
  width: 87px;
  text-align: center;
  margin-left: 90px;
  font-size: 11px;
  background: #000;
  border-bottom: 1px solid #F9F9F9;
  line-height: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #F9F9F9;
}
 
.admin img {float: left; width: 90px; height: 181px;border-right: 1px solid #F9F9F9;}
 
.admin {
  height: 181px;
  width: 178px;
  overflow: hidden;
  display: inline-block;
  background: #000;
}
 
.ambientacion {
  height: 161px;
  padding: 10px;
  color: #000;
  width: 220px;
  margin-right: 5px;
  background: #e1e0e0;
  line-height: 100%;
  font-size: 11px;
  text-align: justify;
}
 
.bot-negro {
  width: 300px;
  height: 50px;
  margin-top: 5px;
  background: #000;
}
 
.botones a {color: #eee;}
 
.botones .title {
  display: block;
  text-transform: uppercase;
  font-family: Source Sans Pro;
  font-size: 13px;
  background: #000;
  width: 70px;
  text-align: center;
  color: #eee;
  font-weight: 600;
  margin-bottom: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 100%;
  height: 20px;
  border-right: 3px solid #000;
}
 
.modal-link {
  display: block;
  text-transform: uppercase;
  font-family: Source Sans Pro;
  font-size: 13px;
  background: #21B7B8;
  width: 70px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1px;
  padding-top: 10px;
  padding-bottom: 5px;
  line-height: 100%;
  height: 20px;
  border-right: 3px solid #000;
  transition: 0.5s;
}
 
.modal-link:hover {transition: 0.5s; width: 90px;}
 
.modal-content {
        display: none;
}
 
#fade-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000000;
        z-index: 2;
}
#modal-window {
  position: fixed;
  top: 64px;
  width: 550px;
  padding: 20px;
  left: 50%;
  height: 181px;
  overflow: hidden;
  border: 10px solid #000;
  margin: 0 0 0 -295px;
  background-color: #F9F9F9;
  z-index: 3;
}
/*Pop up*/

Código:
// jQuery Modal Popups by Black
// http://code.jfbs.net/?showtopic=57
$(document).ready(function() {
        var fadeBackground = $(document.createElement("div")).hide().attr("id", "fade-background"),
        modalWindow = $(document.createElement("div")).hide().attr("id", "modal-window");
        $(document.body).append(fadeBackground, modalWindow);
        $(document).on("click", ".modal-link", function(e) {
                $("#fade-background").css({ "opacity": "0.3" }).fadeIn("fast");
                var newContents = $("#" + $(this).data("modal-target")).html();
                $("#modal-window").html(newContents);
                $("#modal-window").fadeIn("fast");
                e.preventDefault();
        });
        $(document).on("click", "#fade-background", function() {
                $("#fade-background").fadeOut("fast");
                $("#modal-window").fadeOut("fast");
        });
        $(document).keypress(function(e) {
                if(e.keyCode == 27) {
                        $("#fade-background").fadeOut("fast");
                        $("#modal-window").fadeOut("fast");
                }
        });
});
avatar

tatsuhito
Nível 3

Masculino
Inscrito dia : 13/02/2016
Mensagens : 19
Pontos Ativos : 27

Ver perfil do usuário http://pokemon-sh.forumeiros.com/

Em curso Re: Ícones flutuantes

Mensagem por zHugh em 14/10/17, 07:56 pm

O codigo funcionou tranquilamente em uma pagina HTML mas ao aplica-lo no template sugerido o mesmo sequer apareceu no fórum

Triste
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh Ontem à(s) 12:40 pm

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Em curso Re: Ícones flutuantes

Mensagem por zHugh Hoje à(s) 04:58 pm

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 558
Pontos Ativos : 947

Ver perfil do usuário http://superonzerpg.forumeiros.net/

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