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

techadd

Entrar

Coloque o crachá na postagem

2 participantes

descriptionResolvidoColoque o crachá na postagemSex Set 20, 2019 2:43 am

more_horiz
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 :


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

descriptionResolvidoRe: Coloque o crachá na postagemSáb Set 21, 2019 6:32 pm

more_horiz
Olá!

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

descriptionResolvidoRe: Coloque o crachá na postagemSáb Set 21, 2019 7:32 pm

more_horiz
Olá
Já enviei a mensagem com o link do logotipo
Saudações Muito feliz (rindo)

descriptionResolvidoRe: Coloque o crachá na postagemDom Set 22, 2019 5:59 pm

more_horiz
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

descriptionResolvidoRe: Coloque o crachá na postagemDom Set 22, 2019 6:14 pm

more_horiz
Olá irmão Eu acredito que não funciona

descriptionResolvidoRe: Coloque o crachá na postagemDom Set 22, 2019 6:27 pm

more_horiz
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!

descriptionResolvidoRe: Coloque o crachá na postagemDom Set 22, 2019 8:38 pm

more_horiz
Funcionou, mas parece ruim visualmente, acho que a modificação do css será corrigida. Obrigada

descriptionResolvidoRe: Coloque o crachá na postagemSeg Set 23, 2019 4:53 pm

more_horiz
Veja como está: http://prntscr.com/p9wgr8
Não me parece estar ruim, pelo contrário.

descriptionResolvidoRe: Coloque o crachá na postagemSeg Set 23, 2019 9:00 pm

more_horiz
Olá, eu estava modificando algumas coisas e eu sou excelente. Obrigado!

descriptionResolvidoRe: Coloque o crachá na postagemSeg Set 23, 2019 10:25 pm

more_horiz

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.

descriptionResolvidoRe: Coloque o crachá na postagem

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