• Descrição:

Bom dia,

Eu gostaria de modificar o widget deste tutorial para que aparecesse apenas um tópico específico (mas mantendo as características visuais e funcionais).

Grata

• Informações:

Código:

<div id="insert_widget">
    Loading...
</div><script>
jQuery(function () {
    var NumeroTopico = 1;
    jQuery('#insert_widget').load('t' + NumeroTopico + '-' + ' .pun .user-ident .username, .pun .user-ident .user-basic-info a img, .pun .posthead', function () {
        console.log('Carregado com sucesso! Hancki');
    });
});
</script><style>#insert_widget h4 {
margin-left: 36px;
margin-top: -7px;
font-size: 11px;
}
#insert_widget img {
margin-top: -39px;
float:left;
width: 30px;
height: 30px;
border: 1px solid rgb(213, 213, 213);
padding: 1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 2px;
background: none 0% 0% repeat scroll rgb(255, 255, 255);
}
#insert_widget .posthead a:after {
   white-space: pre-wrap;
   content: '\A';
}
#insert_widget .posthead a {
   font-size: 11px !important;
}
#insert_widget .posthead {
   white-space:nowrap;
   background: none;
   border: none;
   font-size: 8.5px;
}
#insert_widget img[src="http://2img.net/i/fa/empty.gif"], #insert_widget .posthead strong {
   display: none;
}
#insert_widget .posthead h2 {
   padding-left: 28px;

}
</style>

Código:

<div id="insert_widget1">
    Loading...
</div><script>
jQuery(function () {
    var NumeroTopico = 1;
    jQuery('#insert_widget1').load('t' + NumeroTopico + '-' + ' .pun .user-ident .username, .pun .user-ident .user-basic-info a img, .pun .posthead', function () {
        console.log('Carregado com sucesso! Hancki');
    });
});
</script><style>#insert_widget h4 {
margin-left: 36px;
margin-top: -7px;
font-size: 11px;
}
#insert_widget img {
margin-top: -39px;
float:left;
width: 30px;
height: 30px;
border: 1px solid rgb(213, 213, 213);
padding: 1px;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 2px;
background: none 0% 0% repeat scroll rgb(255, 255, 255);
}
#insert_widget .posthead a:after {
  white-space: pre-wrap;
  content: '\A';
}
#insert_widget .posthead a {
  font-size: 11px !important;
}
#insert_widget .posthead {
  white-space:nowrap;
  background: none;
  border: none;
  font-size: 8.5px;
}
#insert_widget img[src="http://2img.net/i/fa/empty.gif"], #insert_widget .posthead strong {
  display: none;
}
#insert_widget .posthead h2 {
  padding-left: 28px;

}
</style>

The Boss escreveu:Bom dia!

Funcionou, mas ele captura os avatares no tamanho original, fica meio gigante xP

Edit: tentei reduzir o tamanho com CSS e até consegui, mas aí cria um efeito cascada nos posts. E também, o widget exibe as primeiras mensagens, eu gostaria de exibir as últimas já que é um tópico para bate-papo. Se não for possível, só exibir o autor da última mensagem é o suficiente pra mim. Se tiver como limitar o número de mensagens também é bom, talvez umas 5 no máximo. Obrigada desde já.

http://helitas.ace.st/

Código:

<div id="insert_widget1">
    Loading...
</div>
<script>
    jQuery(function() {
        var NumeroTopico = 1;
        jQuery('#insert_widget1').load('t' + NumeroTopico + '-' + ' .pun .user-ident .username, .pun .user-ident .user-basic-info a img, .pun .posthead', function() {
            console.log('Carregado com sucesso! Hancki');
        });
    });
</script>
<style>
    #insert_widget1 h4 {
        margin-left: 36px;
        margin-top: -7px;
        font-size: 11px;
    }
    #insert_widget1 img {
        margin-top: -39px;
        float: left;
        width: 30px;
        height: 30px;
        border: 1px solid rgb(213, 213, 213);
        padding: 1px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 2px;
        background: none 0% 0% repeat scroll rgb(255, 255, 255);
    }
    #insert_widget1 .posthead a:after {
        white-space: pre-wrap;
        content: '\A';

    }
    #insert_widget1 .posthead a {
        font-size: 11px !important;
    }
    #insert_widget1 .posthead {
        white-space: nowrap;
        background: none;
        border: none;
        font-size: 8.5px;
    }
    #insert_widget1 img[src="http://2img.net/i/fa/empty.gif"],
    #insert_widget1 .posthead strong {
        display: none;
    }
    #insert_widget1 .posthead h2 {
        padding-left: 28px;
    }
</style>