Widget customizado para AwesomeBB

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

Atendido / Resolvido Widget customizado para AwesomeBB

Mensagem por Troubleshoot em 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
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2231
Pontos Ativos : 2997

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

Atendido / Resolvido Re: Widget customizado para AwesomeBB

Mensagem por Pedxz em 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.
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3053
Pontos Ativos : 3769

https://power-pixel.net

Atendido / Resolvido Re: Widget customizado para AwesomeBB

Mensagem por Troubleshoot em 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
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2231
Pontos Ativos : 2997

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

Atendido / Resolvido Re: Widget customizado para AwesomeBB

Mensagem por Pedxz em 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/
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3053
Pontos Ativos : 3769

https://power-pixel.net
  • 0

Atendido / Resolvido Re: Widget customizado para AwesomeBB

Mensagem por Troubleshoot em 11.04.19 16:44

Muuuuito obrigaaaadooooo!!!!!!

Tópico resolvido.



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

Troubleshoot
Usuário experiente

Masculino
Inscrito dia : 25/09/2011
Mensagens : 2231
Pontos Ativos : 2997

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

Atendido / Resolvido Re: Widget customizado para AwesomeBB

Mensagem por Pedxz em 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.


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3053
Pontos Ativos : 3769

https://power-pixel.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum