Bordas do tópico conforme o grupo do usuário

Detalhes da questão

Endereço do fórum: http://forum.brasilplaygames.com.br
Versão do fórum: ModernBB

Descrição

Olá,

Minha questão é o seguinte, a versão modernbb existe um contorno entre o avatar do usuário e a divisa do título.

Fiz algumas alterações nisso, no caso eu iria remover, no entanto tive uma ideia e estive tentando por em prática mas não resultou.

Minha questão é está linha rosa do grupo de administradores, gostaria de adaptá-la em todo o contorno da mensagem do usuário, na forma que eu defini na imagem abaixo, com contornos vermelhos, veja:

https://imgur.com/a/e1UKwBz

Olá @Raazor_Vilhena,
Poderia passar o código JavaScript em uso, por favor?


Aguardo uma resposta sua,
pedxz.

Olá pedxz,

não utilizo nenhum js para está função, é tudo na base do css.

essas bordas vermelhas na imagem eu às editei via photoshop informando como desejo que fique o mesmo. o/

Acho que me embaralhei nas áreas, deveria ser em css/templates está questão

Olá, adicione em seu javascript com o investimento nos tópicos.

Código:


(function ($) {
  'use strict';
 
  $(function () {
 
    if (!/^\/t(\d+).*$/i.test(location.pathname)) {
      return false;
    }
 
    $('.post').each(function () {
 
      var $post = $(this);
 
      var color = $post
        .find('dl dt div.postprofile-name > span')
          .css('color')
      ;
     
      $post
      .find('.post-head')
          .attr('style', 'border-bottom-color: ' + color + '')
        .end()
.attr('data-color', color)
      ;
    });
  });
}(jQuery));


Connor R. escreveu:Olá, adicione em seu javascript com o investimento nos tópicos.

Código:


(function ($) {
  'use strict';
 
  $(function () {
 
    if (!/^\/t(\d+).*$/i.test(location.pathname)) {
      return false;
    }
 
    $('.post').each(function () {
 
      var $post = $(this);
 
      var color = $post
        .find('dl dt div.postprofile-name > span')
          .css('color')
      ;
      
      $post
      .find('.post-head')
          .attr('style', 'border-bottom-color: ' + color + '')
        .end()
.attr('data-color', color)
      ;
    });
  });
}(jQuery));


Sem resultado irmão.

Remova o código passado em cima, e passe-me o seguinte:

Código:

https://forum.brasilplaygames.com.br/39015.js

Usando no seu fórum, por favor!

Creio que funcionou, verifiquei em seu fórum e a borda bottom do post-head está de acordo com a cor do grupo. A borda de fora que eu não entendi como você quer.

Pedxz escreveu:Remova o código passado em cima, e passe-me o seguinte:

Código:

https://forum.brasilplaygames.com.br/39015.js

Usando no seu fórum, por favor!

cá está.

Código:

(function ($) {
  'use strict';
 
  $(function () {
    $('.post').each(function () {
      var $this = $(this);
      var $name = $this.find('.postprofile-name > a > span[style]');
      if (!$name.length) {
        return;
      }
      var color = $name.css('color');
      $this
        .find('.post-head', '.postprofile-avatar img')
          .css('border-color', color)
      ;
      });
    $('.post').each(function () {
      var $this = $(this);
      var $name = $this.find('.postprofile-name > a > span[style]');
      if (!$name.length) {
        return;
      }
      var color = $name.css('color');
      $this
        .find('.postprofile-avatar img')
          .css('border-color', color)
      ;
    });
    console.log([
      'Profile pages made by Luiz and other members of `Fórum dos Fóruns`.',
      'View more at: http://ajuda.forumeiros.com/'
    ].join('\n'));
  });
}(jQuery));

Mude o seu script para:

Código:

(function ($) {
  'use strict';
 
  $(function () {
 
    $('.post').each(function () {
      var $this = $(this);
      var $name = $this.find('.postprofile-name > a > span[style]');
      if (!$name.length) {
        return;
      }
      var color = $name.css('color');
      $this
        .find('.postprofile-avatar img')
          .css('border-color', color)
      ;
      $this
        .css('border-color', color)
      ;
      $this
        .find('.post-head', '.postprofile-avatar img')
          .css('border-color', color)
      ;
    });
  });
}(jQuery));


agradeço, resultou perfeitamente.  

só mais uma questão, caso eu queira aumentar a largura desta função, como configuro diante deste código? utilizo o border-width? até.

O senhor pode adicionar na sua folha de estilo, o seguinte código:

Código:

.post,
.post-head {
  border-width: 5px!important;
}

mude o valor 5 para o desejado!

Bom dia,

Já havia testado dessa forma, mas acabou que não ficando do meu agrado, deixarei da forma que está.

Agradeço, abraços e até logo.