Efeito de nova mensagem privada

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

Olá!

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

Hancki

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.

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:

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.

Olá!

Adicione este novo CSS:

Código:

[data-counter]:after, .hasNotifications {
    z-index: 1000 !important;
}

Deu?

Hancki

Olá,

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

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

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.

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

Olá,

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

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

Olá,

Foi colocado!

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

Olá,

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

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

Olá,

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

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: https://ajuda.forumeiros.com/t89847-efeito-de-nova-mensagem-privada#611606 ?

JS

Olá,

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

- http://pastebin.com/tmr4HB1s

Agradecia!

Olá!
Consegui o seguinte em meu navegador:

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

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!

Olá,

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

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?

Olá,

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

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

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., 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.

Olá,

E tinha colocado ...

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

Olá,

Não consegue resolver o que o JScrpit disse ?

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.

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

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é!

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!

UP - URGENTE MESMO!

UP

UP

UPPPPPPPPPPPPPPPPP!