Widget customizado para AwesomeBB

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Widget customizado para AwesomeBB

Mensagem por Troubleshoot 11.04.19 15:52

Detalhes da questão


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

Descrição


Olá velhos companheiros, Rosa

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: Widget customizado para AwesomeBB ZXucf6z

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 Rindo
Troubleshoot

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Widget customizado para AwesomeBB

Mensagem por tikky 11.04.19 16:22

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.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Widget customizado para AwesomeBB

Mensagem por Troubleshoot 11.04.19 16:32

@Pedxz Venerar Venerar

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

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Admineiro
  • 0

Tópico resolvido Re: Widget customizado para AwesomeBB

Mensagem por tikky 11.04.19 16:40

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/
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Widget customizado para AwesomeBB

Mensagem por Troubleshoot 11.04.19 16:44

Muuuuito obrigaaaadooooo!!!!!!

Tópico resolvido.



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

Troubleshoot
Hiper Membro

Membro desde : 25/09/2011
Mensagens : 2231
Pontos : 2997

http://guiatecnico.ativo-forum.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Widget customizado para AwesomeBB

Mensagem por tikky 11.04.19 16:45

Recordes Tive uma idéia!

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos