Botoes caixa-de-alertas Sáb 4 Jan 2014 - 12:50
Qual é minha questão:
Ola li este topico: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
e deu certo os downloads
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Adicionei a ccs:
e criei os dois JS:
e depois de enviar fica assim veja o exemplo no PRINT
Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão:
PunBB
Ola li este topico: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
e deu certo os downloads
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Adicionei a ccs:
- Código:
/* Action Notice ---------------------------------------- */
.sucesso, .infos, .aviso, .alerta {
background: url(http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
width: 83%;
font-weight: normal;
font-style: normal;
font-size: 13px;
margin: 15px;
padding: 13px 15px 0;
margin-bottom: 2.5em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
position: relative;
left: 34px;
}
.sucesso h5, .infos h5, .aviso h5, .alerta h5 {
font-size: 14px;
font-weight: bold;
margin-bottom: .65em;
}
.sucesso p, .infos p, .aviso p, .alerta p {
margin-bottom: 1.3em;
}
.infos {
background-color: #C6D8F0;
color: #285797;
border: 1px solid #4381CD;
}
.sucesso {
background-color: #EEF4D4;
color: #596C26;
border: 1px solid #8FAD3D;
}
.aviso {
background-color: #FFEA97;
color: #796100;
border: 1px solid #E1B500;
}
.alerta {
background-color: #EFCEC9;
color: #933628;
border: 1px solid #AE3F2F;
}
.sucesso span, .infos span, .aviso span, .alerta span {
background: url(http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0;
width: 33px;
height: 40px;
position: absolute;
left: -34px;
top: 9px;
}
.alerta span {
background-position: 100% -400px;
}
.sucesso span {
background-position: 100% 0;
}
.infos span {
background-position: 100% -1200px;
}
.aviso span {
background-position: 100% -800px;
}
.quadrado_box {
background: #FFF url(http://i50.tinypic.com/2uqsx.png) repeat-x bottom;
padding: 10px;
border: 1px solid #c5c5c5;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-box-shadow: inset 0px 2px 4px rgba(0,0,0,0.15);
font-style: normal;
font-weight: normal;
width: 95%;
}
.hideTB {
margin: 5px;
background-color: #f3e3e6;
display: block;
padding: 10px;
border: 1px solid #e599aa;
font-size: 12px;
color: #80001c;
}
.guest {
background-color: #F3E3E6;
border: 1px solid #E599AA;
color: #80001C;
padding: 10px;
display: block;
margin: 15px;
font-size: 11px;
}
.main-content.standalone .button {
background-color: #FAFAFA;
background-image:url(http: http://2img.net/i/fa/prosilver/bg_button.gif);
background-position: top;
background-repeat: repeat-x;
border: 1px solid #BCBCBC;
border-radius: 3px;
color: #000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: .9em;
margin: 0 .25em;
overflow: visible;
padding: 5px;
vertical-align: middle;
width: auto!important }
.alerta,.aviso,.info,.sucess {
-moz-border-radius: 6px;
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.4);
background:url(http: http://img638.imageshack.us/img638/4026/noticebg.png) repeat-x 0 0;
border-radius: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,.4);
font-size: 13px;
font-style: normal;
font-weight: 400;
left: 34px;
margin: 15px 15px 2.5em;
padding: 13px 15px 0;
position: relative;
width: 83% }
.info {
background-color: #C6D8F0;
border: 1px solid #4381CD;
color: #285797 }
.sucess {
background-color: #EEF4D4;
border: 1px solid #8FAD3D;
color: #596C26 }
.aviso {
background-color: #FFEA97;
border: 1px solid #E1B500;
color: #796100 }
.alerta {
background-color: #EFCEC9;
border: 1px solid #AE3F2F;
color: #933628 }
.i-alerta,.i-aviso,.i-info,.i-sucess {
background:url(http: http://img59.imageshack.us/img59/9923/noticetabs.png) no-repeat 100% 0;
height: 40px;
left: -34px;
position: absolute;
top: 9px;
width: 33px }
.i-alerta { background-position: 100% -400px }
.i-sucess { background-position: 100% 0 }
.i-info { background-position: 100% -1200px }
.i-aviso { background-position: 100% -800px }
.quadrado_box {
-moz-border-radius: 6px;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
-webkit-border-radius: 6px;
background:#fff url(http: http://i50.tinypic.com/2uqsx.png) repeat-x bottom;
border: 1px solid #c5c5c5;
font-style: normal;
font-weight: 400;
padding: 10px;
width: 100% }
input#option,textarea#content {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: #FCFCFC;
border: 1px solid #AAA;
border-radius: 2px;
font-family: "Helveticae Neue", Helvetica, Arial, sans-serif;
padding: 4px }
e criei os dois JS:
- Código:
(function(){var f={bbcodes:{},basics:[],attrReg:/.*?=("|'|)(.*?)\1\]/,parseTag:function(a,b,d){return a.replace(d?RegExp("(\\["+b.tag+"[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/"+b.tag+"]","g"+(b.insensitive?"i":"")):RegExp("\\["+b.tag+"[^\\]]*\\]","g"+(b.insensitive?"i":"")),function(a,c,e){d||(c=a);c=f.attrReg.test(c)?c.replace(f.attrReg,"$2"):b.defaultAttr;if(b.validate&&!(d?b.validate(e,c):b.validate(c)))return a;b.replace&&(a=d?b.replace(e,c):b.replace(c),"string"===typeof a?d?e=a:c=a:a&&"object"===typeof a&&(e=a.content||e,c=a.attr||c));return f.swapReplacers(b.replacement,e,c)})},swapReplacers:function(a,b,d){return(a||"").replace(/{CONTENT}/g,b||"").replace(/{ATTR}/g,d||"")},parse:function(a){for(var b=f.bbcodes,d=f.basics,g=0,c;c=d[g++];){var e=c[0];if("string"===typeof e)for(;-1!==a.indexOf(e);)a=a.replace(e,c[1]);else a=a.replace(e,c[1])}for(var h in b)(d=b[h])&&(d.replacement&&d.tag)&&(a=f.parseTag(a,d,d.close));return a},add:function(a,b){if(!/^\w+$/.test(a))throw new Exception("MBB Tag invalida: "+a);b.tag||(b.tag=a);"close"in b||(b.close=!1);f.bbcodes[a]=b},addSwap:function(a,b){f.basics.push([a,b])}};window.MBB=f})();
$(function(){
var p = $('.post .entry-content , .a3d_1 .a3d_1_content'); //pega as postagens
for(var i = 0, e; (e = p[ i++ ]); ) {
var text = e.innerHTML; //pega o texto que queremos analisar. (o innerHTML de mensagens)
text = MBB.parse(text); //dar a MBB para analisar.
e.innerHTML = text; //re-inserir o texto analisado
}
});
MBB.add('offtopic', {
close: true,
replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'
});
MBB.add('sucesso', {
close : true,
replacement : '<div class="sucesso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('aviso', {
close : true,
replacement : '<div class="aviso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('infos', {
close : true,
replacement : '<div class="infos"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('alerta', {
close : true,
replacement : '<div class="alerta"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('quadrado', {
close : true,
replacement : '<div class="quadrado_box"><strong>{ATTR}</strong><br><img src="http://i50.tinypic.com/2lxicrn.png" title="XXXXXX" /><br>{CONTENT}</div>'
});
MBB.add('guest', {
close : true,
replacement : '<span class="guest">{CONTENT}</span>',
replace : function(content) {
if(!document.getElementById('logout')) return 'Você vai ser capaz de ver o conteúdo assim que efetuar o seu registro no fórum. ';
return content;
}
});
- Código:
(function(){var f={bbcodes:{},basics:[],attrReg:/.*?=("|'|)(.*?)\1\]/,parseTag:function(a,b,d){return a.replace(d?RegExp("(\\["+b.tag+"[^\\]]*\\])((?:.|\\r?\\n)*?)\\[/"+b.tag+"]","g"+(b.insensitive?"i":"")):RegExp("\\["+b.tag+"[^\\]]*\\]","g"+(b.insensitive?"i":"")),function(a,c,e){d||(c=a);c=f.attrReg.test(c)?c.replace(f.attrReg,"$2"):b.defaultAttr;if(b.validate&&!(d?b.validate(e,c):b.validate(c)))return a;b.replace&&(a=d?b.replace(e,c):b.replace(c),"string"===typeof a?d?e=a:c=a:a&&"object"===typeof a&&(e=a.content||e,c=a.attr||c));return f.swapReplacers(b.replacement,e,c)})},swapReplacers:function(a,b,d){return(a||"").replace(/{CONTENT}/g,b||"").replace(/{ATTR}/g,d||"")},parse:function(a){for(var b=f.bbcodes,d=f.basics,g=0,c;c=d[g++];){var e=c[0];if("string"===typeof e)for(;-1!==a.indexOf(e);)a=a.replace(e,c[1]);else a=a.replace(e,c[1])}for(var h in b)(d=b[h])&&(d.replacement&&d.tag)&&(a=f.parseTag(a,d,d.close));return a},add:function(a,b){if(!/^\w+$/.test(a))throw new Exception("MBB Tag invalida: "+a);b.tag||(b.tag=a);"close"in b||(b.close=!1);f.bbcodes[a]=b},addSwap:function(a,b){f.basics.push([a,b])}};window.MBB=f})();
$(function(){
var p = $('.post .entry-content , .a3d_1 .a3d_1_content'); //pega as postagens
for(var i = 0, e; (e = p[ i++ ]); ) {
var text = e.innerHTML; //pega o texto que queremos analisar. (o innerHTML de mensagens)
text = MBB.parse(text); //dar a MBB para analisar.
e.innerHTML = text; //re-inserir o texto analisado
}
});
MBB.add('offtopic', {
close: true,
replacement: '<div style="padding: 3px; float: right; border: 1px solid; font-size: 0.8em">Off Topic: {CONTENT}</div>'
});
MBB.add('sucesso', {
close : true,
replacement : '<div class="sucesso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('aviso', {
close : true,
replacement : '<div class="aviso"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('infos', {
close : true,
replacement : '<div class="infos"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('alerta', {
close : true,
replacement : '<div class="alerta"><h5>{ATTR}</h5><p>{CONTENT}</p><span></span></div>'
});
MBB.add('quadrado', {
close : true,
replacement : '<div class="quadrado_box"><strong>{ATTR}</strong><br><img src="http://i50.tinypic.com/2lxicrn.png" title="XXXXXX" /><br>{CONTENT}</div>'
});
MBB.add('guest', {
close : true,
replacement : '<span class="guest">{CONTENT}</span>',
replace : function(content) {
if(!document.getElementById('logout')) return 'Você vai ser capaz de ver o conteúdo assim que efetuar o seu registro no fórum. ';
return content;
}
});
e depois de enviar fica assim veja o exemplo no PRINT
Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Versão:
PunBB
![[K]oke](https://i.imgur.com/07ALhxb.png)
geral 
