ajuda com aparencia do bbcode

Detalhes da questão

Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição

Bom, eu adicionei um BBCODE no meu fórum, e ele fica dessa forma:
Particularmente eu acho MUITO FEIO: http://prntscr.com/hn5qv4

Gostaria de saber como fazer um parecido com esse, com a borda mais escura, o centro claro, a imagem do lado esquerdo e o texto no meio.
http://prntscr.com/hn5r8s
Fórum em que vi: https://ajuda.forumeiros.com/t111011-pesquisa-de-satisfacao-2017#782764

agradeço desde já !

Vá ao seu css e localize

Código:

.alert, .success, .information, .warn {
  padding: 15px;
  width: 85%;
  border: 1px solid;
  margin: 3px 0;
  -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);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font: 13px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.alert > p, .success > p, .information > p, .warn > p {
  font-weight: bold;
  font-size: 14px;
}
.warn {
  background-color: #F2DEDE;
  border-color: #D3949E;
  color: #A94442;
}


e mude para

Código:

.alert, .success, .information, .warn {
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid;
    text-align: left;
}
.alert > p, .success > p, .information > p, .warn > p {
  font-weight: bold;
  font-size: 14px;
}
.warn {
  color: #e53935;
    background-color: #e5393552;
    border-color: #e53935;
}



Eu posso personalizar mais, se você passa-me o js em uso

http://prntscr.com/hn96sf

ficou dessa forma, como faz pra eu deixar uma imagem GRANDE do lado esquerdo e o texto do lado da imagem?
http://prntscr.com/hn5r8s

O JS é esse

Código:

/***
 * Aplicação: Criar tags BBCode
 * Descrição: Esta aplicação serve para a criação de novas tags bbcode.
 * Versão: 2.0
 * Feito por Daemon e atualizado em: 26/09/2016
 * Veja mais em: http://ajuda.forumeiros.com
 ***/
jQuery(document).ready(function($) {
 
    var bbCodes = {
 
        // Nota: Adicione uma vírgula ao final de cada nova entrada;
        // O "{ATTR}" é correspondente ao 'título' da tag, e o "{CONTENT}" é correspondente ao texto entre as tags
 
        sucesso: {
            close: true,
            replacement: '<div class="success"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        aviso: {
            close: true,
            replacement: '<div class="warn"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        info: {
            close: true,
            replacement: '<div class="information"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        alerta: {
            close: true,
            replacement: '<div class="alert"><p>{ATTR}</p>{CONTENT}</div>'
        },
 
        visitante: {
            close: true,
            replacement: '<div class="guest">{CONTENT}</div>',
            replace: function(content) {
                if (_userdata.session_logged_in < 1) {
                    return "Você precisa estar conectado para visualizar este conteúdo";
                    return content;
                }
            }
        }
 
        // Nota: Não adicione vírgula ao final da última entrada
 
    };
 
    var getPost = $(".postbody , .blog_message"); //pega as postagens
    for (var i = 0, e;
        (e = getPost[i++]);) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
 
            var re = value.close ? new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]", "gi");
            var match = entry.html().match(re);
 
            if (match) {
                for (var tag in match) {
                    var content = match[tag];
                    var b = "$3";
 
    };
                    if (value.replace) {
                        var as_string = value.replace.toString();
                        var as_func = eval('(' + as_string + ')');
                        if (as_func(content)) b = as_func(content);
                    }
                    var replacement = value.replacement
                        .replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c));
                }
            }
        });
    }
});

up

Ponha isto do seu css

Código:

.bbcode_alerts {
 background-repeat: no-repeat;
   background-position: 10px 50%;
   padding: 35px 20px 35px 120px;
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid;
    text-align: left;
}
.bbcode_alerts strong {
 text-transform: uppercase
}
.bbcode_alerts a {
 text-transform: underline
}
.bbcode_alerts.warn {
    background-image: url( );
    color: #e53935;
    background-color: #e5393552;
    border-color: #e53935;
}
.bbcode_alerts.success {
    background-image: url( );
    color: #84C754;
    background-color: #FFE6E2;
    border-color: #84C754;
}
.bbcode_alerts.information {
    background-image: url( );
    color: #64b5f6;
    background-color: #e3f2fd;
    border-color: #64b5f6;
}
.bbcode_alerts.alert {
    background-image: url( );
    color: #ffa726;
    background-color: #ffe0b2;
    border-color: #ffa726;
}


e mude o seu js para

Código:

/***
 * Aplicação: Criar tags BBCode
 * Descrição: Esta aplicação serve para a criação de novas tags bbcode.
 * Versão: 2.0
 * Feito por Daemon e atualizado em: 26/09/2016
 * Veja mais em: http://ajuda.forumeiros.com
 ***/
jQuery(document).ready(function($) {
 
    var bbCodes = {
 
        // Nota: Adicione uma vírgula ao final de cada nova entrada;
        // O "{ATTR}" é correspondente ao 'título' da tag, e o "{CONTENT}" é correspondente ao texto entre as tags
 
        sucesso: {
            close: true,
            replacement: '<div class="bbcode_alerts success"><strong>{ATTR}</strong>{CONTENT}</div>'
        },
 
        aviso: {
            close: true,
            replacement: '<div class="bbcode_alerts warn"><strong>{ATTR}</strong>{CONTENT}</div>'
        },
 
        info: {
            close: true,
            replacement: '<div class="bbcode_alerts information"><strong>{ATTR}</strong>{CONTENT}</div>'
        },
 
        alerta: {
            close: true,
            replacement: '<div class="bbcode_alerts alert"><strong>{ATTR}</strong>{CONTENT}</div>'
        },
 
        visitante: {
            close: true,
            replacement: '<div class="guest">{CONTENT}</div>',
            replace: function(content) {
                if (_userdata.session_logged_in < 1) {
                    return "Você precisa estar conectado para visualizar este conteúdo";
                    return content;
                }
            }
        }
 
        // Nota: Não adicione vírgula ao final da última entrada
 
    };
 
    var getPost = $(".postbody , .blog_message"); //pega as postagens
    for (var i = 0, e;
        (e = getPost[i++]);) {
        var entry = $(e);
        $.each(bbCodes, function(tag, value) {
 
            var re = value.close ? new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]([\\s\\S]*?)\\[/" + tag + "]", "gi") : new RegExp("\\[" + tag + "(?:=(\"|'?)([^\\]]+)\\1)?\\]", "gi");
            var match = entry.html().match(re);
 
            if (match) {
                for (var tag in match) {
                    var content = match[tag];
                    var b = "$3";
 
    };
                    if (value.replace) {
                        var as_string = value.replace.toString();
                        var as_func = eval('(' + as_string + ')');
                        if (as_func(content)) b = as_func(content);
                    }
                    var replacement = value.replacement
                        .replace(/{ATTR}/g, "$2").replace(/{CONTENT}/g, b);
                    var c = content.replace(re, replacement);
                    entry.html(entry.html().replace(content, c));
                }
            }
        });
    }
});


No CSS você pode pôr a imagem que você quer dentro do
background-image: url( );


fale-me se ficou bem, porque eu não testei

Fiz dessa forma, já tinha na CSS algo de um BBCOD antigo, tem que retirar para não dar interferencia?

eu editei essa parte

Código:


.bbcode_alerts.warn {
    background-image: url(https://i.imgur.com/ZtIbsxI.png);
    color: #e53935;
    background-color: #e5393552;
    border-color: #e53935;
}

Mas não resultou em nada, poderia me auxiliar para saber como eu utilizo os comandos?

Mudou o js?


Vou dar uma explicação do script

O nome da tag

Código:

sucesso: {

Se você que fechar a tag por exemplo [bbcode=título]texto[/bbcode]

Código:

close: true,

Quando você não quer fechar a tag, para js pré definidos, tipo iframe etc, exemplo [iframe=titulo]

Código:

close: false;

As variáveis, ATTR = titulo e o Content = texto

Código:

{ATTR}
{CONTENT}

Este será o valor do BBCode, usa-se somente html.

Código:

replacement: '<div class="bbcode_alerts success"><strong>{ATTR}</strong>{CONTENT}</div>'

Obrigado pela ajuda, mas não to conseguindo utilizar.

Pode fechar!