Efeito de nova mensagem privada

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

Resolvido Efeito de nova mensagem privada

Mensagem por IsmaelS. em 26/02/14, 03:13 pm

Qual é minha questão:
Olá,

Um amigo meu me passou um efeito para mostrar novas mensagens privadas aparecer um número de aviso e utilizou os seguintes códigos:

JavaScritp - Em todas as páginas:
Código:
$(function(e) {
var mp = document.getElementById('i_icon_mini_new_message');if(!mp) return;
var mps = $(mp).attr("alt").match(/[0-9]+/);
$('li a[href^="/privmsg"]').attr('data-counter', ''+mps+'');
});

.CSS:
Código:
[data-counter]:after, .hasNotifications {
    background-color: #CF2020;
    background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
    background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
    content: attr(data-counter);
    position: absolute;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.1) inset;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    border-radius:2px;
    background-clip: padding-box;
    font:bold 10px "Helvetica Neue", sans-serif; 
    color: white;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,.6);
    padding: 5px;
    margin-top: -3px;
    vertical-align: top;
    height: 6px;
    line-height: 6px;
}

Se quiserem verificar vejam: www.rewtec.com

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

Versão do fórum:
PUNBB


Última edição por IsmaelS. em 09/03/14, 04:20 pm, editado 1 vez(es)

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Hancki em 26/02/14, 05:42 pm

Olá!

É uma dúvida ou uma espécie de tutorial?

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 26/02/14, 07:40 pm

Olá,

É dúvida, desculpa não ter mencionado, é que quando coloquei esses códigos não resulta no meu fórum, avio que também uso o efeito do meu Menu de Navegação com código jS.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Shek em 26/02/14, 09:06 pm

Boa noite!

Ismael, tente usar este novo código:
Código:
$(function(e){var mp=document.getElementById('i_icon_mini_new_message');if(!mp)return;var mps=$(mp).attr("alt").match(/[0-9]+/);$('li a[href^="/privmsg"]').attr('data-counter',''+mps+'')});
Eu consegui obter o resultado informado:


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17141
Pontos Ativos : 21403

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 02/03/14, 10:15 pm

Olá,

Já sei qual é o problema caro amigo, é que eu uso o efeito de Menu de Navegação em código jS. e tapa o efeito, se conseguir sei lá colocar por cima ou subir mais para cima agradecia.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Hancki em 03/03/14, 12:49 pm

Olá!

Adicione este novo CSS:
Código:
[data-counter]:after, .hasNotifications {
    z-index: 1000 !important;
}
Deu?

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 03/03/14, 01:24 pm

Olá,

Continua igual, fica por trás do menu de navegação.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Hancki em 04/03/14, 10:04 am

Poderia mostrar como fica, com uma imagem?
Fiz o registro no seu fórum, me envie uma MP lá para eu eu veja o problema no seu fórum.

Hancki
avatar

Hancki
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 03/10/2009
Mensagens : 8047
Pontos Ativos : 12032

Ver perfil do usuário http://programacaoweb.forumeiros.com/ https://www.facebook.com/djtomoficial https://www.facebook.com/djtomoficial

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 04/03/14, 10:43 am

Olá,

Ao se registar já vai receber uma PM, mas veja enviei uma a mim próprio devia ter algum aviso mas veja como fica:


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por JScript em 04/03/14, 11:57 am

@IsmaelS.

Olá, peço à você que modifique esta funcionalidade abaixo:


E deixe liberado o envio de MPs para que eu possa realizar testes ok?


Edit:

Para piorar mais ainda a situação, está faltando o seguinte bloco HTML:


Sem esse bloco, nenhum código para ter esse efeito irá funcionar!!!

Para contornar isso, terás que editar o template Overall_header, procure pela tag <div class="pun"> e adicione abaixo dela o seguinte código:
Código:

                        <div id="pun-head" style="display: none;">
                            <div id="pun-navlinks">
                                <ul class="clearfix">
                                    <li>{GENERATED_NAV_BAR}</li>
                                </ul>
                            </div>
                        </div>

Deverá ficar da seguinte forma:


Daremos continuidade quando você atender os requisitos acima,

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 04/03/14, 12:30 pm

Olá,

Mensagens Privadas liberadas, mas veja o que acontece ao ativar o código:


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por JScript em 04/03/14, 12:44 pm

Ou você edita o template Overall_header da forma que mencionei acima, ou será impossível de lhe ajudar!

Não se preocupe com a forma que irá ficar, deixaremos do jeito que você deseja.

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 04/03/14, 01:18 pm

Olá,

Foi colocado!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por JScript em 04/03/14, 02:23 pm

Ok!

Veja na imagem abaixo que está funcionando perfeitamente:
Spoiler:

Porém, faz-se necessário que deixe a estrutura do template na seguinte ordem:


Em seguida, adicione o CSS abaixo:
Código:

#pun-head {
  display: none !important;
}

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 04/03/14, 02:36 pm

Olá,

Coloquei o .CSS mas continua no topo o Menu de Navegação.

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por JScript em 04/03/14, 08:21 pm

Vou repetir amigo:
@JScript escreveu:Porém, faz-se necessário que deixe a estrutura do template na seguinte ordem:

Em outras palavras, a atual forma é a da imagem abaixo, apenas mova o que está selecionado para baixo de pun-head

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 04/03/14, 08:54 pm

Olá,

Estou na zona de overall_header e a classe "<div class="pun-head"> não é encontrada ...

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por JScript em 04/03/14, 09:15 pm

Amigo, não é <div class="pun-head"> e sim <div id="pun-head">

No meu template tem, o seu é que não tinha e eu disse que você adicionasse, lembra: http://ajuda.forumeiros.com/t89847-efeito-de-nova-mensagem-privada#611606 ?

JS
avatar

JScript
Membro do Fórum

Masculino
Inscrito dia : 14/03/2013
Mensagens : 1449
Pontos Ativos : 1900

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 04/03/14, 09:26 pm

Olá,

Não consegui bem ainda ficou pior será que poderia-me resolver esse problema ?:

- http://pastebin.com/tmr4HB1s

Agradecia!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 03:17 pm

Olá!
Consegui o seguinte em meu navegador:

Caso queira aplicar em seu fórum, procure em seu CSS:

Código:
#cssmenu {
background: #333;
border: 0;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Trebuchet MS, sans-serif;
font-size: 12px;
margin: 0 0 0 -5px;
padding: 0;
width: 102%;
}

Modifique o código #cssmenu por este:
Código:
#cssmenu {
background: #333;
border: 0;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Trebuchet MS, sans-serif;
font-size: 12px;
margin: 0 0 0 -5px;
padding: 0;
position:absolute;
top: 230px;
width: 1010px;
}

Até mais! Piscada
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 03:37 pm

Olá,

Mas quero colocar o Menu de Navegação por baixo do Logo mesmo não das Redes Sociais

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 04:07 pm

O que acha?


Modificações de códigos CSS

Corpo:
Código:
#page-body {
margin: 30px 0;
width: 100%;
}

Menu:
Código:
#cssmenu {
background: #333;
border: 0;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Trebuchet MS, sans-serif;
font-size: 12px;
margin: 0 0 0 -5px;
padding: 0;
width: 1010px;
position: absolute;
top: 200px;
}

Redes Socias(userbar):
Código:
#userbar {
background: #fafafa;
border-bottom: 1px solid #ddd;
clear: both;
font-family: Oxygen, sans-serif;
height: 56px;
padding: 0 10px;
text-transform: uppercase;
position: absolute;
width: 980px;
top: 252px;
}

Resulta?
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 04:33 pm

Olá,

Terei que modificar esses campos na .CSS? Ou adicionar ?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 04:40 pm

Desculpe não informar  Tonto
Terá somente que modificar os campos na folha de estilo CSS.
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 05:04 pm

Olá,

Veja como ficou:



Não consegue fazer o que o JScript pediu em cima na overall_header aqui fica o código:

- http://pastebin.com/tmr4HB1s

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 05:07 pm

IsmaelS., você esqueceu de um código...
Adicione ou edite o código:
Código:

#page-body {
margin: 30px 0;
width: 100%;
}
Na parte "margin: 30px 0;", edite o valor em 30px até que fique de acordo.


Última edição por sasuky em 05/03/14, 05:10 pm, editado 1 vez(es)
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 05:08 pm

Olá,

E tinha colocado ...

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 05:12 pm

Deixe os códigos ativos em seu fórum.
Assim posso visualizar e achar o erro.
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 05:13 pm

Olá,

Não consegue resolver o que o JScrpit disse ?

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 05:32 pm

Não compreendi exatamente o que o JScript quis dizer... Enfim, vamos optar novamente ao CSS.

Procure na folha de estilo o código
Código:

#pun-intro {
background: url(http://wallpaperspoints.com/wp-content/uploads/2013/05/Cool-Windows-8-pc-wallpaper.jpg) center 30%;
background-repeat: repeat-x;
border-bottom: 6px solid #76bd27;
border-top: 6px solid #e2ab05;
height: 85px;
margin-left: -5px;
margin-top: 20px;
padding: 1.5em 1em 1em;
text-align: left;
width: 100%;
}
Modifique este código por este:
Código:
#pun-intro {
background: url(http://wallpaperspoints.com/wp-content/uploads/2013/05/Cool-Windows-8-pc-wallpaper.jpg) center 30%;
background-repeat: repeat-x;
border-bottom: 6px solid #76bd27;
border-top: 6px solid #e2ab05;
height: 120px;
margin-left: -5px;
margin-top: 20px;
padding: 1.5em 1em 1em;
text-align: left;
width: 100%;
}

Lembre-se de deixar os códigos que passei ativos.
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 05:34 pm

Olá,

Está quase falta agora colocar a caixa de mensagem Home Page mais para baixo pois está muito em cima da barra de Redes Sociais

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por Troubleshoot em 05/03/14, 05:37 pm

sasuky escreveu:
Edite o código:
Código:

#page-body {
margin: 30px 0;
width: 100%;
}
Na parte "margin: 30px 0;", edite o valor em 30px até que fique como desejado.


Até!
avatar

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2197
Pontos Ativos : 2940

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

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 08:29 pm

Olá,

Não dá para fazer um backup do overall_header? É que tive a reparar e o tema ficou muito "estragado" como na parte do footer e algumas partes que não me agradam!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 05/03/14, 10:59 pm

UP - URGENTE MESMO!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 06/03/14, 04:21 pm

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 07/03/14, 01:20 pm

UP

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Efeito de nova mensagem privada

Mensagem por IsmaelS. em 08/03/14, 01:57 pm

UPPPPPPPPPPPPPPPPP!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

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