Boas-vindas ao Power Pixel

Junte-se a comunidade! Crie o seu próprio conteúdo, e faça amizades.EntrarCriar uma conta

Notificações desta maneira

3 participantes

Início :: Forumeiros :: NostalgiaNotificações desta maneira

GyGu GyGu  • Qua 23 Out 2013 - 11:42

Notificações desta maneira Empty Notificações desta maneira Qua 23 Out 2013 - 11:42

Qual é minha questão:
Olá!

Eu antes tinha num fórum as notificações da maneira que é apresentado na imagem a baixo, queria pelo menos as mensagens privadas que aparecessem assim.

Sei que tem código JS e CSS (o Deamon sabe esse código)


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Daemon Daemon  • Qua 23 Out 2013 - 13:08

Notificações desta maneira Empty Re: Notificações desta maneira Qua 23 Out 2013 - 13:08

Cria um novo JS com investimento em todas as páginas e adiciona:
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+'');
});
Depois adiciona em teu css:
Código:
[data-counter]:after {
    background-color: #FF6969;
    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;
    padding: 2px 6px;
    border: 2px solid white;
    border-radius:100px;
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
    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);
    margin-left: -10px;
    margin-top: -10px;
}​
Até mais!

GyGu GyGu  • Qua 23 Out 2013 - 13:47

Notificações desta maneira Empty Re: Notificações desta maneira Qua 23 Out 2013 - 13:47

Estranho, já fiz o teste cerca de 3 vezes e não surge nada, só aquele pop up de nova mensagem que já vem com o fórum. O que poderá ser?

GSCode GSCode  • Qua 23 Out 2013 - 17:12

Notificações desta maneira Empty Re: Notificações desta maneira Qua 23 Out 2013 - 17:12

Olá,

Você deve possuir um Script que faça o mesmo / parecido efeito com esse...
E está dando conflito entre os 2!
@OFF:
Daemon preciso falar com você, Contate-me por Mensagem Privada...

Até +.

GyGu GyGu  • Seg 4 Nov 2013 - 6:39

Notificações desta maneira Empty Re: Notificações desta maneira Seg 4 Nov 2013 - 6:39

Estou a utilizar o código CSS que me passaste a cima (o que está a baixo) e faz este efeito [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] tem com fazer este? [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] ? (só para o caso de um dia querer mudar)

E finalmente dei um Thanks a você Daemon pelo trabalho!!

Código:
[data-counter]:after {
    background-color: #FF6969;
    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;
    padding: 2px 6px;
    border: 2px solid white;
    border-radius:100px;
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
    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);
    margin-left: -10px;
    margin-top: -10px;
}​

GyGu GyGu  • Seg 4 Nov 2013 - 7:43

Notificações desta maneira Empty Re: Notificações desta maneira Seg 4 Nov 2013 - 7:43

Resolvido!

Conteúdo patrocinado  • 

Notificações desta maneira Empty Re: Notificações desta maneira

Início :: Forumeiros :: Nostalgia:: Notificações desta maneira
Permissões neste sub-fórum
Não podes responder a tópicos