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
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
285 usuários online :: 8 usuários cadastrados, Nenhum Invisível e 277 Visitantes :: 1 Motor de busca

Connor R., Daniel Z, Fou-Lu, Harleen, Luiz~, Solaria Magnum, Stewart, William_iHarDz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Bolas com efeito hover

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

O autor desta mensagem foi removido do fórum - Ver a mensagem

  • 0

Resolvido Re: Bolas com efeito hover

Mensagem por Star Butterfly em Ter 27 Out 2015 - 15:52

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>

Star Butterfly
Nível 6

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

http://forumvenda.forumeiros.com/

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em Ter 27 Out 2015 - 17:15

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

Wamki
Usuário avançado

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

http://infostyle.forumbrasil.net

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em Ter 27 Out 2015 - 18:10

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

Wamki
Usuário avançado

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

http://infostyle.forumbrasil.net

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em Ter 27 Out 2015 - 18:21

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

Wamki
Usuário avançado

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

http://infostyle.forumbrasil.net

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em Ter 27 Out 2015 - 18:37

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

Wamki
Usuário avançado

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

http://infostyle.forumbrasil.net

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Bolas com efeito hover

Mensagem por Wamki em Ter 27 Out 2015 - 18:46

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

Wamki
Usuário avançado

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

http://infostyle.forumbrasil.net

Resolvido Re: Bolas com efeito hover

Mensagem por Fraise em Ter 27 Out 2015 - 21:41

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

Até mais.
Fraise

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4974
Pontos Ativos : 7239

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

O autor desta mensagem foi removido do fórum - Ver a mensagem

  • 0

Resolvido Re: Bolas com efeito hover

Mensagem por Fraise em Qua 28 Out 2015 - 0:51

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'

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4974
Pontos Ativos : 7239

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

O autor desta mensagem foi removido do fórum - Ver a mensagem

Resolvido Re: Bolas com efeito hover

Mensagem por Fraise em Qua 28 Out 2015 - 1:02

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.

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4974
Pontos Ativos : 7239

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