Emblemas css

Detalhes da questão

Endereço do fórum: http://beta.masterforum.biz/
Versão do fórum: ModernBB

Descrição

Mds.. to viciado em criar topico de dúvida já está acabando minhas dúvidas.

Eu usei esse tutorial para criar tal sistema de emblemas.
https://ajuda.forumeiros.com/t35486-tutorial-criar-campo-premios-para-membros

Queria fazer um efeito parecido com esse


A verdade que queria um quadrado pequeno em volta dos emblemas um parecido com o do meu rank.
Só que quadrado e separado para cada emblema criado..



Se a parte do nome puder ficar igual a primeira imagem eu agradeço.

Crie um novo JavaScript investido nos tópicos:

Código:

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

  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();

      if (!/emblemas/gi.test(_text)) {
        return;
      }

      $this.addClass('perfil-emblemas');
    });

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  display: inline-block;',
  '  margin-right: 6px;',
  '  border: solid 1px #ddd;',
  '  padding: 3px;',
  '  box-shadow: inset 0 0 0 2px #ddd;',
  '}'
]));

o/

Luiz escreveu:Crie um novo JavaScript investido nos tópicos:

Código:

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

  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();

      if (!/emblemas/gi.test(_text)) {
        return;
      }

      $this.addClass('perfil-emblemas');
    });

    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  display: inline-block;',
  '  margin-right: 6px;',
  '  border: solid 1px #ddd;',
  '  padding: 3px;',
  '  box-shadow: inset 0 0 0 2px #ddd;',
  '}'
]));

o/

Pode adicionar um texto em cima escrito Emblemas bem centralizado?
se puder deixar a opção de aparecer o texto em true e false eu agradeço.

O único efeito que faltou foi aparecer o texto no hover da imagem..
Segui a primeira foto do tópico que vai entender o efeito hover.

Se pude fazer essas ultimas coisas eu agradeço.

Assim?

Código:

(function ($, css) {
  'use strict';
 
  $(function () {
    $('.post_field').each(function () {
      var $this = $(this);
      var _text = $this.text();
 
      if (!/emblemas/gi.test(_text)) {
        return;
      }
 
      $this.addClass('perfil-emblemas');
     
      $this
        .find('img')
          .each(function () {
            var $this = $(this);

            $this.attr('title', $this.next('strong').text());
           
            $this.tooltipster();
          })
      ;
    });
 
    $('<style>', { 'text': css.join('\n') }).appendTo('head');
  });
}(jQuery, [
  '.perfil-emblemas {',
  '  font-size: 0;',
  '  text-align: center;',
  '  margin: 10px 0;',
  '}',
  '',
  '.perfil-emblemas * {',
  '  transition: none !important;',
  '}',
  '',
  '.perfil-emblemas::before {',
  '  content: "Emblemas";',
  '  display: block;',
  '  font-size: 13px;',
  '  margin-bottom: 6px;',
  '  font-weight: 500;',
  '}',
  '',
  '.perfil-emblemas img {',
  '  display: inline-block;',
  '  margin-right: 6px;',
  '  border: solid 1px #ddd;',
  '  padding: 3px;',
  '  box-shadow: inset 0 0 0 2px #ddd;',
  '}'
]));

Cara ficou majestoso isso LOL
Só uma dúvida


Como posso alterar isso via css?

A estrutura desse tooltip em questão é:

Código:

<div class="tooltipster-base tooltipster-default tooltipster-fade tooltipster-fade-show" style="transition-duration: 350ms; animation-duration: 350ms; top: 990px; left: 1074px;">
  <div class="tooltipster-content">Nome</div>
  <div class="tooltipster-arrow-top tooltipster-arrow" style="">
    <span style="border-color:rgb(255, 255, 255);"></span>
  </div>
</div>

Basta usar essa classe. :3

Isso já resolve minha dúvida.
Vou reputar. E valeu por sempre me ajudar e.e

Como sempre digo, @virus; estou aqui para ajudar.