Alteração no sistema de Facebook

Detalhes da questão

Endereço do fórum: brasilplayfreedom.forumeiro.com/forum
Versão do fórum: PunBB

Descrição

Bom, existe esse sistema de facebook, que ao passar o mouse aparecer a aba: https://imgur.com/a/om5W, bom, oque eu quero fazer, eu gostaria do código dele e fazer alterações, no caso tira esse nome Facebook, diminuir a largura total, deixando no lugar do nome facebook, uma setar, que ao passa o mouse iria aparece a aba, e também eu gostaria de deixa o fundo transparente, como o footer, depois disso, eu gostaria de coloca ele aqui onde está marcado em vermelho no meu fórum: https://imgur.com/a/etYEB e coloca esse botão conectar, que estarei pedindo aqui na forumeiros. Espero que entenderam.

Saudações!

Infelizmente o link da primeira PrintScreen esta fora do ar.
Poderia por gentileza re-upar para vermos o que o senhor deseja?

Até mais.
Sennior

Aqui está: https://imgur.com/a/S9I87

Boas!

Onde viu esse efeito do Facebook em aba?
Poderia nos conceder o link?

Até mais.
Haseo

Vi neste fórum: http://brasilplayfatal.com/forum

Saudações!

Como não tenho as imagens que o senhor deseja, eu peguei algumas do Google mesmo.
Preciso que seja mais descritivo quanto ao que deseja, por via, eu fiz isso:

Código:

<style type="text/css">#FBSlideLikeBox_right {
    background: url(http://defcar.sarein.com/portals/3/Fotos%20M%C3%B3dulos/FLECHA%20IZQUIERDA.png) 0 0 no-repeat;
    float: right;
    height: 172px;
    position: fixed;
    right: -300px;
    padding-left: 94px;
    top: 20%;
    width: 276px;
    z-index: 2000;
    background-size: 21%;
}#FBSlideLikeBox_left #FBSlideLikeBox3_left{height:400px;right:0;position:absolute;border:1px solid #3B5998;width:292px;background:#f8f8f8}#FBSlideLikeBox_right{background:url(http://i.imgur.com/xMlJ4Dy.png) 0 0 no-repeat;float:right;height:168px;position:fixed;right:-300px;padding-left:48px;top:20%;width:292px;z-index:2000}#FBSlideLikeBox_right #FBSlideLikeBox3_right {
    height: 600px;
    left: 0;
    position: absolute;
    border: 1px solid #3B5998;
    width: 300px;
    background: rgba(248, 248, 248, 0.14);
}#FBSlideLikeBox_right #FBSlideLikeBox2_right{position:relative;clear:both;width:auto}</style>
<script type="text/javascript">jQuery(document).ready(function(jQuery) {jQuery("#FBSlideLikeBox_right, #FBSlideLikeBox_left").mouseenter(function() {jQuery(this).stop().animate({right: 0}, "normal");}).mouseleave(function() {jQuery(this).stop().animate({right: -300}, "normal");});;});</script>
<div style="right: -300px;" id="FBSlideLikeBox_right" title="Brasil Play Fatal"><div id="FBSlideLikeBox2_right"><div id="FBSlideLikeBox3_right"><iframe frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:292px; height:590px;" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbrasilplayfatal?fref=ts&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true"></iframe><!--
            Iframe            -->  </div></div></div>

Coloque este código na Home Page de teu fórum, no painel de controle.
Até mais.
Haseo

Bom, eu não quero uma home page, entende, quero um pequeno menu com o efeito hover dessa home page.. Ao passar o mouse apareceria os botões.

Ué... Mas a função só vai funcionar se tiver na Home page.
Não significa que só porque o código ta na Home page que ele vai ficar definitivamente na Home page do teu fórum.

O senhor testou o código?
Até mais.

Onde fica essa homepage?? Tentei coloca pelos widgeets, porém meus widgeets estão bugados e não aparecem.

Boas!

Vá em:
Cpainel ->> Visualização ->> Página inicial ->> Geral
Procure pelo campo "Mensagem na Página Inicial" e coloque o código.

Até mais.
Haseo

Certo resultou, mas agora teria como coloca a mesma transparência do meu footer? E diminuir a altura dele, para fica com a mesma dimensão dessa marcação em vermelho aqui: https://imgur.com/a/etYEB, e deixa ele posicionado na marca vermelha da print.

@EDIT

Bom, eu gostaria que ele ficasse nessa dimensão aqui: https://imgur.com/a/XnKVd . fiz uma pequena montagem para vocês verem como quero, nele vai fica esses botões: https://imgur.com/a/2bQIU com links externos. E eu gostaria de troca essa imagem do facebook, por uma triangular em vermelho.

#UP

Qual imagem ficará no lugar da imagem do facebook?
Como você não deixou nenhuma imagem, faça o seguinte quando for alterar a imagem, procure-a e altere: https://i.imgur.com/xMlJ4Dy.png

Agora para adicionar os links das seguintes imagens https://imgur.com/a/2bQIU
Procure por: #LINK

Código:

<style type="text/css">
    #FBSlideLikeBox_right {
        background: url(http://defcar.sarein.com/portals/3/Fotos%20M%C3%B3dulos/FLECHA%20IZQUIERDA.png) 0 0 no-repeat;
        float: right;
        height: 90px;
        position: fixed;
        right: -300px;
        padding-left: 94px;
        top: 20%;
        width: 276px;
        z-index: 2000;
        background-size: 21%;
    }
    #FBSlideLikeBox_left #FBSlideLikeBox3_left {
        height: 90px;
        right: 0;
        position: absolute;
        border: 1px solid #3B5998;
        width: 292px;
        background: #f8f8f8
    }
    #FBSlideLikeBox_right {
        background: url(http://i.imgur.com/xMlJ4Dy.png) 0 0 no-repeat;
        float: right;
        height: 90px;
        position: fixed;
        right: -300px;
        padding-left: 48px;
        top: 20%;
        width: 292px;
        z-index: 2000
    }
    #FBSlideLikeBox_right #FBSlideLikeBox3_right {
        height:auto;
        left: 0;
        position: absolute;
        border: 0px solid rgba(0,0,0,0.4);
        width: 300px;
        background: rgba(0,0,0,0.4);
    }
    #FBSlideLikeBox_right #FBSlideLikeBox2_right {
        position: relative;
        clear: both;
        width: auto
    }
</style><script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery("#FBSlideLikeBox_right, #FBSlideLikeBox_left").mouseenter(function() {
            jQuery(this).stop().animate({
                right: 0
            }, "normal");
        }).mouseleave(function() {
            jQuery(this).stop().animate({
                right: -300
            }, "normal");
        });;
    });
</script>
<div title="Brasil Play Fatal" id="FBSlideLikeBox_right" style="right: -300px;">
              
   <div id="FBSlideLikeBox2_right">
                     
      <div id="FBSlideLikeBox3_right">
           <a href="#LINK"><img src="http://i.imgur.com/OrqtsMk.png" /></a><a href="#LINK2"><img src="http://i.imgur.com/wa0vZnZ.png" /></a><a href="#LINK3"><img src="http://i.imgur.com/wAvJSXR.png" /></a>           
      </div>
                 
   </div>
</div>

Olá Cepheus, obrigado pela ajuda, ficou ótimo, só quero modificar mais algumas coisas:
https://imgur.com/a/ye0pS
Teria como você da uma leve arredondada nas pontas, onde marquei em preto? Arredonda como as pontas do fórm.

Também gostaria que você coloca aquela imagem que marquei em vermelho, no caso "ÚTEIS" centralizar ela no meio, e tira aquele pequeno espaço que ta ficando.

E por favo, diminuir aquele espaço enorme que está depois dos botões Conectar, Download's.

O Código que estou utilizando agora é esse:

Código:

<style type="text/css">
    #FBSlideLikeBox_right {
        background: url(http://defcar.sarein.com/portals/3/Fotos%20M%C3%B3dulos/FLECHA%20IZQUIERDA.png) 0 0 no-repeat;
        float: right;
        height: 90px;
        position: fixed;
        right: -300px;
        padding-left: 94px;
        top: 20%;
        width: 276px;
        z-index: 2000;
        background-size: 21%;
    }
    #FBSlideLikeBox_left #FBSlideLikeBox3_left {
        height: 90px;
        right: 0;
        position: absolute;
        border: 1px solid #3B5998;
        width: 292px;
        background: #f8f8f8
    }
    #FBSlideLikeBox_right {
        background: url(http://i.imgur.com/yjzItSh.png) 0 0 no-repeat;
        float: right;
        height: 200px;
        position: fixed;
        right: -200px;
        padding-left: 48px;
        top: 20%;
        width: 292px;
        z-index: 2000
    }
    #FBSlideLikeBox_right #FBSlideLikeBox3_right {
        height:auto;
        left: 0;
        position: absolute;
        border: 0px solid rgba(0,0,0,0.4);
        width: 300px;
        background: rgba(0,0,0,0.4);
    }
    #FBSlideLikeBox_right #FBSlideLikeBox2_right {
        position: relative;
        clear: both;
        width: auto
    }
</style><script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery("#FBSlideLikeBox_right, #FBSlideLikeBox_left").mouseenter(function() {
            jQuery(this).stop().animate({
                right: 0
            }, "normal");
        }).mouseleave(function() {
            jQuery(this).stop().animate({
                right: -300
            }, "normal");
        });;
    });
</script>
<div style="right: -300px;" id="FBSlideLikeBox_right" title="Easy DM">
                                    
   <div id="FBSlideLikeBox2_right">
                                                 
      <div id="FBSlideLikeBox3_right">
                           <a href="samp://198.50.195.141:7776"><img src="http://i.imgur.com/OrqtsMk.png" /></a><a href="https://www.sa-mp.com/download.php"><img src="http://i.imgur.com/wa0vZnZ.png" /></a><a href="http://www.mediafire.com/file/fad71vnflm0721n/GTA+San+Andreas+By+TinhO.rar"><img src="http://i.imgur.com/wAvJSXR.png" /></a>                         
      </div>
                                           
   </div>
</div>

Mude o código para:

Código:

<style type="text/css">
    #FBSlideLikeBox_right {
        background: url(http://defcar.sarein.com/portals/3/Fotos%20M%C3%B3dulos/FLECHA%20IZQUIERDA.png) 0 0 no-repeat;
        float: right;
        height: 90px;
        position: fixed;
        right: -300px;
        padding-left: 94px;
        top: 20%;
        width: 276px;
        z-index: 2000;
        background-size: 21%;
    }
    #FBSlideLikeBox_left #FBSlideLikeBox3_left {
        height: 90px;
        right: 0;
        position: absolute;
        border: 1px solid #3B5998;
        width: 292px;
        background: #f8f8f8
    }
    #FBSlideLikeBox_right {
        background: url(http://i.imgur.com/yjzItSh.png) 0 0 no-repeat;
        float: right;
        height: 200px;
        position: fixed;
        right: -200px;
        padding-left: 42px!important;
        top: 20%;
        width: 292px;
        z-index: 2000
    }
    #FBSlideLikeBox_right #FBSlideLikeBox3_right {
        height:auto;
        left: 0;
        position: absolute;
        border: 0px solid rgba(0,0,0,0.4);
        border-radius: 6px 0px 0px 7px!important;
        width: 300px;
        background: rgba(0,0,0,0.4);
    }
    #FBSlideLikeBox_right #FBSlideLikeBox2_right {
        position: relative;
        clear: both;
        width: auto
    }
</style><script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        jQuery("#FBSlideLikeBox_right, #FBSlideLikeBox_left").mouseenter(function() {
            jQuery(this).stop().animate({
                right: 0
            }, "normal");
        }).mouseleave(function() {
            jQuery(this).stop().animate({
                right: -300
            }, "normal");
        });;
    });
</script>
<div style="right: -300px;" id="FBSlideLikeBox_right" title="Easy DM">
                                    
   <div id="FBSlideLikeBox2_right">
                                                 
      <div id="FBSlideLikeBox3_right">
                           <a href="samp://198.50.195.141:7776"><img src="http://i.imgur.com/OrqtsMk.png" /></a><a href="https://www.sa-mp.com/download.php"><img src="http://i.imgur.com/wa0vZnZ.png" /></a><a href="http://www.mediafire.com/file/fad71vnflm0721n/GTA+San+Andreas+By+TinhO.rar"><img src="http://i.imgur.com/wAvJSXR.png" /></a>                         
      </div>
                                           
   </div>
</div>

Espero ter ajudado!
Luiz.

Conseguiu arredondar, obrigado, só falta agora baixa um pouco o botão ''Úteis'' para que ele fique centralizado, e tira aquele espaço que fica quando passa o mouse, aquele espaço grande atras.

#UP

#UP

troque por:

Código:

    <style type="text/css">
     
  #FBSlideLikeBox_right {
    background: url(http://i.imgur.com/yjzItSh.png) 0 0 no-repeat;
    float: right;
    height: 200px;
    position: fixed;
    right: -200px;
    padding-left: 42px !important;
    top: 20%;
    width: 175px;
    z-index: 2000;
    background-position: 0px 14px;
}
#FBSlideLikeBox_right #FBSlideLikeBox3_right {
    height: auto;
    left: 0;
    position: absolute;
    border: 0px solid rgba(0,0,0,0.4);
    border-radius: 6px 0px 0px 7px !important;
    width: 200px;
    background: rgba(0,0,0,0.4);
}
   
        #FBSlideLikeBox_right #FBSlideLikeBox2_right {
            position: relative;
            clear: both;
            width: auto
        }
    </style><script type="text/javascript">
        jQuery(document).ready(function(jQuery) {
            jQuery("#FBSlideLikeBox_right, #FBSlideLikeBox_left").mouseenter(function() {
                jQuery(this).stop().animate({
                    right: 0
                }, "normal");
            }).mouseleave(function() {
                jQuery(this).stop().animate({
                    right: -175
                }, "normal");
            });;
        });
    </script>   
<div style="right: -175px;" id="FBSlideLikeBox_right" title="Easy DM">
                                                          
   <div id="FBSlideLikeBox2_right">
                                                                             
      <div id="FBSlideLikeBox3_right">
                                           <a href="samp://198.50.195.141:7776"><img src="http://i.imgur.com/OrqtsMk.png" /></a><a href="https://www.sa-mp.com/download.php"><img src="http://i.imgur.com/wa0vZnZ.png" /></a><a href="http://www.mediafire.com/file/fad71vnflm0721n/GTA+San+Andreas+By+TinhO.rar"><img src="http://i.imgur.com/wAvJSXR.png" /></a>                                     
      </div>
                                                                   
   </div>
            
</div>

Muito obrigado, resolvido.