Ícones flutuantes

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

Resolvido Í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 : 564
Pontos Ativos : 953

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

Resolvido 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/
avatar

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido 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 : 23
Pontos Ativos : 35

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

Resolvido 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 : 564
Pontos Ativos : 953

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

Resolvido Re: Ícones flutuantes

Mensagem por zHugh em 16/10/17, 12:40 pm

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 564
Pontos Ativos : 953

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

Resolvido Re: Ícones flutuantes

Mensagem por zHugh em 17/10/17, 04:58 pm

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 564
Pontos Ativos : 953

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

Resolvido Re: Ícones flutuantes

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

up
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 564
Pontos Ativos : 953

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

Resolvido Re: Ícones flutuantes

Mensagem por Gaaratsu em 21/10/17, 10:01 pm

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


HAKUOUKI

               
   
Respeite as Regras Gerais do Fórum e conheça a nossa Equipe;
   Veja a Lista de FAQs do CPainel e Lista de Tutoriais;
   Ferramentas do(a) Administrador(a);
   Assinalar um Litígio.

   
   


   "Seria o único propósito da folha, o de cair?".

   
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7430

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Ícones flutuantes

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

Sim, eu o publiquei
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 564
Pontos Ativos : 953

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

Resolvido Re: Ícones flutuantes

Mensagem por Gaaratsu em 22/10/17, 03:36 pm

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
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5948
Pontos Ativos : 7430

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Ícones flutuantes

Mensagem por zHugh em 24/10/17, 01:27 pm

Funcionou *-
avatar

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 564
Pontos Ativos : 953

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

Resolvido Re: Ícones flutuantes

Mensagem por Luiz em 24/10/17, 01:29 pm

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

Luiz
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 22/04/2016
Mensagens : 5810
Pontos Ativos : 6649

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

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