Tech Mais
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Ir em baixo
iLuciano
iLuciano
Ativo

Mensagens : 126
Pontos : 190
Reputação : 0
Data de inscrição : 10/09/2019
Idade : 21
Localização : Argentina
http://lucianomicle.foroactivo.com/

Resolvido Coloque o crachá na postagem

em Sex Set 20, 2019 2:43 am
Minha questão:
Olá a todos.
Quero fazer um crachá no canto da postagem, onde desejo criar um para o administrador, moderador e um simples para o usuário.
É um problema que, ao escrever / criar um tema, esteja nesse canto. Deixo uma imagem de referência e, no fórum em que a vi, a envio ao privado para verificar e me ajudar.

Atenciosamente, Luciano.
Spoiler:
Coloque o crachá na postagem Rangor10


Endereço do meu fórum:
http://

RafaelS.
RafaelS.
Administrador

Mensagens : 635
Pontos : 926
Reputação : 60
Data de inscrição : 29/04/2014
https://www.tech-mais.com

Resolvido Re: Coloque o crachá na postagem

em Sab Set 21, 2019 6:32 pm
Olá!

Não recebi o link de onde viu esse efeito, lamento. Descontente


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
iLuciano
iLuciano
Ativo

Mensagens : 126
Pontos : 190
Reputação : 0
Data de inscrição : 10/09/2019
Idade : 21
Localização : Argentina
http://lucianomicle.foroactivo.com/

Resolvido Re: Coloque o crachá na postagem

em Sab Set 21, 2019 7:32 pm
Olá
Já enviei a mensagem com o link do logotipo
Saudações Muito feliz (rindo)
RafaelS.
RafaelS.
Administrador

Mensagens : 635
Pontos : 926
Reputação : 60
Data de inscrição : 29/04/2014
https://www.tech-mais.com

Resolvido Re: Coloque o crachá na postagem

em Dom Set 22, 2019 5:59 pm
Olá!

Crie um novo Javascript, com o seguinte codigo:

Código:
(function($,styles){'use strict';var colorMap=[{color:'#FF0000',text:'STAFF'},{color:'#FF0066',text:'STAFF'},{color:'#1BC25B',text:'STAFF'},{color:'#EF3333',text:'STAFF'},{color:'#8B4513',text:'STAFF'},{color:'#FF00FF',text:'STAFF'},{color:'#971AEB',text:'STAFF'},{color:'0033FF',text:'STAFF'},{color:'#F03333',text:'STAFF'},{color:'#66ABFF',text:'STAFF'},{color:'#14748C',text:'STAFF'},{color:'#AAAA7F',text:'STAFF'}];function getYiq(colorHex){if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorHex)){return'#fff'}if(colorHex.length===4){colorHex=colorHex.replace(/^#(.)(.)(.)/i,'#$1$1$2$2$3$3')}const r=parseInt(colorHex.substr(1,2),16);const g=parseInt(colorHex.substr(3,2),16);const b=parseInt(colorHex.substr(5,2),16);const yiq=(r*299+g*587+b*114)/1000;return yiq>=128?dark:white}function createEl(text,color,yiq){function $pseudo(className){return $('<span>').css({borderColor:color}).addClass('lffg-post-badge__'+className)}var $text=$('<span class="lffg-post-badge__text">').css({backgroundColor:color,color:yiq}).text(text).prepend($pseudo('before')).append($pseudo('after'));return'<div class="lffg-post-badge">'+$text.prop('outerHTML')+'</div>'}$(function(){$('.post').each(function(){var $post=$(this);var $user=$post.find('.postprofile-name a[href] > span[style]');var color=$user.css('color');if(!color){return}$.each($.map(colorMap,function(map){map.color=$('<span>').css('color',map.color).css('color');return map}),function(index,map){if(map.color!==color){return}var yiq=getYiq(color);$post.append(createEl(map.text,color,yiq))})});$('<style>',{text:styles.join('')}).appendTo('head')})})(jQuery,['.post {','  position: relative;','  z-index: 10;','}','','.lffg-post-badge {','  position: absolute;','  right: -5px;','  top: -5px;','  z-index: 1;','  overflow: hidden;','  width: 75px;','  height: 75px;','  text-align: right;','}','','.lffg-post-badge__text {','  background-color: #000;','  display: block;','  width: 100px;','  text-align: center;','  position: absolute;','  top: 19px;','  right: -21px;','  transform: rotate(45deg);','}','','.lffg-post-badge__before,','.lffg-post-badge__after {','  position: absolute;','  top: 100%;','  z-index: -1;','  border: 3px solid #000;','}','','.lffg-post-badge__before {','  left: 0;','  border-right-color: transparent !important;','  border-bottom-color: transparent !important;','}','','.lffg-post-badge__after {','  right: 0;','  border-left-color: transparent !important;','  border-bottom-color: transparent !important;','}']);

Até mais. Feliz


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
iLuciano
iLuciano
Ativo

Mensagens : 126
Pontos : 190
Reputação : 0
Data de inscrição : 10/09/2019
Idade : 21
Localização : Argentina
http://lucianomicle.foroactivo.com/

Resolvido Re: Coloque o crachá na postagem

em Dom Set 22, 2019 6:14 pm
Olá irmão Eu acredito que não funciona
RafaelS.
RafaelS.
Administrador

Mensagens : 635
Pontos : 926
Reputação : 60
Data de inscrição : 29/04/2014
https://www.tech-mais.com

Resolvido Re: Coloque o crachá na postagem

em Dom Set 22, 2019 6:27 pm
Olá!

Troque por este:

Código:
(function($,styles){'use strict';var colorMap=[{color:'#D6351C',text:'STAFF'},{color:'#FF0066',text:'STAFF'},{color:'#1BC25B',text:'STAFF'},{color:'#EF3333',text:'STAFF'},{color:'#8B4513',text:'STAFF'},{color:'#FF00FF',text:'STAFF'},{color:'#971AEB',text:'STAFF'},{color:'0033FF',text:'STAFF'},{color:'#F03333',text:'STAFF'},{color:'#66ABFF',text:'STAFF'},{color:'#14748C',text:'STAFF'},{color:'#AAAA7F',text:'STAFF'}];function getYiq(colorHex){if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(colorHex)){return'#fff'}if(colorHex.length===4){colorHex=colorHex.replace(/^#(.)(.)(.)/i,'#$1$1$2$2$3$3')}const r=parseInt(colorHex.substr(1,2),16);const g=parseInt(colorHex.substr(3,2),16);const b=parseInt(colorHex.substr(5,2),16);const yiq=(r*299+g*587+b*114)/1000;return yiq>=128?dark:white}function createEl(text,color,yiq){function $pseudo(className){return $('<span>').css({borderColor:color}).addClass('lffg-post-badge__'+className)}var $text=$('<span class="lffg-post-badge__text">').css({backgroundColor:color,color:yiq}).text(text).prepend($pseudo('before')).append($pseudo('after'));return'<div class="lffg-post-badge">'+$text.prop('outerHTML')+'</div>'}$(function(){$('.post').each(function(){var $post=$(this);var $user=$post.find('.authname a[href] > span[style]');var color=$user.css('color');if(!color){return}$.each($.map(colorMap,function(map){map.color=$('<span>').css('color',map.color).css('color');return map}),function(index,map){if(map.color!==color){return}var yiq=getYiq(color);$post.append(createEl(map.text,color,yiq))})});$('<style>',{text:styles.join('')}).appendTo('head')})})(jQuery,['.post {','  position: relative;','  z-index: 10;','}','','.lffg-post-badge {','  position: absolute;','  right: -5px;','  top: -5px;','  z-index: 1;','  overflow: hidden;','  width: 75px;','  height: 75px;','  text-align: right;','}','','.lffg-post-badge__text {','  background-color: #000;','  display: block;','  width: 100px;','  text-align: center;','  position: absolute;','  top: 37px;','  right: -21px;','  transform: rotate(45deg);','}','','.lffg-post-badge__before,','.lffg-post-badge__after {','  position: absolute;','  top: 100%;','  z-index: -1;','  border: 3px solid #000;','}','','.lffg-post-badge__before {','  left: 0;','  border-right-color: transparent !important;','  border-bottom-color: transparent !important;','}','','.lffg-post-badge__after {','  right: 0;','  border-left-color: transparent !important;','  border-bottom-color: transparent !important;','}']);

Não se esqueça de alterar as cores da STAFF, para as que usa no seu fórum. Feliz

Até breve!


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
iLuciano
iLuciano
Ativo

Mensagens : 126
Pontos : 190
Reputação : 0
Data de inscrição : 10/09/2019
Idade : 21
Localização : Argentina
http://lucianomicle.foroactivo.com/

Resolvido Re: Coloque o crachá na postagem

em Dom Set 22, 2019 8:38 pm
Funcionou, mas parece ruim visualmente, acho que a modificação do css será corrigida. Obrigada
RafaelS.
RafaelS.
Administrador

Mensagens : 635
Pontos : 926
Reputação : 60
Data de inscrição : 29/04/2014
https://www.tech-mais.com

Resolvido Re: Coloque o crachá na postagem

em Seg Set 23, 2019 4:53 pm
Veja como está: http://prntscr.com/p9wgr8
Não me parece estar ruim, pelo contrário.


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
iLuciano
iLuciano
Ativo

Mensagens : 126
Pontos : 190
Reputação : 0
Data de inscrição : 10/09/2019
Idade : 21
Localização : Argentina
http://lucianomicle.foroactivo.com/

Resolvido Re: Coloque o crachá na postagem

em Seg Set 23, 2019 9:00 pm
Olá, eu estava modificando algumas coisas e eu sou excelente. Obrigado!
RafaelS.
RafaelS.
Administrador

Mensagens : 635
Pontos : 926
Reputação : 60
Data de inscrição : 29/04/2014
https://www.tech-mais.com

Resolvido Re: Coloque o crachá na postagem

em Seg Set 23, 2019 10:25 pm

Tópico resolvido

O autor do tópico deu a sua questão como resolvida, e assim sendo o tópico será enviado para o arquivo.


Olá Convidado!
Leia as regras e disposições gerais do Tech Mais.
Caso tenha alguma dúvida poderá contactar a nossa equipe..
Nos lhe desejamos uma ótima estadia em nosso fórum.
RafaelS. — Fundador
Conteúdo patrocinado

Resolvido Re: Coloque o crachá na postagem

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