Como personalizar barra do título do post ?

Bom galera da BestSkins eu gostaria de personalizar a barra do título da postagem deixando igual a da BestSkins Exemplo na print.

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

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

Agradeço Desde Já!

Davisnatsu escreveu:Olá,

Leia abaixo!
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Até Mais!

Código:


$(function(){
    var user = $(this).find('.username').html();
    $('.username').hide();
    $('.user-basic-info').prepend('<span class="user2">'+user+'</span>');
    $('head').append(
        '<style type="text/css">'+
        '.user2 {'+
    'border: 1px solid #ddd;'+
    'border-radius: 3px;'+
    'margin: 0 auto;'+
    'position: relative;'+
'}'+
'.user2 {'+
    'color: #2f2f2f;'+
    'display: block;'+
    'font-size: 1.2em;'+
    'font-weight: 700;'+
    'text-decoration: none;'+
    'top: 0;'+
'}'+
'.user2 {'+
  'background-color: #f7f7f7!important;'+
    'border-bottom: 1px solid #eee;'+
    'font-size: 13px;'+
    'font-weight: 400;'+
    'padding: 10px;'+
    'text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);'+
'}'+
       
'.infos {'+
    'margin-left: 200px;'+
'}'+
        '.pun .posthead {'+
    'background: none repeat scroll 0 0 #f7f7f7;'+
    'border-bottom: 1px dashed #ccc;'+
  'padding: 0.5em 1.3em 0.5em 1em;'+
        'border-bottom: none!important;'+
'}'+
        '</style>'
    );
});


Alex Habilidade escreveu:Olá, veja se lhe agrada,

Crie uma página javascript com investimento nos tópicos e adicione o código abaixo:

Código:


$(function(){
    var user = $(this).find('.username').html();
    $('.username').hide();
    $('.user-basic-info').prepend('<span class="user2">'+user+'</span>');
    $('head').append(
        '<style type="text/css">'+
        '.user2 {'+
    'border: 1px solid #ddd;'+
    'border-radius: 3px;'+
    'margin: 0 auto;'+
    'position: relative;'+
'}'+
'.user2 {'+
    'color: #2f2f2f;'+
    'display: block;'+
    'font-size: 1.2em;'+
    'font-weight: 700;'+
    'text-decoration: none;'+
    'top: 0;'+
'}'+
'.user2 {'+
   'background-color: #f7f7f7!important;'+
    'border-bottom: 1px solid #eee;'+
    'font-size: 13px;'+
    'font-weight: 400;'+
    'padding: 10px;'+
    'text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);'+
'}'+
        
'.infos {'+
    'margin-left: 200px;'+
'}'+
        '.pun .posthead {'+
    'background: none repeat scroll 0 0 #f7f7f7;'+
    'border-bottom: 1px dashed #ccc;'+
   'padding: 0.5em 1.3em 0.5em 1em;'+
        'border-bottom: none!important;'+
'}'+
        '</style>'
    );
});


Código:


   

    $(function() {
        $('.post').each(function() {
            var user2 = $(this).find('.username').html();
            $(this).find('.user-basic-info').prepend('<span class="user2">' + user2 + '</span>');
            $(this).find('.username').remove();
        });
        $('head').append(
            '<style type="text/css">' +
            '.user2 {' +
            'border: 1px solid #ddd;' +
            'border-radius: 3px;' +
            'margin: 0 auto;' +
            'position: relative;' +
            '}' +
            '.user2 {' +
            'color: #2f2f2f;' +
            'display: block;' +
            'font-size: 1.2em;' +
            'font-weight: 700;' +
            'text-decoration: none;' +
            'top: 0;' +
            '}' +
            '.user2 {' +
            'background-color: #f7f7f7!important;' +
            'border-bottom: 1px solid #eee;' +
            'font-size: 13px;' +
            'font-weight: 400;' +
            'padding: 10px;' +
            'text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);' +
            '}' +
            '.pun .posthead {' +
            'background: none repeat scroll 0 0 #f7f7f7;' +
            'border-bottom: 1px dashed #ccc;' +
            'padding: 0.5em 1.3em 0.5em 1em;' +
            'border-bottom: none!important;' +
            'width: 83.5%;' +
            'float: right;' +
            '}' +
   
            '</style>'
        );
    });




Código:

$(function() {
    $('.post').each(function() {
        var user2 = $(this).find('.username').html();
        $(this).find('.user-basic-info').prepend('<span class="user2">' + user2 + '</span>');
        $(this).find('.username').remove();
        var posth = $(this).find('.posthead');
        var postm = $(this).find('.postmain');
        posth.prependTo(postm);
    });
    $('head').append(
        '<style type="text/css">' +
        '.user2 {' +
        'border: 1px solid #ddd;' +
        'border-radius: 3px;' +
        'margin: 0 auto;' +
        'position: relative;' +
        '}' +
        '.user2 {' +
        'color: #2f2f2f;' +
        'display: block;' +
        'font-size: 1.2em;' +
        'font-weight: 700;' +
        'text-decoration: none;' +
        'top: 0;' +
        '}' +
        '.user2 {' +
        'background-color: #f7f7f7!important;' +
        'border-bottom: 1px solid #eee;' +
        'font-size: 13px;' +
        'font-weight: 400;' +
        'padding: 10px;' +
        'text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);' +
        '}' +
        '.pun .posthead {' +
        'background: #f7f7f7;' +
        'border: 1px solid #f0f0f0;' +
        'box-shadow: none;'+
        'border-bottom: none!important;' +
        'width: 98%;' +
        'float: right;' +
        '}' +
        '</style>'
    );
});

HeroWaar escreveu:Olá,

Aqui esta conforme pediu:

Código:

$(function() {
    $('.post').each(function() {
        var user2 = $(this).find('.username').html();
        $(this).find('.user-basic-info').prepend('<span class="user2">' + user2 + '</span>');
        $(this).find('.username').remove();
        var posth = $(this).find('.posthead');
        var postm = $(this).find('.postmain');
        posth.prependTo(postm);
    });
    $('head').append(
        '<style type="text/css">' +
        '.user2 {' +
        'border: 1px solid #ddd;' +
        'border-radius: 3px;' +
        'margin: 0 auto;' +
        'position: relative;' +
        '}' +
        '.user2 {' +
        'color: #2f2f2f;' +
        'display: block;' +
        'font-size: 1.2em;' +
        'font-weight: 700;' +
        'text-decoration: none;' +
        'top: 0;' +
        '}' +
        '.user2 {' +
        'background-color: #f7f7f7!important;' +
        'border-bottom: 1px solid #eee;' +
        'font-size: 13px;' +
        'font-weight: 400;' +
        'padding: 10px;' +
        'text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);' +
        '}' +
        '.pun .posthead {' +
        'background: #f7f7f7;' +
        'border: 1px solid #f0f0f0;' +
        'box-shadow: none;'+
        'border-bottom: none!important;' +
        'width: 98%;' +
        'float: right;' +
        '}' +
        '</style>'
    );
});

Se ajudei agradeça ao Alex (criador do codigo) apenas o modifiquei

Código:


.pun .postmain {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
position: relative;
}
.pun .postmain {
margin-left: 18em;
}
.pun .post, .pun .postbody, .pun .postmain {
background-color: #fff;
}
.pun .user-ident .username {
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 auto;
position: relative!important;
}
.pun .user-ident .username {
color: #2f2f2f;
display: block;
font-size: 1.2em;
font-weight: 700;
position: absolute;
text-decoration: none;
top: 0;
}
.pun .posthead, .pun .username {
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 400;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.pun .posthead, .pun .username {
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 400;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.pun .posthead {
background: #f7f7f7;
}
pun .postmain:after, .pun .postmain:before {
border-color: transparent;
border-style: solid solid outset;
content: " ";
display: block;
height: 0;
left: -16px;
pointer-events: none;
position: absolute;
right: 100%;
top: 11px;
width: 0;
}
.pun .post, .pun .postbody, .pun .postmain {
background-color: #fff!important;
}
.pun .postbody {
width: 100%;
}
.pun .post .user {
line-height: 150%;
margin-left: -17em!important;
margin-top: -3.3em;
padding-top: 0;
text-align: center;
width: 15em;
}
.pun .post .user {
float: left;
position: relative;
}
.pun .user {
display: inline;
overflow: hidden;
white-space: normal;
word-wrap: break-word;
}
.pun .user .user-ident {
font-size: 12px;
padding: 0 0 .7em;
}
.pun .user-ident .username {
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 auto;
position: relative;
}
.pun .user-ident .username {
color: #2f2f2f;
display: block;
font-size: 1.2em;
font-weight: 700;
position: absolute;
text-decoration: none;
top: 0;
}
.pun .posthead, .pun .username {
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 400;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.pun .user .user-ident .user-basic-info {
margin-top: 15px;
}
.pun .user-ident .user-basic-info {
font-weight: 700;
}
.pun .user .user-info {
color: #666;
line-height: 1.8em;
}
.pun .post-entry {
padding: 1em 1em 0;
}
.pun .post {
border: 0;
margin: 5px;
}
.pun .postmain:after, .pun .postmain:before {
border-color: transparent;
border-style: solid solid outset;
content: " ";
display: block;
height: 0;
left: -16px;
pointer-events: none;
position: absolute;
right: 100%;
top: 11px;
width: 0;
}.pun .postmain:after {
border-right-color: #f7f7f7;
border-width: 7px;
margin-left: 2px;
margin-top: 1px;
}.pun .postmain:before {
border-right-color: #ddd;
border-width: 8px;
}

Cepheus escreveu:Adicione isso no seu css:

Código:


.pun .postmain {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
position: relative;
}
.pun .postmain {
margin-left: 18em;
}
.pun .post, .pun .postbody, .pun .postmain {
background-color: #fff;
}
.pun .user-ident .username {
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 auto;
position: relative!important;
}
.pun .user-ident .username {
color: #2f2f2f;
display: block;
font-size: 1.2em;
font-weight: 700;
position: absolute;
text-decoration: none;
top: 0;
}
.pun .posthead, .pun .username {
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 400;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.pun .posthead, .pun .username {
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 400;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.pun .posthead {
background: #f7f7f7;
}
pun .postmain:after, .pun .postmain:before {
border-color: transparent;
border-style: solid solid outset;
content: " ";
display: block;
height: 0;
left: -16px;
pointer-events: none;
position: absolute;
right: 100%;
top: 11px;
width: 0;
}
.pun .post, .pun .postbody, .pun .postmain {
background-color: #fff!important;
}
.pun .postbody {
width: 100%;
}
.pun .post .user {
line-height: 150%;
margin-left: -17em!important;
margin-top: -3.3em;
padding-top: 0;
text-align: center;
width: 15em;
}
.pun .post .user {
float: left;
position: relative;
}
.pun .user {
display: inline;
overflow: hidden;
white-space: normal;
word-wrap: break-word;
}
.pun .user .user-ident {
font-size: 12px;
padding: 0 0 .7em;
}
.pun .user-ident .username {
border: 1px solid #ddd;
border-radius: 3px;
margin: 0 auto;
position: relative;
}
.pun .user-ident .username {
color: #2f2f2f;
display: block;
font-size: 1.2em;
font-weight: 700;
position: absolute;
text-decoration: none;
top: 0;
}
.pun .posthead, .pun .username {
background-color: #f7f7f7;
border-bottom: 1px solid #eee;
font-size: 13px;
font-weight: 400;
padding: 10px;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.pun .user .user-ident .user-basic-info {
margin-top: 15px;
}
.pun .user-ident .user-basic-info {
font-weight: 700;
}
.pun .user .user-info {
color: #666;
line-height: 1.8em;
}
.pun .post-entry {
padding: 1em 1em 0;
}
.pun .post {
border: 0;
margin: 5px;
}
.pun .postmain:after, .pun .postmain:before {
border-color: transparent;
border-style: solid solid outset;
content: " ";
display: block;
height: 0;
left: -16px;
pointer-events: none;
position: absolute;
right: 100%;
top: 11px;
width: 0;
}.pun .postmain:after {
border-right-color: #f7f7f7;
border-width: 7px;
margin-left: 2px;
margin-top: 1px;
}.pun .postmain:before {
border-right-color: #ddd;
border-width: 8px;
}