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.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Shek
 
YouTube3
 
Sennior
 

Quem está conectado
228 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 227 Visitantes :: 2 Motores de busca

Sennior

[ Ver toda a lista ]


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

Bolas com efeito hover

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

Resolvido Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 12:29 pm

Detalhes da questão


Endereço do fórum: http://bvlrpg-samp.forumeiros.com/forum
Versão do fórum: PunBB

Descrição


bom pessoal,gostaria de saber como colocar esses itens aqui olhe do quadrado do fdf:




com o mesmo efeito que faz no FDF

@fraise me ajuda ? ou outro usuario
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste
  • 0

Resolvido Re: Bolas com efeito hover

Mensagem por Star Butterfly em 27/10/15, 01:52 pm

Painel de controle > Geral > Mensagens e e-mails > Anúncios

Cada imagem é um <img src="endereço da imagem">, <a href"link-alvo">(tags img)</a> para links, <center></center> para centralizar.

Exemplo: <a href="http://debates-so.forumeiros.com/f8-freebsd">
<img src="http://www.unixstickers.com/image/cache/data/stickers/freebsd/freebsd-600x600.png">
</a>
avatar

Star Butterfly
Nível 6

Masculino
Inscrito dia : 24/10/2015
Mensagens : 70
Pontos Ativos : 121

http://forumvenda.forumeiros.com/

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em 27/10/15, 03:15 pm

Olá,
Vamos lá?
Tente este código original de FDF, ao acordo de CGU, tira as imagens pra não acontecer problemas no futuro.
Código:
<div id="services_fa">
                     <a class="tooltip" itemprop="url" href="/c2-" tooltip="Atendimento ao Usuário Forumeiros">  <em title="Atendimento ao Usuário FORUMEIROS" class="fa fa-support hovicon effect-3 sub-a circulo1" tooltip="Atendimento ao Usuário Forumeiros" data-original-title="Atendimento ao Usuário Forumeiros"></em> </a> <a class="tooltip" itemprop="url" href="/f17-" tooltip="Criações gráficas para fóruns Forumeiros"> <em title="Criações gráficas" class="fa fa-paint-brush hovicon effect-3 sub-a circulo2" data-original-title="Criações gráficas para fóruns Forumeiros"></em></a>  <a class="tooltip" href="/c9-" tooltip="Setor de Publicidade para fóruns"> <em title="Setor de Publicidade para fóruns" class="fa fa-random hovicon effect-3 sub-a circulo3" data-original-title="Serviços extras exclusivo para Membros Forumeiros"></em> </a> <a class="tooltip" itemprop="url" href="/c7-" tooltip="Os Desenvolvedores (laboratório de códigos)"> <em title="Os Desenvolvedores (laboratório de códigos)" class="fa fa-code hovicon effect-3 sub-a circulo4" data-original-title="Laboratório de Códigos Javascript"></em>  </a> <a class="tooltip" itemprop="url" href="/c6-" tooltip="Sugestões e melhorias"> <em title="Miscelânea" class="fa fa-lightbulb-o hovicon effect-3 sub-a circulo5" data-original-title="Sugestões e Melhorias para o serviço Forumeiros"></em> </a>
</div>
Edite que puder antes de a empresa de segurança analisar o seu fórum, poderá ficar em riscos ser deletado.

Cumprimentos.
Cutie Tuteur
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 03:51 pm

Cutie,eu sei,já fiz tudo ist que você disse. mas,existe um CSS se você não sabe,pra tais efeitos,sinão o codigo que me passou é envão, precisa do CSS pra fazer funcionar e pra ficar a imagem de fundo.
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em 27/10/15, 04:10 pm

Código:
.hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #fff;
}
.hovicon.effect-3.sub-a {
    -webkit-box-shadow: 0 0 0 4px #fff!important;
    box-shadow: 0 0 0 4px #fff!important;
    cursor: auto;
}
.hovicon.effect-3 {
    -webkit-box-shadow: 0 0 0 4px #eee;
    -webkit-transition: color .3s;
    box-shadow: 0 0 0 4px #eee;
    transition: color .3s;
}
em.circulo1 {
    background-color: #C39300;
}
em.hovicon {
    border-radius: 50%;
    cursor: default;
    display: inline-block;
    font-size: 25px;
    height: 60px;
    line-height: 60px;
    margin: 15px 15px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 60px;
    z-index: 1;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.hovicon.effect-3.sub-a:hover, .hovicon.effect-3.sub-b:hover, .hovicon.effect-3.sub-b:hover i {
    color: #fff;
}
.hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #fff;
}
.hovicon.effect-3.sub-a {
    -webkit-box-shadow: 0 0 0 4px #fff!important;
    box-shadow: 0 0 0 4px #fff!important;
    cursor: auto;
}
.hovicon.effect-3 {
    -webkit-box-shadow: 0 0 0 4px #eee;
    -webkit-transition: color .3s;
    box-shadow: 0 0 0 4px #eee;
    transition: color .3s;
}
em.circulo2 {
    background-color: #C6C;
}
.hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #fff;
}
.hovicon.effect-3.sub-a {
    -webkit-box-shadow: 0 0 0 4px #fff!important;
    box-shadow: 0 0 0 4px #fff!important;
    cursor: auto;
}
.hovicon.effect-3 {
    -webkit-box-shadow: 0 0 0 4px #eee;
    -webkit-transition: color .3s;
    box-shadow: 0 0 0 4px #eee;
    transition: color .3s;
}
em.circulo3 {
    background-color: #009FB9;
}
em.hovicon {
    border-radius: 50%;
    cursor: default;
    display: inline-block;
    font-size: 25px;
    height: 60px;
    line-height: 60px;
    margin: 15px 15px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 60px;
    z-index: 1;
}
.hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #fff;
}
.hovicon.effect-3.sub-a {
    -webkit-box-shadow: 0 0 0 4px #fff!important;
    box-shadow: 0 0 0 4px #fff!important;
    cursor: auto;
}
.hovicon.effect-3 {
    -webkit-box-shadow: 0 0 0 4px #eee;
    -webkit-transition: color .3s;
    box-shadow: 0 0 0 4px #eee;
    transition: color .3s;
}
em.circulo4 {
    background-color: #263D50;
}
.hovicon.effect-3.sub-a, .hovicon.effect-3.sub-a i {
    color: #fff;
}
.hovicon.effect-3.sub-a {
    -webkit-box-shadow: 0 0 0 4px #fff!important;
    box-shadow: 0 0 0 4px #fff!important;
    cursor: auto;
}
.hovicon.effect-3 {
    -webkit-box-shadow: 0 0 0 4px #eee;
    -webkit-transition: color .3s;
    box-shadow: 0 0 0 4px #eee;
    transition: color .3s;
}
em.circulo5 {
    background-color: #8C47AF;
}

Bote na folha de estilo CSS, lembre-se que vou avisar última vez, você está copiando o FDF tudo, usando os imagens, cuidado o risco do seu fórum!
Cumprimentos.
Cutie Tuteur
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 04:16 pm

sim amigo,eu estava ciente desse codigo também,pensei que irias lançar um mais completo,pois já tinha feito isto e do modo que fiz ficou até um pouco mais completo que esse seu... olhe como fico com seu codigo:

avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em 27/10/15, 04:21 pm

Me mande-me o seu templante overall_header por gentileza, pra instalar o fonte da imagem?
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 04:23 pm

:/

Ok,aqui está:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
 
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
 
        <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
    _gaq.push(["_trackPageview"]);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
</head>

<body>
 
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>

   <div class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
                    <div id="brandday">     
                    <div id="branding">
       <div class="wrapper">
        <div id="logo">
          <a id="logoi" title="" href="/">
                <img border="0" align="top" title="" alt="" src="http://o2.t26.net/images/space.gif">
            </a> 
        </div>
        <script type="text/javascript">         var menu_section_actual = 'home';      </script>       
        <div id="menu">           
        <!--LEFT MENU-->         
        <ul class="menuTabs">           
        <li class="tabbed"><a class="m_title" style="padding: 0;height: 115px;border-left: 0;"></a></li>       
          <li class="tabbed" id="tabbedhome"><a title="Ir ao Inicio" class="m_title" href="/forum" onmouseover="menu_toogle()">Inicio<span class="drop-menu"></span></a>                                 
        </li>                                                   
        <li class="tabbed" id="tabbedportal"><a title="Ir ao Portal" class="m_title" onclick="menu('juegos', this.href); return false;" href="/portal" onmouseover="menu_toogle()">Portal<span class="drop-menu"></span></a>                                                                 
        </li>                                                                                                 
          <li class="tabbed" id="tabbedmembers"><a title="Ir a lista de Membros" class="m_title" href="/memberlist" onmouseover="menu_toogle()">Membros<span class="drop-menu"></span></a>                                 
        </li>                                                   
          <li class="tabbed " id="tabbedgroups"><a title="Ir a lista de Grupos" class="m_title" href="/groups" onmouseover="menu_toogle()">Grupos<span class="drop-menu"></span></a>                                 
        </li>                               
        <li class="tabbed"  id="tabbedregistro"><a title="Registre já!" class="m_title" href="/register">Registro</a>       
        </li>
          <li class="tabbed"  id="tabbedlogin"><a href="/login" title="Logue-se em sua Conta" class="m_title" id="sign_in">Login</a></li>
        <li class="tabbed"><a class="m_title" style="padding: 0;height: 115px;border-right: 0;"></a></li>       
        <li class="tabbed"></li>               
        <li class="clearBoth"></li>           
        </ul>                       
        <div class="clearBoth"></div>       
        </div></div>
    </div>
    <!-- ::: TOP BAR: Sign in / register or user drop down and notification alerts ::: -->
    <div class="wrapper">
                          <div id="user_bar" class="clearfix">
                <div id="user_navigation" class="not_logged_in">
                   
                    <ul class="ipsList_inline">
                    <!-- BEGIN switch_user_logged_in -->
               <li><a href="/profile?mode=editprofile" title="Editar Perfil"/>
                    <script>
               jQuery(document).ready(function(){
                 jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
                  link = jQuery('.frm dl dd img', data).attr('src');
                  if(link){
                    jQuery('#avatar').html('<center><img src="'+link+'" alt="" /></center>');
                  }else{
                 jQuery('#avatar').html('');
                  }
                 });
               });
               </script>
                    <div id="avatar"><center></center></div>                             
                    <li><a class="profilename" href="/profile?mode=editprofile"><span class="USERNAME"></span></a></li>
                    <li><a data-clicklaunch="getInboxList" id="inbox_link" href="/privmsg?folder=inbox" title="Ler Mensagens Privadas"><img src="http://i56.servimg.com/u/f56/17/97/98/69/yymnyc10.png" alt=""></a></li>
                    <li><a id="notify_link" href="/search?search_id=watchsearch" title="Ver Todas as Notificações"><img src="http://i56.servimg.com/u/f56/17/97/98/69/gyfvip11.png" alt=""></a></li>
                    <li><a href="/login?logout">Deslogar-se</a></li>
                    <!-- END switch_user_logged_in -->
                    </ul>
                </div>

                <div id="search" class="right">
   <form method="get" action="/search?search_where=11" id="search-box">
      <fieldset>
         <label for="main_search" class="hide">Procurar</label>
         
         <span id="search_wrap" class="right">
            <input type="text" id="main_search" name="search_keywords" class="" size="17" tabindex="100" placeholder="Procurar">
           
            <input type="submit" class="submit_input clickable" value="">
        </span>
       
      </fieldset>
  </form>
</div>

</div>
<div id="content" class="clearfix">
    <div id="mainContent">
      <!--MAIN CONTAINER-->
      <div id="contenido_principal">
      <div id="cuerpocontainer">
       
            <div class="pun">
            
               <!-- BEGIN switch_ticker_new -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker_new -->

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                     <div id="outer-wrapper">
                        <div id="wrapper">
                           <div id="container">
                              <div id="content">
                                 
                                 <div id="main">
                                    <div id="main-content">

<!-- BEGIN html_validation -->
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
                          </div>
                          </div>
          </div>
</body>
</html>
<!-- END html_validation -->
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em 27/10/15, 04:37 pm

Altere o templante pra este:
Código:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
  
        <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
    _gaq.push(["_trackPageview"]);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
  <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
</head>

<body>
 
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>

   <div class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
                    <div id="brandday">      
                    <div id="branding">
       <div class="wrapper">
        <div id="logo">
          <a id="logoi" title="" href="/">
                <img border="0" align="top" title="" alt="" src="http://o2.t26.net/images/space.gif">
            </a>  
        </div>
        <script type="text/javascript">         var menu_section_actual = 'home';      </script>        
        <div id="menu">           
        <!--LEFT MENU-->         
        <ul class="menuTabs">            
        <li class="tabbed"><a class="m_title" style="padding: 0;height: 115px;border-left: 0;"></a></li>        
          <li class="tabbed" id="tabbedhome"><a title="Ir ao Inicio" class="m_title" href="/forum" onmouseover="menu_toogle()">Inicio<span class="drop-menu"></span></a>                                  
        </li>                                                   
        <li class="tabbed" id="tabbedportal"><a title="Ir ao Portal" class="m_title" onclick="menu('juegos', this.href); return false;" href="/portal" onmouseover="menu_toogle()">Portal<span class="drop-menu"></span></a>                                                                  
        </li>                                                                                                  
          <li class="tabbed" id="tabbedmembers"><a title="Ir a lista de Membros" class="m_title" href="/memberlist" onmouseover="menu_toogle()">Membros<span class="drop-menu"></span></a>                                  
        </li>                                                    
          <li class="tabbed " id="tabbedgroups"><a title="Ir a lista de Grupos" class="m_title" href="/groups" onmouseover="menu_toogle()">Grupos<span class="drop-menu"></span></a>                                  
        </li>                                
        <li class="tabbed"  id="tabbedregistro"><a title="Registre já!" class="m_title" href="/register">Registro</a>        
        </li> 
          <li class="tabbed"  id="tabbedlogin"><a href="/login" title="Logue-se em sua Conta" class="m_title" id="sign_in">Login</a></li> 
        <li class="tabbed"><a class="m_title" style="padding: 0;height: 115px;border-right: 0;"></a></li>        
        <li class="tabbed"></li>                
        <li class="clearBoth"></li>            
        </ul>                        
        <div class="clearBoth"></div>        
        </div></div>
    </div>
    <!-- ::: TOP BAR: Sign in / register or user drop down and notification alerts ::: -->
    <div class="wrapper">
                          <div id="user_bar" class="clearfix">
                <div id="user_navigation" class="not_logged_in">
                    
                    <ul class="ipsList_inline">
                    <!-- BEGIN switch_user_logged_in -->
               <li><a href="/profile?mode=editprofile" title="Editar Perfil"/>
                    <script>
               jQuery(document).ready(function(){
                 jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
                  link = jQuery('.frm dl dd img', data).attr('src');
                  if(link){
                    jQuery('#avatar').html('<center><img src="'+link+'" alt="" /></center>');
                  }else{
                 jQuery('#avatar').html('');
                  }
                 });
               });
               </script>
                    <div id="avatar"><center></center></div>                              
                    <li><a class="profilename" href="/profile?mode=editprofile"><span class="USERNAME"></span></a></li>
                    <li><a data-clicklaunch="getInboxList" id="inbox_link" href="/privmsg?folder=inbox" title="Ler Mensagens Privadas"><img src="http://i56.servimg.com/u/f56/17/97/98/69/yymnyc10.png" alt=""></a></li>
                    <li><a id="notify_link" href="/search?search_id=watchsearch" title="Ver Todas as Notificações"><img src="http://i56.servimg.com/u/f56/17/97/98/69/gyfvip11.png" alt=""></a></li>
                    <li><a href="/login?logout">Deslogar-se</a></li>
                    <!-- END switch_user_logged_in -->
                    </ul>
                </div>

                <div id="search" class="right">
   <form method="get" action="/search?search_where=11" id="search-box">
      <fieldset>
         <label for="main_search" class="hide">Procurar</label>
         
         <span id="search_wrap" class="right">
            <input type="text" id="main_search" name="search_keywords" class="" size="17" tabindex="100" placeholder="Procurar">
            
            <input type="submit" class="submit_input clickable" value="">
        </span>
        
      </fieldset>
  </form>
</div>

</div>
<div id="content" class="clearfix">
    <div id="mainContent">
      <!--MAIN CONTAINER--> 
      <div id="contenido_principal">
      <div id="cuerpocontainer">
        
            <div class="pun">
            
               <!-- BEGIN switch_ticker_new -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker_new -->

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                     <div id="outer-wrapper">
                        <div id="wrapper">
                           <div id="container">
                              <div id="content">
                                 
                                 <div id="main">
                                    <div id="main-content">

<!-- BEGIN html_validation -->
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
                          </div>
                          </div>
          </div>
</body>
</html>
<!-- END html_validation -->
E adicione este código na Folha de Estilo CSS
Código:
.fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before {
    content: "\f1cd";
}
.hovicon:before {
    -webkit-font-smoothing: antialiased;
    display: block;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    speak: none;
    text-transform: none;
}
Pseudo ::after element
.hovicon.effect-3.sub-a:after, .hovicon.effect-3.sub-b:after {
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    opacity: 0;
    transform: scale(1.3);
}
.hovicon.effect-3:after {
    -webkit-transition: -webkit-transform 0.2s,opacity .3s;
    background: #369fcf;
    left: -2px;
    padding: 2px;
    top: -2px;
    transition: transform 0.2s,opacity .3s;
    z-index: -1;
}
.hovicon:after {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    border-radius: 100px;
    box-sizing: content-box;
    content: '';
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
}
.fa-paint-brush:before {
    content: "\f1fc";
}
.fa-random:before {
    content: "\f074";
}
.fa-code:before {
    content: "\f121";
}
.fa-lightbulb-o:before {
    content: "\f0eb";
}

Cumprimentos.
Cutie Tuteur
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 04:42 pm

então amigo,seu codigo acabou dando um pouco de conflito ... olhe como ficou essa parte:



o tamanho do texto aumentou poderia me ajudar nisto,já que o que causou isto foi seu codigo ...
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em 27/10/15, 04:46 pm

Não foi meus códigos que deram esse conflito, você botou alguma CSS que pode aumentar, é impossível que meus códigos ia ocorrer este erro senhor
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bolas com efeito hover

Mensagem por Fraise em 27/10/15, 07:41 pm

Senhor @Rafusqui_ poderia-nos informar, fora esse problema, se sua questão está resolvida?

Até mais.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 07:47 pm

ainda não amigo, eu gostaria do efeito que faz também aqui no FDF,que não contém no CSS que o nosso amigo passou, pois ao colocar o mouse em cima do icone ele muda de cor correto? e não está tendo esse efeito. e outra coisa era deixar ele centralizado, fora isto é só.
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste
  • 0

Resolvido Re: Bolas com efeito hover

Mensagem por Fraise em 27/10/15, 10:51 pm

Remova todos os códigos aqui passados, incluindo o do overall_header que está bugando o seu fórum pelo facto do código estar no local errado.
Aqui está um único código, que poderá adicionar onde quiser:
Código:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
    div#services_fa {
        text-align: center
    }
   
    em.hovicon {
        border-radius: 50%;
        cursor: default;
        display: inline-block;
        font-size: 25px;
        height: 60px;
        line-height: 60px;
        margin: 15px 15px 0;
        position: relative;
        text-align: center;
        text-decoration: none;
        width: 60px;
        z-index: 1
    }
   
    .hovicon.auto-width {
        height: auto;
        padding: 15px;
        width: auto
    }
   
    .hovicon:after {
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        border-radius: 100px;
        box-sizing: content-box;
        content: '';
        height: 100%;
        pointer-events: none;
        position: absolute;
        width: 100%
    }
   
    .hovicon:before {
        -webkit-font-smoothing: antialiased;
        display: block;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        speak: none;
        text-transform: none
    }
   
    .hovicon.effect-3 {
        -webkit-box-shadow: 0 0 0 4px #eee;
        -webkit-transition: color .3s;
        box-shadow: 0 0 0 4px #eee;
        transition: color .3s
    }
   
    .hovicon.effect-3:after {
        -webkit-transition: -webkit-transform 0.2s, opacity .3s;
        background: #369fcf;
        left: -2px;
        padding: 2px;
        top: -2px;
        transition: transform 0.2s, opacity .3s;
        z-index: -1
    }
   
    .hovicon.effect-3.sub-a {
        -webkit-box-shadow: 0 0 0 4px #fff!important;
        box-shadow: 0 0 0 4px #fff!important;
        cursor: auto
    }
   
    .hovicon.effect-3.sub-a,
    .hovicon.effect-3.sub-a i {
        color: #fff
    }
   
    .hovicon.effect-3.sub-b,
    .hovicon.effect-3.sub-b i {
        color: #3c3940
    }
   
    .hovicon.effect-3.sub-a:hover,
    .hovicon.effect-3.sub-b:hover,
    .hovicon.effect-3.sub-b:hover i {
        color: #fff
    }
   
    .hovicon.effect-3.sub-a:after,
    .hovicon.effect-3.sub-b:after {
        -ms-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        opacity: 0;
        transform: scale(1.3)
    }
   
    .hovicon.effect-3.sub-a:hover:after,
    .hovicon.effect-3.sub-b:hover:after {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
        transform: scale(1)
    }
   
    .tooltip {
        display: inline;
        position: relative
    }
   
    .tooltip:hover {
        text-decoration: none
    }
   
    .tooltip:hover:after {
        -moz-border-radius: 3px;
        -moz-opacity: .9;
        -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90);
        -webkit-border-radius: 3px;
        -webkit-opacity: .9;
        background: #111;
        border-radius: 3px;
        bottom: 45px;
        color: #EEE;
        content: attr(tooltip);
        display: block;
        filter: alpha(opacity=90);
        font-family: sans-serif;
        font-size: 11px;
        left: 30%;
        opacity: .9;
        padding: 5px 15px;
        position: absolute;
        white-space: nowrap;
        z-index: 2
    }
   
    .tooltip:hover:before {
        border: solid;
        border-color: #111 transparent;
        border-width: 6px 6px 0;
        bottom: 39px;
        content: "";
        display: block;
        left: 41%;
        position: absolute;
        z-index: 2
    }
   
    em.circulo1 {
        background-color: #C39300
    }
   
    em.circulo2 {
        background-color: #C6C
    }
   
    em.circulo3 {
        background-color: #009FB9
    }
   
    em.circulo4 {
        background-color: #263D50
    }
   
    em.circulo5 {
        background-color: #8C47AF
    }
   
    .bg_staff {
        background: url(http://i58.servimg.com/u/f58/15/88/72/83/imagep10.png) repeat-x scroll center bottom #eff9fc;
        background-color: #EFF9FC;
        border: 2px solid #6db5c7;
        box-shadow: 0 2px 20px;
        margin: auto;
        padding-bottom: 35px
    }
   
    #alinhar_td_01 img {
        width: 200px!important
    }
</style>
<div id="services_fa">
    <a tooltip="Atendimento ao Usuário Forumeiros" href="/c2-" itemprop="url" class="tooltip"> <em data-original-title="Atendimento ao Usuário Forumeiros" tooltip="Atendimento ao Usuário Forumeiros" class="fa fa-support hovicon effect-3 sub-a circulo1" title="Atendimento ao Usuário FORUMEIROS"></em> </a>
    <a tooltip="Criações gráficas para fóruns Forumeiros" href="/f17-" itemprop="url" class="tooltip"> <em data-original-title="Criações gráficas para fóruns Forumeiros" class="fa fa-paint-brush hovicon effect-3 sub-a circulo2" title="Criações gráficas"></em></a>
    <a tooltip="Setor de Publicidade para fóruns" href="/c9-" class="tooltip"> <em data-original-title="Serviços extras exclusivo para Membros Forumeiros" class="fa fa-random hovicon effect-3 sub-a circulo3" title="Setor de Publicidade para fóruns"></em> </a>
    <a tooltip="Os Desenvolvedores (laboratório de códigos)" href="/c7-" itemprop="url" class="tooltip"> <em data-original-title="Laboratório de Códigos Javascript" class="fa fa-code hovicon effect-3 sub-a circulo4" title="Os Desenvolvedores (laboratório de códigos)"></em> </a>
    <a tooltip="Sugestões e melhorias" href="/c6-" itemprop="url" class="tooltip"> <em data-original-title="Sugestões e Melhorias para o serviço Forumeiros" class="fa fa-lightbulb-o hovicon effect-3 sub-a circulo5" title="Miscelânea"></em> </a>
</div>
<script type="text/javascript">
    // <![CDATA[
    (function(J, U, L) {
        var main = document.getElementById('main-content'), // main container

            // news nodes and data
            news = document.getElementById('faNewsBox'),
            newsTopics = news.getElementsByTagName('DIV'),
            storage = window.localStorage,
            rss = document.getElementById('faNewsRSS'),

            homepage = J('.introduction', main)[0], // homepage message

            // google search
            cx = '018097555942133585918:_gwf276jof8',
            gcse = document.createElement('script'),
            s = document.getElementsByTagName('script')[0],

            // info box
            infoLinks = document.getElementById('faInfoNav').getElementsByTagName('A'),

            // hide button
            hide = document.getElementById('hideHomepageMessage'),

            // profile variables
            profil,
            login;

        document.getElementById('fa_google_search').style.display = 'block'; // show google search for JS user
        document.getElementById('searchNoJS').style.display = 'none'; // hide normal search for JS users

        // hide homepage
        if (my_getcookie('faHomepage') == 'hidden') {
            hide.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
            document.getElementById('homepageMessage').style.display = 'none';
            document.getElementById('hiddenTitle').style.display = 'block';
        }

        // get news topics
        if (storage && storage.faNewsTopics && storage.faNewsTopicsExp > +new Date - 1 * 60 * 60 * 1000) news.innerHTML = storage.faNewsTopics;
        else {
            J(rss).load('/feed/?f=1 item', function() {
                for (var i = 0, item = rss.childNodes, j = newsTopics.length, t; i < j; i++) {
                    t = J('title', item[i])[0].innerHTML;
                    newsTopics[i].innerHTML = '<a itemprop="url" href="' + J('guid', item[i])[0].innerHTML + '" title="' + t + '">' + (t.length > 69 ? t.slice(0, 69) + '...' : t) + '</a> <span class="faNewsDate">' + J('pubDate', item[i])[0].innerHTML.replace(/.*?, (\d+ \w+).*/, function(M, S1) {
                        return S1.charAt(0) == '0' ? S1.slice(1) : S1
                    }) + '</span>';
                }
                if (storage) {
                    storage.faNewsTopics = news.innerHTML;
                    storage.faNewsTopicsExp = +new Date;
                }
            });
        }

        // create google search bar
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        s.parentNode.insertBefore(gcse, s);

        // apply general logic to info box tabs
        for (var i = 0, j = infoLinks.length; i < j; i++) {
            infoLinks[i].onclick = function() {
                var a = document.getElementById('faInfoNav').getElementsByTagName('A'),
                    b = document.getElementById('faInfo').getElementsByTagName('DIV'),
                    i, j;

                for (i = 0, j = b.length; i < j; i++)
                    if (/infoBlock/.test(b[i].className)) b[i].style.display = 'none';
                document.getElementById(this.id.slice(1)).style.display = 'block';

                for (i = 0, j = a.length; i < j; i++)
                    if (/infoActif/.test(a[i].className)) a[i].className = '';
                this.className = 'infoActif';

                return false;
            }
        }

        // hide the homepage message
        hide.onclick = function() {
            var message = document.getElementById('homepageMessage'),
                title = document.getElementById('hiddenTitle');

            if (this.src == 'http://illiweb.com/fa/m/tabs_less1.gif') {
                this.src = 'http://illiweb.com/fa/m/tabs_more1.gif';
                message.style.display = 'none';
                title.style.display = 'block';
                my_setcookie('faHomepage', 'hidden');
            } else {
                this.src = 'http://illiweb.com/fa/m/tabs_less1.gif';
                message.style.display = 'block';
                title.style.display = 'none';
                my_setcookie('faHomepage', 'shown');
            }
        };
    })(jQuery, _userdata, _lang);
    //]]>
</script>

Até mais.
Fraise

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Bolas com efeito hover

Mensagem por Rafusqui_ em 27/10/15, 11:01 pm

resolveu @fraise, valeu ai.

desculpe não deixar o obrigado,é que dei o obrigado antes pro cutie... mas quem solucionou tudo,foi você, pois retirei todos os codigos do cutie
avatar

Rafusqui_
Usuário avançado

Masculino
Inscrito dia : 20/05/2015
Mensagens : 386
Pontos Ativos : 602

https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=12& https://www.facebook.com/www.facebook.com/ https://twitter.com/teste

Resolvido Re: Bolas com efeito hover

Mensagem por Fraise em 27/10/15, 11:02 pm

Não se preocupe com isso, o que importa é que a sua dúvida ficou resolvida. Feliz

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

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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