Widget customizado para AwesomeBB

Detalhes da questão

Endereço do fórum: http://bricarus.forumeiros.com/
Versão do fórum: AwesomeBB

Descrição

Olá velhos companheiros,

Antes de eu fazer este tópico, fui atrás de informações pra ver se eu achava um jeito de adicionar widgets nessa versão(até na versão vietnam...)

Bom, preciso adicionar 2 banners em um widget. Se possível, abaixo do widget de estatísticas.

Banner:

Ps.: o único código que encontrei que faz algo semelhante é o de últimos assuntos.

Código:


/**
         *  Últimos assuntos - AwesomeBB by Pedxz
         *  Created August 26, 2018 <1.0>
         *  See more: http://ajuda.forumeiros.com
        */
        $(function() {
        
            var title = 'Últimos Assuntos', empty = 'No momento estamos sem tópicos para poderes ver ou não têm permissão para vê-los!', last = $('<div>', {
                id: 'block-latest',
                class: 'block-subtle'
            }).append(
                ' <i class="material-icons">chat_bubble_outline</i>' +
                ' <div>' +
                ' <span class="headline">' + title + '</span>' +
                ' <div class="block-last-load"></div>' +
                ' </div>'
            );
        
            if (_board.tpl_version !== 'awesomebb') return;
        
            $(last).insertBefore('#block-online');
        
            $('#block-latest .block-last-load').load('/latest .block-topics-details');
        
            $('head').append(
                '<style type="text/css">' +
                '.block-last-load:empty::before {' +
                ' content: "'+ empty +'";' +
                '}'+
                '#block-latest i {' +
                ' color: #BF263C;' +
                '}' +
                '.block-last-load {' +
                ' margin-left: -.37em;' +
                ' margin-right: -.37em;' +
                ' height: 300px;' +
                ' overflow-y: auto;' +
                '}' +
                '.block-last-load a {' +
                '  text-decoration: none;' +
                '  border: 0!important;' +
                '  display: inline;' +
                '}' +
                '.block-last-load .block-topics-details {' +
                ' padding: 1em;' +
                '}' +
                '.block-last-load .block-topics-details:not(:nth-child(2n+1)) {' +
                ' background-color: #F5F7FA;' +
                '}' +
                '#block-latest h2 {' +
                ' font-size: 16px;' +
                ' text-overflow: ellipsis;' +
                ' overflow: hidden;' +
                ' white-space: nowrap;' +
                ' width: 100%;' +
                '}' +
                '#block-latest .block-topics-author,' +
                '#block-latest .block-topics-lastpost img {' +
                '  display: none;' +
                '}' +
                '#block-latest .block-topics-lastpost,' +
                '#block-latest .block-topics-author a {' +
                '  display: inline;' +
                '}' +
                '@media only screen and (max-width: 768px) {' +
                ' #block-latest {' +
                '  margin-top: 20px;' +
                ' }' +
                '}' +
                '</style>'
            );
        
        });


ps2.: que versão F essa AwesomeBB

Olá @Troubleshoot,
crie uma nova página JavaScript com investimento no índice do fórum, com o seguinte código:

Código:

/**
*  Widget Customizado - AwesomeBB by Pedxz
*  Created April 11, 2019 <1.0>
*  See more: http://ajuda.forumeiros.com
*/
(function ($) {
   'use strict';
 
     $(function () {
 
        var title = 'Titulo do Widget',
             widget = $('<div>', {
                id: 'block-widget',
                class: 'block-subtle'
             }).append(
                ' <i class="material-icons">announcement</i>' +
                ' <div>' +
                ' <span class="headline">' + title + '</span>' +
                ' <div><img src="https://i.imgur.com/ZXucf6z.png"/></div>' +
                ' </div>'
            );
 
           if (_board.tpl_version !== 'awesomebb') return;
        
             $(widget).insertBefore('#block-online');
 
        $('head').append(
                '<style type="text/css">' +
                '#block-widget img {' +
                ' max-width: 100%;' +
                '}' +
                '#block-widget i {' +
                ' color: tomato;' +
                '}' +
                '#block-widget h2 {' +
                ' font-size: 16px;' +
                ' text-overflow: ellipsis;' +
                ' overflow: hidden;' +
                ' white-space: nowrap;' +
                ' width: 100%;' +
                '}' +
                '@media only screen and (max-width: 768px) {' +
                ' #block-widget {' +
                '  margin-top: 20px;' +
                ' }' +
                '}' +
                '</style>'
            );
      
      
     });
}(jQuery));

Cordialmente,
pedxz.

@Pedxz

O código já resultou! Só tenho uma pequena dúvida...

Nessa parte do código, posso editar e colocar qualquer um em html? Preciso separar os banner e adicionar link para cada.

Código:

 <div><img src="https://i.imgur.com/ZXucf6z.png"/></div>

Outra coisa, onde consigo ver a tabela destes ícones?

Código:

<i class="material-icons">announcement</i>

Muito obrigado!

Troubleshoot escreveu:Nessa parte do código, posso editar e colocar qualquer um em html? Preciso separar os banner e adicionar link para cada.

Código:

 <div><img src="https://i.imgur.com/ZXucf6z.png"/></div>

Sim pode adicionar HTML ai, qualquer coisa que o senhor quiser, porém não pode remover o começo (div)

Troubleshoot escreveu:Outra coisa, onde consigo ver a tabela destes ícones?

Código:

<i class="material-icons">announcement</i>

https://material.io/tools/icons/

Muuuuito obrigaaaadooooo!!!!!!

Tópico resolvido.



Tópico resolvido em menos de 1 dia, que equipe F