Emblemas css

2 participantes

Ir para baixo

Tópico resolvido Emblemas css

Mensagem por virus 24.09.17 23:02

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 Rindo Muito feliz 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
Emblemas css XqsuSVH

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..
Emblemas css AjdNcP11Sg_vT7dndSSJbg
Emblemas css Q-VwK6MtQYapd0IKghNJoA

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


Última edição por virus em 25.09.17 1:12, editado 1 vez(es)
virus
virus
Membro

Membro desde : 03/03/2013
Mensagens : 695
Pontos : 910

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por Luiz 24.09.17 23:25

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
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por virus 25.09.17 0:01

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/
Emblemas css J50WbVM8QgG_xZ4-TikWpg

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.
virus
virus
Membro

Membro desde : 03/03/2013
Mensagens : 695
Pontos : 910

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por Luiz 25.09.17 0:40

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;',
  '}'
]));
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por virus 25.09.17 0:52

Cara ficou majestoso isso LOL
Só uma dúvida
Emblemas css 8WrYodPzS2G5ELhXnC4RPA

Como posso alterar isso via css?

virus
virus
Membro

Membro desde : 03/03/2013
Mensagens : 695
Pontos : 910

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por Luiz 25.09.17 1:03

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
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por virus 25.09.17 1:11

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

Membro desde : 03/03/2013
Mensagens : 695
Pontos : 910

Ir para o topo Ir para baixo

Tópico resolvido Re: Emblemas css

Mensagem por Luiz 25.09.17 1:16

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

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Luiz
Luiz
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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