Como colocar este efeito

Qual é minha questão:
Boa Tarde amigos Forumeiros, novamente tenho uma duvidas e conto com a colaboração de vocês.

Gostaria de colocar em meu fórum este efeito para quem acessa e não tenha feito o login



Link do fórum aonde encontrei esta função.
http://raeleuca.forumeiros.com/

Abraço.



Endereço do meu fórum:
http://universodoscanarios.forumeiros.com

Versão do fórum:
PHPBB3

Olá!
Primeiramente você deve criar ou editar um widget com a opção Autorização somente para "Convidados". Adicione este código ao widget:

Código:

<div align="center" id="bar_float">
   <span style="font-size: 13px;"><span style="font-size: 13px;"><span style="font-family: Arial;"><span style="font-family: Arial;"><span style="font-family: Arial;"><script language="JavaScript">
function controlaCamada(bar_float)
{
                if( document.getElementById(bar_float).style.visibility == "hidden" )
                {
                                document.getElementById(bar_float).style.visibility = "visible";
                } else
                {
                                document.getElementById(bar_float).style.visibility = "hidden";
                }
}
</script><style type="text/css">
#bar_float a{
position: fixed;
bottom: 80px;
text-decoration:none;
                right: 20px;
z-index:3000;
}
a#return_to_ipbfs {
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 1;
opacity: 0.6;
width: 260px;
height: 70px;
background: #389fcf;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #1b5d75;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #6cd5f5 0px 1px 0px;
border-radius: 3px;
}
a#return_to_ipbfs:hover  { opacity: 0.8; }
#return_to_ipbfs strong { font-family: "Trebuchet MS"; display: block; font-size: 14px; padding-bottom: 5px; }
</style><a onclick="controlaCamada('bar_float')"><img =""="" src="http://i82.servimg.com/u/f82/11/72/12/47/button11.png" /></a><a id="return_to_ipbfs" href="#">Você não está conectado. Registre-se ou efetue o login para junte-se aos nossos 3 usuários e poder interagir conosco!</a></span></span></span></span></span>
</div>

Resulta?


Cordialmente,
Engine404

junto ao cod do sasuky add esse CSS

Código:

 #bar_float a {
    position: fixed;
    bottom: 80px;
    text-decoration: none;
    right: 20px;
    z-index: 3000;
}
a, a:hover {
    text-decoration: none !important;
}
a#return_to_ipbfs {
    position: fixed;
    bottom: 10px;
    line-height: 16px;
    text-align: left;
    right: 10px;
    z-index: 1;
    opacity: 0.6;
    width: 260px;
    height: 70px;
    background: none repeat scroll 0% 0% #389FCF;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
    padding: 10px;
    text-decoration: none;
    font-size: 11px;
    font-family: Tahoma;
    border: 1px solid #1B5D75;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px #6CD5F5 inset;
    border-radius: 3px;
}

KeePinhO escreveu:junto ao cod do sasuky add esse CSS

Código:

 #bar_float a {
    position: fixed;
    bottom: 80px;
    text-decoration: none;
    right: 20px;
    z-index: 3000;
}
a, a:hover {
    text-decoration: none !important;
}
a#return_to_ipbfs {
    position: fixed;
    bottom: 10px;
    line-height: 16px;
    text-align: left;
    right: 10px;
    z-index: 1;
    opacity: 0.6;
    width: 260px;
    height: 70px;
    background: none repeat scroll 0% 0% #389FCF;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
    padding: 10px;
    text-decoration: none;
    font-size: 11px;
    font-family: Tahoma;
    border: 1px solid #1B5D75;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px #6CD5F5 inset;
    border-radius: 3px;
}

KeePinhO, não é necessário adicionar este código a folha de estilo CSS já que adicionei o mesmo diretamente no código.

  

Sasuk e Keepinho, obrigado pelo pronto atendimento.....

O codigo funcionou parcialmente exceto aonde diz "Junte-se a 3 usuarios registrado" para o fórum que esta este efeito tem apenas 3 usuarios, ja no meu passa dos 780 teria como acertar isto?

Olá amigo, eu tenho isso no meu forum e utilizei este código
PControle  Modulos  Portal e Widget     Criar um Widget personalizado
Adicione este código no widget

Código:

<div id="bar_float" align="center">
<script language="JavaScript">
function controlaCamada(bar_float)
{
                if( document.getElementById(bar_float).style.visibility == "hidden" )
                {
                                document.getElementById(bar_float).style.visibility = "visible";
                } else
                {
                                document.getElementById(bar_float).style.visibility = "hidden";
                }
}
</script>
<style type="text/css">
#bar_float a{
position: fixed;
bottom: 80px;
text-decoration:none;
                right: 20px;
z-index:3000;
}
a#return_to_ipbfs {
position: fixed;
bottom: 10px;
line-height: 16px;
text-align: left;
right: 10px;
z-index: 1;
opacity: 0.6;
width: 260px;
height: 70px;
background: #389fcf;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #1b5d75;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #6cd5f5 0px 1px 0px;
border-radius: 3px;
}
a#return_to_ipbfs:hover  { opacity: 0.8; }
#return_to_ipbfs strong { font-family: "Trebuchet MS"; display: block; font-size: 14px; padding-bottom: 5px; }
</style>
<a onclick="controlaCamada('bar_float')"><img src='http://www.goldwave.com/images/x.png'=""><a href="#" id="return_to_ipbfs"><p>Você não está conectado.<br>
Registre-se ou efetue o login para juntar-se aos nossos {FORUMCOUNTUSER} usuários e poder aproveitar todos os serviços</p>
</a><br><br>
</div>

Este código é exatamente igual o da imagem mostrada

Atenciosamente,
HilterHP

Maneiro, muito bom HilterHP e amigos.

Fico feliz por ver pessoas disposta ajudar, outros com menos conhecimento.

Um forte abraço.