Como eu coloco isso ?

Qual é minha questão:
Olá , eu tenho uma dupla dúvida.
A que eu quero mais saber é a que esta no retângulo pequeno.
Veja na imagem abaixo.

Links e imagens do meu problema:
https://i.imgur.com/gf3Kg.png

Endereço do meu fórum:
http://masterotp.ace.st/

Versão do meu fórum:
PHPBB3

Olá!

Para as bordas nas últimas mensagens utilize o código CSS abaixo:

Código:

ul.topiclist dd {
border-left: none;
}
ul.forums dd {
border-color: #A8D8E3;
border-left-style: solid;
border-left-width: 1px;
}
ul.topiclist dd {
border-left: 1px solid #A8D8E3;
display: block;
float: left;
padding: 4px 0;
}
dd.lastpost {
margin-left: 9px!important;
}
dd.lastpost {
font-size: 1.1em;
width: 20%;
}
.lastpost {
-moz-border-radius: 7px;
-moz-box-shadow: 0 0 8px #666;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0 0 8px #666;
border: 2px solid #EEE;
border-image: initial;
border-radius: 10px;
box-shadow: 0 0 7px #666;
margin: 3px;
width: auto;
}

Já para a exibição do avatar de quem postou utilize o código JS:

Código:

jQuery(document).ready(function(){jQuery(".row dd.lastpost").each(function(){var link=jQuery(this).find('a:eq(0)').attr('href'),j=jQuery(this);jQuery.get(link,function(data){var u=jQuery(".postprofile dl dt a img[alt]:last",data).attr('src'),k=jQuery(".postprofile dl dt a:last",data).attr('href');jQuery(j).prepend('<a href="'+k+'" id="avatar-lastpost"><img src="'+u+'" /></a>')})})});jQuery(document).ready(function(){if(location.pathname=='/register'&&location.search=='?agreed=true&step=2'&&jQuery('#username_reg').length){jQuery('#username_reg').keypress(function(e){if(document.all){e=e.keyCode}else{e=e.charCode};v='0123456789';c=String.fromCharCode(e);if(v.indexOf(c)==-1){return true};return false})}});

Para adicionar este é mais confiável que crie uma nova página HTML, veja como criar no tutorial: https://ajuda.forumeiros.com/-t7967.htm

Logo em seguida pegue o link desta nova página criada, com o código dentro dela (óbvio) e modifique o código abaixo:

<script src=Endereço da página HTML></script>

Depois de alterar o valor de vermelho pelo link da página HTML, copie o código (já modificado) e cole em:
Painel...-> Geral -> Fórum -> Configurações / Descrição do fórum

Melhores cumprimentos,
seender

Se for o modelo dos grupos aqui está:

Código:

#i_whosonline + p br + br + em a:hover {
background: #DDD;
padding: 9px 10px 10px;
}
#i_whosonline + p br + br + em {
width: 70%;
background: white url(http://i44.servimg.com/u/f44/15/34/61/11/grey-u10.png) repeat-x scroll left bottom;
border: 2px solid #DDD;
border-radius: 6px;
text-align: center;
padding: 10px 8px 5px 5px;
display: block;
margin: 0 auto;
font-size: 0px;
color: transparent;
}

#i_whosonline + p br + br + em a {
-webkit-transition-duration: .3s;
text-shadow: 0px 1px 1px #454545;
font-size: 15px;
margin: 0 5px;
font-style: normal;
font-weight: normal;
}

Coloque o código na Folha Css!
Em painel > visualização > imagens e cores > cores > folha de estilo css

Olá funcionaram perfeitamente , mas o do avatar mostrou ele completo , ao invés de uma miniatura.
E eu queria mais uma coisa que é o balão de fala com o nome completo do tópico quando se passa a mouse.

Olá!

Aceda á "Folha de estilos CSS"
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS

Código:

.avatar-index {float: left;} .avatar-index img {width: 40px;height: 40px;background: #F4F4F4;border: 1px solid #DDD;margin: 0 5px;padding: 1px;} .avatar-index img:hover {border: 1px dashed #CCC;} .avatar-subforo {float: right;}

Valide.

Até mais.

OK . Ficou com um efeito legal agora só falta o balão de fala que mostra o nome do tópico completo

Olá!
Este balão que o senhor diz, é feito por código JavaScript, e infelizmente nós não fornecemos mais suporte a códigos de tutoriais externos aos que criamos, ou seja, nós só damos auxílio em relação a códigos citados em nossos tutoriais, podemos encerrar sua questão?

Atenciosamente,
BrunoH.

Ok . pode sim , obrigado !