Ícones flutuantes

4 participantes

Ir para baixo

Tópico resolvido Ícones flutuantes

Mensagem por zHugh 05.10.17 16:44

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 :<
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por Luiz 05.10.17 20:31

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/
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 05.10.17 21:59

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
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 06.10.17 21:40

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.
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 08.10.17 17:35

up
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 09.10.17 22:04

UP

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

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 11.10.17 15:11

upzinho Feliz
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 12.10.17 17:23

*-* up
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 13.10.17 21:06

up
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por tatsuhito 14.10.17 6:01

Olá zHugh Ícones flutuantes 3066085832 -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");
                }
        });
});
tatsuhito
tatsuhito
Novo Membro

Membro desde : 13/02/2016
Mensagens : 27
Pontos : 45

http://superonzerv.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 14.10.17 23:56

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

Triste
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 16.10.17 15:40

up
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 17.10.17 19:58

up
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 20.10.17 14:54

up
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por Konai 22.10.17 1:01

Saudações querido!

Ao salvar o template após a implementação/edição do mesmo, é necessário publicá-lo para que o efeito seja adicionado ao fórum. O senhor publicou o template?

Att! Muito feliz
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 22.10.17 16:35

Sim, eu o publiquei
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por Konai 22.10.17 18:36

Faça o seguinte!

Esse código coloque no template:
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>

Esse na CSS:
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*/

E por último, coloque este jQuery criando um novo na seção CPainel > Módulos >> HTML & JAVASCRIPT >>> Gestão dos códigos JavaScript:
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");
                }
        });
});

Lembre-se de habilitar o gerenciamento de códigos JS na própria seção que eu lhe indiquei e o investimento deve ser "em todas as páginas".

Att! Estilo cool
Konai
Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por zHugh 24.10.17 16:27

Funcionou *-
zHugh
zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Tópico resolvido Re: Ícones flutuantes

Mensagem por Luiz 24.10.17 16:29

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos