Como colocar este efeito

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

Resolvido Como colocar este efeito

Mensagem por Nitram em 07/03/14, 05:56 pm

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


Última edição por CRIADOURO MARTIN em 07/03/14, 07:07 pm, editado 1 vez(es)
avatar

Nitram
Nível 10

Masculino
Inscrito dia : 04/01/2013
Mensagens : 289
Pontos Ativos : 445

Ver perfil do usuário http://universodoscanarios.com/ https://www.facebook.com/universodoscanarios1

Resolvido Re: Como colocar este efeito

Mensagem por Troubleshoot em 07/03/14, 06:31 pm

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
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2200
Pontos Ativos : 2943

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Como colocar este efeito

Mensagem por James [B]. em 07/03/14, 06:40 pm

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;
}
avatar

James [B].
Nível 9

Masculino
Inscrito dia : 16/09/2012
Mensagens : 233
Pontos Ativos : 325

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

Resolvido Re: Como colocar este efeito

Mensagem por Troubleshoot em 07/03/14, 06:41 pm

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.

 Piscada 
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2200
Pontos Ativos : 2943

Ver perfil do usuário http://guiatecnico.ativo-forum.com/

Resolvido Re: Como colocar este efeito

Mensagem por Nitram em 07/03/14, 06:50 pm

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?
avatar

Nitram
Nível 10

Masculino
Inscrito dia : 04/01/2013
Mensagens : 289
Pontos Ativos : 445

Ver perfil do usuário http://universodoscanarios.com/ https://www.facebook.com/universodoscanarios1

Resolvido Re: Como colocar este efeito

Mensagem por HilterHP em 07/03/14, 06:53 pm

Olá amigo, eu tenho isso no meu forum e utilizei este código
PControle Seta Modulos Seta Portal e Widget Seta  Editar  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


Última edição por HilterHP em 07/03/14, 06:55 pm, editado 1 vez(es)
avatar

HilterHP
Nível 10

Masculino
Inscrito dia : 24/02/2014
Mensagens : 257
Pontos Ativos : 409

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

Resolvido Re: Como colocar este efeito

Mensagem por Nitram em 07/03/14, 06:58 pm

Maneiro, muito bom HilterHP e amigos.

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

Um forte abraço.
avatar

Nitram
Nível 10

Masculino
Inscrito dia : 04/01/2013
Mensagens : 289
Pontos Ativos : 445

Ver perfil do usuário http://universodoscanarios.com/ https://www.facebook.com/universodoscanarios1

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