[Widget] Ultimos Assuntos

Detalhes da questão

Endereço do fórum: http://kings1.forumeiros.com
Versão do fórum: phpBB3

Descrição

Boa tarde a todos a qual possam me ajuda,Gostaria de saber ser alguém possuir alguns tutorial de como colocar esse widget no fórum,Achei ele melhor quer aquele colocado na lateral,Agradeço quem me ajuda


Link do fórum:http://naruto-survival.forumeiros.com

Boa noite.

Leia:
https://ajuda.forumeiros.com/t112103-

Até mais,
Fraise.

Não funcionou,Não sei dizer ser foi a versão por quer  no tutorial a qual você mandou ele e limitado a  PHPBB2 e PunBB 

Ser existir uma  versão parecida  agradeço,Estou querendo colocar  os últimos assuntos porquer mudei o tema e alguns dos meus usuários gosta de ver os tópicos recentes

(Tentei acha  o código a qual pede para  altera  mais ele não tem no meu template Geral>Overall_header )
https://ajuda.forumeiros.com/t56843-tutorial-personalização-do-widget-topicos-recentes

(Esse  tutorial a qual você fez funciona mais ele fica igual da lateral)
https://ajuda.forumeiros.com/t106628-tutorial-mover-um-widget-para-o-topo-do-forum

Boa noite.

Você pode fazer dessa forma, embasado num código feito pelo @JScript: ative a aba de widgets no seu fórum com o últimos assuntos nele e crie um novo javascript com investimento no índice.

Código:

$(function () {
$('module:contains("Últimos assuntos")').clone().prependTo('.mes-txt').addClass('ultimosAssuntos').removeClass('module');
$('#left').css('display','none');
});

Provavelmente ele vai ficar desconfigurado, mas você pode editar isso criando um novo div na sua mensagem da página inicial com alguma classe de referência, trocando o mes-txt por ela. Por exemplo:

Código:

<div class="local-do-widget-ua"></div>

Nesse caso, você troca o mes-txt por local-do-widget-ua.

Ola Key of Destiny,Criei uma nova  uma pagina de Javascript  fez como você ditou aqui  mais não funcionou continua na lateral (Meu conhecimento sobre o assunto e básico do básico) Caso seja  mais claro agradeço muito.

Perdão. Foi erro no código.

Para facilitar, pode me passar sua mensagem da página inicial?

Desculpa a  demora para responde estava no trabalho,Você fala  a pagina CSS ou template overall_header ou Widget ou javascripts ? 

Olá,

O @Key of Destiny se refere à mensagem presente em Painel de Controle >> Visualização >> Página inicial >> Geral.

Até mais,
Fraise.

O forumeiros  ta me limitando ele fala que atinge 25000 

vou mandar   por partes


[Parte 1]

Código:

<div style="text-align: center;">
                                                                                                                            
   <div>
                                                                  <span style="font-size: 18px;"><span></span></span>                                                           
   </div>
                                                                                                                        
   <div>
                                                                                                                           
      <marquee style="font-size: 18px;">
                                                                                                                              
         <div>
                                                                        <span style="white-space:pre" class="Apple-tab-span">   </span>O fórum esta sobre construção/ Porcentagem de conclusão 20%                                                           
         </div>
                                                                                                                              
         <div>
                                                                                                                                 
         </div>
                                                                                                              
         <div>
                                                                <br />                                                   
         </div>
                                                                                                              
         <div>
                                                                <br />                                                   
         </div>
                                                                                                              
         <div>
                                                                <br />                                                   
         </div>
                                                                                                              
         <div>
                                                              <br />                                                 
         </div>

Gostaria de desistir de colocar esse widget pode fecha o tópico,Eu pensei bem e vou deixa  o portal para mostra os últimos assuntos agradeço ao Key of Destiny e o Fraise pela ajuda

Veja se isto te agrada:

Código:

/*
 *  Application: Recent topics from specific forums
 *  Date: 23/05/2018
 *  Version: 1.223052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
(function() {
    recentPosts = {
        initialize: function() {
            $(function() {
                recentPosts.setupRecentPosts();
            });
        },
        forums: [
            {
                active: true, // Selected as active
                forum_name: 'Tutorials',
                forum_id: 2
            },
            {
                forum_name: 'Gunbound Utilities',
                forum_id: 14
            }
        ],
        lang: {
            loading: 'Loading...',
            by: 'By',
            comments: 'Comments',
            views: 'Views'
        },
        images: {
            loading: 'https://imgur.com/oBkwUIV.gif'
        },
        numberPosts: 7,  // Number of posts shown
        recent: $("<div>", {
            id: 'recent-topics'
        }).html(
        '<ul class="recent-tabs"></ul>' +
        '<div class="loaded-recent">' +
        '    <ul class="loaded-topics"></ul>' +
        '</div>'
        ),
        myCSS: '<style type="text/css">' +
            '* {' +
            '  -webkit-box-sizing: border-box;' +
            '  -moz-box-sizing: border-box;' +
            '  box-sizing: border-box;' +
            '}' +
            '#recent-topics {' +
            '  background-color: #428bca;' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            '  display: -webkit-box;' +
            '}' +
            '#recent-topics, .loaded-recent, .loaded-topics {' +
            '  border-radius: 4px;' +
            '}' +
            '.recent-tabs {' +
            '  margin-top: 5px;' +
            '  list-style-type: none;' +
            '  float: left;' +
            '  width: 18%' +
            '}' +
            '#recent-topics:after, #recent-topics:before, .recent-tabs:after, .recent-tabs:before, .loaded-recent:after {' +
            '  display: table;' +
            '  content: " ";' +
            '}' +
            '.recent-tabs li, .recent-tabs li a {' +
            '  display: block;' +
            '  position: relative;' +
            '}' +
            '.recent-tabs li a {' +
            '  padding: 10px 15px;' +
            '  text-decoration: none;' +
            '  color: #fff !important;' +
            '  cursor: pointer;' +
            '  border-radius: 4px 0 0 4px;' +
            '}' +
            '.recent-tabs li a:hover {' +
            '  background-color: rgba(0,0,0,0.3);' +
            '}' +
            '.recent-tabs li a.active {' +
            '  background-color: #fefefe;' +
            '  font-weight: 600;' +
            '  color: #428bca !important;' +
            '}' +
            '.loaded-recent {' +
            '  position: relative;' +
            '  min-height: 1px;' +
            '  background-color: #fefefe;' +
            '  padding: 10px;' +
            '  float: left;' +
            '  width: 82%;' +
            '}' +
            '.loaded-recent:after {' +
            '  clear: both;' +
            '}' +
            '.loaded-topics {' +
            '  background-color: #fff;' +
            '  border: 1px solid #ddd;' +
            '  list-style-type: none;' +
            '}' +
            '.loaded-recent li {' +
            '  border-bottom: 1px dashed #ddd;' +
            '  line-height: 30px;' +
            '  text-align: left;' +
            '}' +
            '.loaded-recent li:last-child {' +
            '  border-bottom: 0;' +
            '}' +
            '.loaded-recent li .topictitle {' +
            '  font-weight: 600;' +
            '  margin: 0 0 0 15px;' +
            '  text-decoration: none;' +
            '}' +
            '.recent-tabs li a, .loaded-topics, .loaded-recent li .topictitle {' +
            '  font-size: 13px;' +
            '}' +
            '.loaded-recent li .recent-author {' +
            '  float: right;' +
            '  padding: 0 10px;' +
            '}' +
            '</style>',
        load: function(a) {
            $.ajax({
                type: "GET",
                url: "/f" + a + "-?change_version=punbb",
                beforeSend: function(obj) {
                    recentPosts.recent.find(".loaded-topics").html(
                    '<center>' +
                    '    <br>' + recentPosts.lang.loading + '<br><img src="' + recentPosts.images.loading + '" style="height:100px" alt>' +
                    '</center>'
                    );
                },
                success: function(data) {
                    recentPosts.recent.find(".loaded-topics").html("");
                    $("#main-content .table:last a.topictitle:lt(" + recentPosts.numberPosts + ")", data).each(function() {
                        var oThis = $(this),
                            blog = oThis.closest("tr").find(".blog_comments"),
                            topicLink = oThis.prop("outerHTML"),
                            author = oThis.closest("tr").find("td.tcl a[href^='/u']").prop("outerHTML"),
                            numberAnswers = oThis.closest("tr").find("td.tc2").text(),
                            numberViewers = oThis.closest("tr").find("td.tc3").text(),
                            blogNumbers = blog.text().match(/\d+/g),
                            href = null;
                        if (blog.length) {
                            numberAnswers = blogNumbers[0];
                            numberViewers = blogNumbers[1];
                        }
                        recentPosts.recent.find(".loaded-topics").append(
                        '<li>' +
                        '    <span class="recent-author">' + recentPosts.lang.by + ' ' + author + ' - ' + recentPosts.lang.comments + ': ' + numberAnswers + ' - ' + recentPosts.lang.views + ': ' + numberViewers + '</span>' + topicLink + '</a>' +
                        '</li>'
                        );
                        recentPosts.recent.find("a").each(function() {
                            href = $(this).attr("href").split(/(&change|\?change)/g)[0];
                            $(this).attr("href", href);
                        });
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        },
        request: function(a) {
            recentPosts.recent.find(".active").removeClass("active"); // Remove class active
            $(a).addClass("active"); // Add class active
            // Picking the selected tab id
            a = $(a).attr("attr-data");
            recentPosts.load(a);
        },
        setupRecentPosts: function() {
            $(recentPosts.myCSS).appendTo("head");
            $(recentPosts.recent).prependTo("#main-content");
            var activeMenu = "";
            for (var i in recentPosts.forums) {
                var item = recentPosts.forums[i];
                if (item.active) {
                    activeMenu = " active";
                    recentPosts.load(item.forum_id);
                } else {
                    activeMenu = "";
                }
                recentPosts.recent.find(".recent-tabs").append(
                '<li>' +
                '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics"' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' +
                '</li>'
                );
            }
        }
    };
    recentPosts.initialize()
})();

Localize o seguinte no código:

Código:

        forums: [
            {
                active: true, // Selected as active
                forum_name: 'Tutorials',
                forum_id: 2
            },
            {
                forum_name: 'Gunbound Utilities',
                forum_id: 14
            }
        ]

Você irá editar nesta parte os fóruns que você quer exibir os últimos assuntos, colocando o nome e o id do fórum.

Criei um javascript com o código que você enviou mais ele não parece últimos assuntos seria mais um informativo pelo que eu andei olhando,Existe a possibilidade  de torna ele tipo tópicos recentes...? agradeço muito ser me ajuda.


3/06/2018


Testei o código tentei colocar  mais alguns seguindo o seguinte  código mais ele bugou só mostra informação independente  da qual clickar

Código:

 },
  {
forum_name: 'Topicos Principais',
              forum_id: 1

O código que lhe passei apenas irá exibir os últimos assuntos dos fóruns que você desejar, por exemplo:

Código:

            {
                active: true, // Selected as active
                forum_name: 'Tutorials',
                forum_id: 2
            },
            {
                forum_name: 'Gunbound Utilities',
                forum_id: 14
            }

Neste trecho configurei para que apenas mostre os últimos assuntos dos fóruns de ID "2 e 14". O "active: true" irá setar qual dos fóruns irá ser exibido por padrão.

Olá Daemon Poderia me ajuda em uma coisa eu acho simples até  só não tenho o conhecimento como faço para a parte azul fica em vermelho poderia  altera  e manda  pra mim agradeço muito

OFF:

10:50 

03/06/2018

Existe a possibilidade de criar mais tipo apenas  dois me limita  muito.

Procure no código o seguinte "#428bca", isto representa a cor azul padrão do box e do texto... basta alterar para a cor que você deseja.

E sim, você pode adicionar mais de um, basta você fazer da seguinte maneira:

Código:

           {
                active: true, // Selected as active
                forum_name: 'Forum 1',
                forum_id: 1
            },
            {
                forum_name: 'Forum 2',
                forum_id: 2
            },
            {
                forum_name: 'Forum 3',
                forum_id: 3
            },
            {
                forum_name: 'Forum 4',
                forum_id: 4
            }

Para cada novo fórum, adicione mais um desse:

Código:

           {
                forum_name: 'Forum 5',
                forum_id: 5
            }

Sempre separando por vírgula no final de cada nova entrada.
Apenas deixe o último sem vírgula ao final, como no exemplo acima.

Só mais uma questão eu olhei bem e perceber  os que  tem o numero sem o F e claro ele aparece  no código que você mandou.


(Quando testei não coloquei as letras f ou c)
ex

http://kings1.forumeiros.com/''f1''-informacao


Mais quando eu coloco algum que tem o  C ele não mostra 

http://kings1.forumeiros.com/''c7''-formulario-de-incricoes

ai minha duvida e Os  numero que possuir ''F'' são para  os específicos e  os que possuir o c e pro grupo de categorias,A minha questão e existe a possibilidade de funcionar  em grupo de categorias ?

Percebi que alterou a cor do fundo do box, mas não da fonte... Procure por "#428bca" novamente e altere caso deseje.
A minha sugestão é que adicione um para cada:

Código:

           {
                forum_name: 'Formulários',
                forum_id: 62
            },
            {
                forum_name: 'Casas nobre',
                forum_id: 113
            }

Ok  vou deixa para cada tópico especifico,sobre o fundo eu pensei em deixa  em preto mais eu fiquei pensando na questão da letras serem preta ficariam um tipo de  hide.

As cores das letras também pode ser  alterado nesse javascripts ?
(Não quero altera  das cores do forum apenas  do javascript)

Pode fecha  o tópico agradeço Daemon pela ajuda

Percebi que havia um pequeno erro no código que te passei. Troque por este:

Código:

/*
 *  Application: Recent topics from specific forums
 *  Date: 23/05/2018
 *  Version: 1.223052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
(function() {
    recentPosts = {
        initialize: function() {
            $(function() {
                recentPosts.setupRecentPosts();
            });
        },
        forums: [
            {
                active: true, // Selected as active
                forum_name: 'Nota de Implantação',
                forum_id: 1
            },
            {
                forum_name: 'Formulário de Inscrição',
                forum_id: 62
            },
            {
                forum_name: 'Casas Nobre',
                forum_id: 113
            }
        ],
        lang: {
            loading: 'Loading...',
            by: 'By',
            comments: 'Comments',
            views: 'Views'
        },
        images: {
            loading: 'https://imgur.com/oBkwUIV.gif'
        },
        numberPosts: 7,  // Number of posts shown
        recent: $("<div>", {
            id: 'recent-topics'
        }).html(
        '<ul class="recent-tabs"></ul>' +
        '<div class="loaded-recent">' +
        '    <ul class="loaded-topics"></ul>' +
        '</div>'
        ),
        myCSS: '<style type="text/css">' +
            '* {' +
            '  -webkit-box-sizing: border-box;' +
            '  -moz-box-sizing: border-box;' +
            '  box-sizing: border-box;' +
            '}' +
            '#recent-topics {' +
            '  background-color: #541414;' +
            '  margin: 11px 0;' +
            '  padding: 5px;' +
            '  display: -webkit-box;' +
            '}' +
            '#recent-topics, .loaded-recent, .loaded-topics {' +
            '  border-radius: 4px;' +
            '}' +
            '.recent-tabs {' +
            '  margin-top: 5px;' +
            '  list-style-type: none;' +
            '  float: left;' +
            '  width: 18%' +
            '}' +
            '#recent-topics:after, #recent-topics:before, .recent-tabs:after, .recent-tabs:before, .loaded-recent:after {' +
            '  display: table;' +
            '  content: " ";' +
            '}' +
            '.recent-tabs li, .recent-tabs li a {' +
            '  display: block;' +
            '  position: relative;' +
            '}' +
            '.recent-tabs li a {' +
            '  padding: 10px 15px;' +
            '  text-decoration: none;' +
            '  color: #fff !important;' +
            '  cursor: pointer;' +
            '  border-radius: 4px 0 0 4px;' +
            '}' +
            '.recent-tabs li a:hover {' +
            '  background-color: rgba(0,0,0,0.3);' +
            '}' +
            '.recent-tabs li a.active {' +
            '  background-color: #fefefe;' +
            '  font-weight: 600;' +
            '  color: #541414 !important;' +
            '}' +
            '.loaded-recent {' +
            '  position: relative;' +
            '  min-height: 1px;' +
            '  background-color: #fefefe;' +
            '  padding: 10px;' +
            '  float: left;' +
            '  width: 82%;' +
            '}' +
            '.loaded-recent:after {' +
            '  clear: both;' +
            '}' +
            '.loaded-topics {' +
            '  background-color: #fff;' +
            '  border: 1px solid #ddd;' +
            '  list-style-type: none;' +
            '}' +
            '.loaded-recent li {' +
            '  border-bottom: 1px dashed #ddd;' +
            '  line-height: 30px;' +
            '  text-align: left;' +
            '}' +
            '.loaded-recent li:last-child {' +
            '  border-bottom: 0;' +
            '}' +
            '.loaded-recent li .topictitle {' +
            '  font-weight: 600;' +
            '  margin: 0 0 0 15px;' +
            '  text-decoration: none;' +
            '}' +
            '.recent-tabs li a, .loaded-topics, .loaded-recent li .topictitle {' +
            '  font-size: 13px;' +
            '}' +
            '.loaded-recent li .recent-author {' +
            '  float: right;' +
            '  padding: 0 10px;' +
            '}' +
            '</style>',
        load: function(a) {
            $.ajax({
                type: "GET",
                url: "/f" + a + "-?change_version=punbb",
                beforeSend: function(obj) {
                    recentPosts.recent.find(".loaded-topics").html(
                    '<center>' +
                    '    <br>' + recentPosts.lang.loading + '<br><img src="' + recentPosts.images.loading + '" style="height:100px" alt>' +
                    '</center>'
                    );
                },
                success: function(data) {
                    recentPosts.recent.find(".loaded-topics").html("");
                    $("#main-content .table:last a.topictitle:lt(" + recentPosts.numberPosts + ")", data).each(function() {
                        var oThis = $(this),
                            blog = oThis.closest("tr").find(".blog_comments"),
                            topicLink = oThis.prop("outerHTML"),
                            author = oThis.closest("tr").find("td.tcl a[href^='/u']").prop("outerHTML"),
                            numberAnswers = oThis.closest("tr").find("td.tc2").text(),
                            numberViewers = oThis.closest("tr").find("td.tc3").text(),
                            blogNumbers = blog.text().match(/\d+/g),
                            href = null;
                        if (blog.length) {
                            numberAnswers = blogNumbers[0];
                            numberViewers = blogNumbers[1];
                        }
                        recentPosts.recent.find(".loaded-topics").append(
                        '<li>' +
                        '    <span class="recent-author">' + recentPosts.lang.by + ' ' + author + ' - ' + recentPosts.lang.comments + ': ' + numberAnswers + ' - ' + recentPosts.lang.views + ': ' + numberViewers + '</span>' + topicLink + '</a>' +
                        '</li>'
                        );
                        recentPosts.recent.find("a").each(function() {
                            href = $(this).attr("href").split(/(&change|\?change)/g)[0];
                            $(this).attr("href", href);
                        });
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }
            });
        },
        request: function(a) {
            recentPosts.recent.find(".active").removeClass("active"); // Remove class active
            $(a).addClass("active"); // Add class active
            // Picking the selected tab id
            a = $(a).attr("attr-data");
            recentPosts.load(a);
        },
        setupRecentPosts: function() {
            $(recentPosts.myCSS).appendTo("head");
            $(recentPosts.recent).prependTo("#main-content");
            var activeMenu = "";
            for (var i in recentPosts.forums) {
                var item = recentPosts.forums[i];
                if (item.active) {
                    activeMenu = " active";
                    recentPosts.load(item.forum_id);
                } else {
                    activeMenu = "";
                }
                recentPosts.recent.find(".recent-tabs").append(
                '<li>' +
                '    <a href="javascript:void(0)" onclick="recentPosts.request(this)" class="request-topics' + activeMenu + '" attr-data="' + item.forum_id + '">' + item.forum_name + '</a>' +
                '</li>'
                );
            }
        }
    };
    recentPosts.initialize()
})();

Já está com as cores que você colocou em seu fórum, tanto o fundo quanto o texto do menu ativo do box.

pronto agradeço mais uma vez.