ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Mensagens Privadas

em Sab 9 Jun - 19:29
Olá, eu gostaria de saber, como fazer o efeito abaixo.

http://i42.servimg.com/u/f42/17/32/13/00/sem_ta23.jpg

Queria que quando passar o mouse em cima das mensagens privadas, aparecer isso...

Obrigado.
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 19:57
Boa Noite!

Desculpe a demora!

Voltando ao assunto, crie um novo widget e insira este código:
<script src="http://lervisc.noads.biz/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
</head>

<body><div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Título 1</li>
<li class="TabbedPanelsTab" tabindex="0">Título 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Conteúdo 1</div>
<div class="TabbedPanelsContent">Conteúdo 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>

No valor em vermelho insira o título das abas, no local de laranja insira o conteúdo respectivo a cada aba (1 e 2).
Agora adicione o código css abaixo:
Código:
Código:
.TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
}
.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
}
.TabbedPanelsTabHover {
    background-color: #CCC;
}
.TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
}
.TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    background-color: #EEE;
}

.TabbedPanelsContent {
    padding: 4px;
}
.TabbedPanelsContentVisible {
}
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
}

Adicione em:
cPainel Ajudantes Visualização Ajudantes Imagens e Cores Ajudantes Cores Ajudantes Folha de estilos CSS

Até mais!
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:07
Eu quero nas mensagens privadas, e não em um widget -.-
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:11
Olá,

Fez os passos indicados? O efeito deve surtir no menu do seu fórum e não no Widget.
Ajudantes Utilizar um table type : [X] Não [] Sim

Marque "Não" e salve.

Atenciosamente,
Izzy.
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:12
Ele cria um widget normal...

Eu quero que mostre as mensagens privadas.
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:25
Olá novamente,

Senhor os passos indicados, dão o resultado no Menu de Navegação do seu Fórum.
Ajudantes Passo 1: Agora o HTML; cPainel Ajudantes Portal & Widgets Ajudantes Gestão dos Widgets do Fórum ou do Portal Ajudantes Configuração Criar um novo widget personalizado
Mas vamos tentar o seguinte;

Código:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Menu Drop Down</title> 
        <link rel="stylesheet" type="text/css" href="menu.css"/>
        <script type="text/javascript" src="menu.js"></script>
    </head>
    <body>
        <ul id="nav-menu">
            <li><a href="">Página Inicial</a></li>
            <li><a href="">Serviços</a></li>
            <li class="submenu">
                <span>Portfólio</span>
                <ul>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                </ul>
            </li>
            <li class="submenu">
                <span>Quem Somos</span>
                <ul>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                    <li><a href="">Lorem Ipsun</a></li>
                </ul>
            </li>
            <li><a href="">Contato</a></li>
        </ul>     
        <script type="text/javascript">           
           
            //Cria um objeto menu, passando como paramentro o ID da UL da
            // navegação principal.
            var menu = new Menu('nav-menu');                     
           
        </script>
    </body>
</html>


No final do HTML é só instanciar um novo objeto Menu passando como parâmetro o id do menu de navegação principal.

Obs: Por nos 'LI's que servirão de submenus a classe submenu.


ID Navegação Principal -> nav-menu
Classe para submenu -> submenu


Ajudantes Passo 2: Agora o CSS; cPainel Ajudantes Visualização Ajudantes Imagens e Cores Ajudantes Cores Ajudantes Folha de Estilo CSS

/* ESTRUTURA */

*{
margin:0;
padding:0;
}

#nav-menu{
overflow: hidden;
}

#nav-menu li{
display:inline-block;
float:left;
}

#nav-menu li a, #nav-menu li span{
padding:10px;
display:block;
text-decoration: none;
cursor:pointer;
}

#nav-menu li.submenu ul{
position: absolute;
display:block;
width:220px;
display:none;
}

#nav-menu li.submenu ul li{
float:none;
display:block;
}

/* DESIGN */

/* Cor de fundo do Menu Principal de Navegação*/
#nav-menu{
background: red;
}

/*Cor da fonte do menu*/
#nav-menu a, #nav-menu span{
color:#FFF;
}

#nav-menu a:hover, #nav-menu span:hover, #nav-menu li:hover{
background: #750000;
color: #FF4848;
}

/* Cor de fundo do submenu */
#nav-menu li.submenu ul{
background: #FF4848;
}

/*Cor da fonte do submenu*/
#nav-menu li.submenu a{
color:#750000;
}

#nav-menu li.submenu a:hover{
background:#FF1C1C;
color:#FFF;
}

Ajudantes Passo 3: Agora o JS; cPainel Ajudantes Módulos Ajudantes HTML & JAVASCRIPT Ajudantes Gestão dos Códigos JavaScript e Adicionar Criar um novo javascript

Código:
function Menu(id){
    //Id do menu de navegação
    this.id = id;
    //Tag que irá servir de titulo do submenu
    this.submenuTitleTag = 'span';
    //Classe usada no LI para dizer que é um submenu
    this.submenuClass = 'submenu';
               
    //Funções e operações iniciadas ao criar o objeto
    this.construtor = function(){
        this.submenuTitleTag = this.submenuTitleTag.toUpperCase();
        this.getmenu();
    }
               
    //Seleciona e adiciona os eventos aos submenus
    this.getmenu = function (){                   
        //Seleciona todos os LI do menu de navegação
        var tags = document.getElementById(this.id).getElementsByTagName("li");
        //Verifica um por um pra saber se possui submenu ou não
        for(var i=0;i<tags.length;i++){
            if(tags[i].className == this.submenuClass){
                           
                tags[i].onmouseover = function(){
                    this.getElementsByTagName('ul')[0].style.display = "block";                     
                }
                           
                tags[i].onmouseout = function(){
                    this.getElementsByTagName('ul')[0].style.display = "none";                     
                }                                                     
            }
        }
    }
               
    //Inicializa o objeto
    this.construtor();         
               
}

Atenciosamente,
Izzy.


Última edição por Izzy em Sab 9 Jun - 20:31, editado 1 vez(es)
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:29
Não resultou -.-
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:31
Olá Senhor,

A conclusão nisto é que os códigos funcionam apenas na Versão PunBB. Lamento.

Até mais.
avatar
Membro iniciante
Masculino
Idade : 20
PointActif's : 1930
ReputActifs : 1
Mensagens : 40
Inscrição : 16/05/2012

100%
Ver perfil do usuáriohttp://br-designerforever.forumeiros.com/

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:32
Ok, mais eu falei no começo, que minha versão era PHPBB 3 -.-

Fecha...
avatar
Membro em destaque
Masculino
Idade : 20
PointActif's : 2070
ReputActifs : 5
Mensagens : 195
Inscrição : 26/05/2012

100%
Ver perfil do usuário

Resolvido Re: Mensagens Privadas

em Sab 9 Jun - 20:34
Firenando escreveu:Ok, mais eu falei no começo, que minha versão era PHPBB 3 -.-

Fecha...

Olá novamente Senhor,

Sim, mas no outro tópico. Neste o senhor não esclareceu sua versão. Mesmo assim, peço desculpa pelo transtorno.

Até mais.
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum