Preview post e visualização basica e regular

Qual é minha questão:
Olá eu gostaria de pedir dois códigos, bom o primeiro e o Preview Post abaixo segue uma imagem de demostração:

O Segundo código e o de visualização básica e regular segue abaixo uma demostração:

Estarei aguardando os códigos desde já agradeço ^^

Att. AllanJunior

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão do fórum:
PUNBB

So o 1 que quero e.e

tbm gostaria desses codes :S

Lamento mas o primeiro não posso passar...

O segundo vc precisa criar um novo JavaScript com investimento nos tópicos:

Código:

$(document).ready(function($) {
$('div.main-head.clearfix:first p.h2').prepend('<div class="topicViewIcons">
<a id="topicViewRegular" title="Visualização Regular" class="active"><img src="http://i72.servimg.com/u/f72/18/07/42/17/spacer10.gif" alt=""></a>
<a id="topicViewBasic" title="Visualização Básica"><img src="http://i72.servimg.com/u/f72/18/07/42/17/spacer10.gif" alt=""></a>
</div>');
$("#topicViewBasic").click(function(){
    $(".pun .post .user").hide("user");
    $(".postmain").css('margin-left','0px');
    $(".postfoot").css('margin-left','0px');
    $("#topicViewRegular").removeClass("active");
    jQuery(this).addClass('active');
    $("div.main-content.topic").addClass("basicTopicView");
  });
$("#topicViewRegular").click(function(){
    $(".pun .post .user").show("user");
    $(".postmain").css('margin-left','17em');
    $(".postfoot").css('margin-left','-17em');
    $("#topicViewBasic").removeClass("active");
    jQuery(this).addClass('active');
    $("div.main-content.topic").removeClass("basicTopicView");
  });
});

Salve e depois adicione o seguinte no seu css:

Código:

/*viewTopic*/
.topicViewIcons {
overflow: hidden;
position: relative;
padding-bottom: 1px;
margin: -3px 10px -5px 0;
float: left;
}
.topicViewIcons a {
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
float: left;
width: 22px;
height: 22px;
text-decoration: none;
text-align: center;
outline: none;
margin-right: 5px;
opacity: 0.6;
}
.topicViewIcons a:hover {
  background:url("http://i72.servimg.com/u/f72/18/07/42/17/trans110.png") repeat;
  background:rgba(0,0,0,0.1);
  opacity:0.8
}
.topicViewIcons #topicViewRegular.active img {
background-position: 0 -16px;
}
.topicViewIcons a.active {
background: url("http://i72.servimg.com/u/f72/18/07/42/17/trans510.png") repeat;
background: rgba(0,0,0,0.5);
-webkit-box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.3) 0px 1px 0px;
-moz-box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.3) 0px 1px 0px;
box-shadow: inset rgba(0,0,0,0.6) 0px 1px 3px, rgba(255,255,255,0.3) 0px 1px 0px;
opacity: 1;
}
.topicViewIcons #topicViewRegular img {
background-position: 0 0;
}
.topicViewIcons img {
opacity: 1!important;
vertical-align: top;
margin-top: 4px;
width: 16px;
height: 16px;
background: url("http://i72.servimg.com/u/f72/18/07/42/17/topicv10.png") no-repeat;
}
.topicViewIcons #topicViewBasic.active img {
background-position: -16px -16px;
}

vlw funcionou perfect aki

nao pegou '-'