"Categoria extra" bugada

Detalhes da questão

Endereço do fórum: http://ismaels.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá!

Eu estava usando um js que adicionava uma categoria extra no meu fórum, só que quando passei pra versão MordenBB parece que ela parou de funcionar

JS:

Código:

$(function() {
 
var sotw = {
    imagem: 'https://imgur.com/FWwD0cw.png',
    Tema: 'Esquadrão Suicida',
    Autor: 'APOllO'
};
 
$('div.main-box.clearfix').before(
'<div class="main">' +
'<div class="main-head">' +
' <div class="page-title">' +
'  <h2><strong><em class="fa fa-star-half-o"> </em> Arte da semana</strong></h2>' +
' </div>' +
'</div>' +
'<div class="main-content" id="cepheus">' +
'<table cellspacing="0" class="table">' +
' <thead>' +
'  <tr>' +
'    <th class="tcd"><strong>Tema:</strong> ' + sotw.Tema + '</th>' +
'    <th class="tcd"><strong>Autor:</strong> ' + sotw.Autor + '</th>' +
'  </tr>' +
' </thead>' +
' <tbody class="statused">' +
'  <tr>' +
'    <td class="row2" style="text-align: center;" colspan="2">' +
'      <img src="' + sotw.imagem + '" />' +
'    </td>' +
'  </tr>' +
' </tbody>' +
'</table>' +
'</div>' +
'</div>'
);
});

Config. feita pelo @Luiz:

Código:

(function ($) {
  'use strict';
 
  $(function () {
    $('.main-head').each(function () {
      var $this = $(this);
     
      if (!/Arte da semana/gi.test($this.text())) {
        return;
      }
 
      $this
        .parent()
          .appendTo('#container')
      ;
    });
  });
}(jQuery));

Posso montar uma nova nesse estilo?
-> http://prntscr.com/gs1ag2

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

Acho que nesse estilo fique melhor que o anterior
Pode sim amigo.

Poderá desativar os dois JavaScripts anteriores e criar um novo investido no início:

Código:

(function ($, css) {
  'use strict';

  var config = {
    theme: 'Esquadrão Suicida',
    author: 'APOllO',
    imgSrc: 'https://imgur.com/FWwD0cw.png'
  };

  $(function () {
    var $template = $([
      '<div class="block">',
      '  <div class="h3">',
      '    <a href="/viewonline" rel="nofollow">',
      '      <i class="ion-star"></i> Arte da Semana',
      '    </a>',
      '  </div>',
      '  <div class="block-content">',
      '    <table class="block-table">',
      '      <tr>',
      '        <td>',
      '          <strong>Tema:</strong>',
      '          ' + $('<span>', { 'text': config.theme }).prop('outerHTML'),
      '        </td>',
      '        <td>',
      '          <strong>Autor:</strong>',
      '          ' + $('<span>', { 'text': config.author }).prop('outerHTML'),
      '        </td>',
      '      </tr>',
      '    </table>',
      '    <div class="block-image">',
      '      ' + $('<img />', { 'src': config.imgSrc }).prop('outerHTML'),
      '    </div>',
      '  </div>',
      '</div>'
    ].join('\n'));

    $template
      .insertBefore($('.block').get(0))
    ;

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.block .block-content .block-table {',
  '  width: 100%;',
  '}',
  '',
  '.block .block-content .block-table tr > td:last-child {',
  '  text-align: right;',
  '}',
  '',
  '.block .block-content .block-image {',
  '  text-align: center;',
  '}'
]));

o/

wow, ficou muito bom. Teria como fazer uma alteração? Por "tema" e "autor" em baixo?

Assim?

Código:

(function ($, css) {
  'use strict';
 
  var config = {
    theme: 'Esquadrão Suicida',
    author: 'APOllO',
    imgSrc: 'https://imgur.com/FWwD0cw.png'
  };
 
  $(function () {
    var $template = $([
      '<div class="block">',
      '  <div class="h3">',
      '    <a href="/viewonline" rel="nofollow">',
      '      <i class="ion-star"></i> Arte da Semana',
      '    </a>',
      '  </div>',
      '  <div class="block-content">',
      '    <div class="block-image">',
      '      ' + $('<img />', { 'src': config.imgSrc }).prop('outerHTML'),
      '    </div>',
      '    <table class="block-table">',
      '      <tr>',
      '        <td>',
      '          <strong>Tema:</strong>',
      '          ' + $('<span>', { 'text': config.theme }).prop('outerHTML'),
      '        </td>',
      '        <td>',
      '          <strong>Autor:</strong>',
      '          ' + $('<span>', { 'text': config.author }).prop('outerHTML'),
      '        </td>',
      '      </tr>',
      '    </table>',
      '  </div>',
      '</div>'
    ].join('\n'));
 
    $template
      .insertBefore($('.block').get(0))
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.block .block-content .block-table {',
  '  width: 100%;',
  '}',
  '',
  '.block .block-content .block-table tr > td:last-child {',
  '  text-align: right;',
  '}',
  '',
  '.block .block-content .block-image {',
  '  text-align: center;',
  '}'
]));

Exato! Só mais uma coisinha, como nas estatísticas na parte: "Legenda: [ Moderadores ]" tem um fundo um pouco mais escuro, tem como por esse detalhe também?

O seu desejo é uma ordem, sir:

Código:

(function ($, css) {
  'use strict';
 
  var config = {
    theme: 'Esquadrão Suicida',
    author: 'APOllO',
    imgSrc: 'https://imgur.com/FWwD0cw.png'
  };
 
  $(function () {
    var $template = $([
      '<div class="block">',
      '  <div class="h3">',
      '    <a href="/viewonline" rel="nofollow">',
      '      <i class="ion-star"></i> Arte da Semana',
      '    </a>',
      '  </div>',
      '  <div class="block-content">',
      '    <div class="block-image">',
      '      ' + $('<img />', { 'src': config.imgSrc }).prop('outerHTML'),
      '    </div>',
      '    <div class="block-footer">',
      '      <table class="block-table">',
      '        <tr>',
      '          <td>',
      '            <strong>Tema:</strong>',
      '            ' + $('<span>', { 'text': config.theme }).prop('outerHTML'),
      '          </td>',
      '          <td>',
      '            <strong>Autor:</strong>',
      '            ' + $('<span>', { 'text': config.author }).prop('outerHTML'),
      '          </td>',
      '        </tr>',
      '      </table>',
      '    </div>',
      '  </div>',
      '</div>'
    ].join('\n'));
 
    $template
      .insertBefore($('.block').get(0))
    ;
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.block .block-content .block-table {',
  '  width: 100%;',
  '}',
  '',
  '.block .block-content .block-table tr > td:last-child {',
  '  text-align: right;',
  '}',
  '',
  '.block .block-content .block-image {',
  '  text-align: center;',
  '}'
]));

Perfeito amigo!
Muito obrigado!