[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1 • Compartilhe
[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
Javascript |
Este tutorial irá ensinar como criarmos uma função - através de códigos Javascript - que irá nos mostrar na página inicial nossos cinco últimos tópicos.
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
1º - Adicionando o código Javascript
Como já vimos o efeito será conseguido através de um código, para adicionarmos o tal iremos aceder ao Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript -> Criar um novo código Javascript
Investimento: Marcaremos "No índice"
Código:
jQuery(document).ready(function(){var i=5;jQuery('#main-content').prepend('<ul class="topiclist topics quespende"><h1 class="page-title tquespende"> Últimos tópicos</h1><div id="tpccont"></div></ul>');jQuery.get('/search?search_topics='+jQuery('#i_icon_mini_logout').attr('alt').split('[')[1].split(']')[0].replace(/ /g,''),function(p){var o=0;if(jQuery('#main-content li.row',p).length){jQuery('#main-content li.row',p).each(function(){if(i>o){var m=jQuery(this).html();jQuery('#tpccont').append('<li class="row">'+m+'</li>');o++;}});}else{jQuery('#tpccont').closest('ul').remove();}});});
Vermelho -> Aqui você poderá editar a quantidade de tópicos que irão aparecer.
2º - Adicionando o código CSS
Para darmos o visual agradável ao painel iremos adicionar alguns códigos CSS, para isso acederemos à:
Painel de controle -> Visualização -> Imagens e Cores -> Cores -> Aba 'Folha de estilo CSS'
Colaremos o código abaixo e iremos salvar.
- Código:
.quespende{margin-bottom:10px}.quespende .row:last-child{border-bottom:1px solid #E5E5E5}.quespende .row{border-bottom:0;border-top:1px solid #E5E5E5}.quespende .views,.quespende img{display:none}.quespende .icon{background-image:url()!important}.quespende .row .icon dd{border-left:0;padding-left:1px}.quespende .dterm{font-size:0!important;margin-left:-1px;padding-left:11px!important}.quespende a.topictitle{color:#222;cursor:pointer;display:inline-block;font-family:arial, sans-serif;font-size:13px;font-weight:700;margin-top:5px}.quespende .lastpost{float:right;margin-right:10px;width:auto}.quespende .lastpost a{color:#222}.quespende .posts{width:100px}.quespende .posts:after{content:' mensagens'}.quespende #buttonsolved{float:right;margin-left:3px;margin-right:10px;margin-top:5px}.tquespende{font-family:arial, sans-serif!important;font-size:18px!important;margin:10px 0 6px 6px !important}
3º - Resultado
Resultado como mostrado na imagem abaixo:
https://i.servimg.com/u/f12/16/63/75/54/result14.png
© ShiftActif
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial |
Tópicos semelhantes
» [TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial
» [TUTORIAL] Clicar em abas para mostrar as Categorias
» [TUTORIAL] Mostrar título completo dos tópicos nas categorias
» [TUTORIAL] Mover tópicos nos tópicos
» [TUTORIAL] Mostrar todas as letras em minusculas nos nomes de usuários
» [TUTORIAL] Clicar em abas para mostrar as Categorias
» [TUTORIAL] Mostrar título completo dos tópicos nas categorias
» [TUTORIAL] Mover tópicos nos tópicos
» [TUTORIAL] Mostrar todas as letras em minusculas nos nomes de usuários
ShiftActif fórum :: Central ShiftActif :: :: Tutoriais
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|