Alterar aparência do widget de postadores Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Alterar aparência do widget de postadores

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Alterar aparência do widget de postadores

Mensagem por Hossain 03.01.21 6:34

Detalhes da questão


Endereço do fórum: http://bslccr.forumotion.com
Versão do fórum: phpBB3

Descrição


Olá de novo,

como projetar widget como esta imagem abaixo? além disso, esperava um avatar arredondado antes do nome de usuário no widget "Top poster"

https://i.servimg.com/u/f75/20/29/09/97/screen12.png
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 14:14

Olá @Chris Gayle,

Adicione na sua folha de estilo o seguinte código:
Código:
.module [summary="Top posters"] [title$="%"],
.module [summary="Top posters"] a[href^="/u"] + span,
.module [summary="Top posters"] [title$="%"] table {
    display: none;
}

.module [summary="Top posters"] a[href^="/u"] {
    font-size: 14px;
    font-weight: 700;
    color: #444;
}

.module [summary="Top posters"] [class^="row"] {
    display: block;
    width: 100%;
}

.module [summary="Top posters"] [title$="%"]::before {
    content: attr(title);
}

.module [summary="Top posters"] tr {
    margin-bottom: 1em !important;
    display: block !important;
}

Atenciosamente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 14:24

está mostrando um resultado diferente abaixo. apenas verifique esta imagem

https://i.servimg.com/u/f75/20/29/09/97/20210111.png
é possível adicionar avatar / imagem antes do nome de usuário? se sim, então por favor me oriente, agradeço antecipadamente
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 14:39

está mostrando um resultado diferente abaixo. apenas verifique esta imagem
A única diferença é o avatar, correto?! Leia este tópico: "[AddOn] Avatar em todos os widgets top e membros mais ativos!" Rosa
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 14:52

Olá novamente pedro, grande problema. Usei aquele código java que você forneceu, mas o nome de usuário foi embora. além disso, parece desordem, de fato. aqui está o código que usei
Código:
 
/****
 * Application: Avatar in: Top posters, Top posting users this week, Top posting users this month and Most active topic starters Widget!
 * Description: This application displays the members avatar in all widget of topic.
 * Version: 1.07022015-jq1.9.1 - Meni
 * Made and Optimizations by JScript - 2015/07/02
 * Copyright (c) 2015 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 **/
jQuery(function() {
  var oConfig = {
      sInfo: '<!--' +
        '* Application: Avatar in: Top posters, Top posting users this week, Top posting users this month and Most active topic starters Widget!' +
        '* Description: This application displays the members avatar in all widget of topic.' +
        '* Version: 1.07022015-jq1.9.1 - Meni' +
        '* Made and Optimizations by JScript - 2015/07/02' +
        '* Copyright (c) 2015 JScript <jscriptbrasil at live dot com>' +
        '* This work is free. You can redistribute it and/or modify it' +
        '* under the terms of the WTFPL, Version 2' +
        '-->',
      sDefaultAvatar: 'http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png',
      sCSS: '<style>' +
        '.jsUserPhoto.topWidget {' +
        'float: left;' +
        'margin-top: 3px;' +
        'margin-right: 3px;' +
        'background: none repeat scroll 0 0 #FFFFFF;' +
        'border: 1px solid #D5D5D5 !important;' +
        'box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);' +
        'padding: 1px;' +
        '}' +
        '.topWidget .jsUserPhoto_mini {' +
        'height: 16px !important;' +
        'width: 16px !important;' +
        '}' +
        '</style>'
  };
 
  // Add CSS
  jQuery(oConfig.sCSS).insertBefore('body');
 
  // Show member avatar in Recent Topics Widget!
  var oTarget = $('#right, #left').find('td.genmed, div.module td, div.module.main .main-content td').find('a[href^="/u"]'),
      iLen = oTarget.length,
      index = 0,
      td = oTarget.parent();
 
  td.css('width', td.width() + 24);
 
  oTarget.prepend('<a class="jsUserPhoto topWidget" href="#" title="No avatar!"><img class="jsUserPhoto_mini" src="' + oConfig.sDefaultAvatar + '" alt="" /></a>');
 
  oTarget.each(function () {
      var oThis = $(this),
        container = oThis.find('.jsUserPhoto_mini'),
        storIMG = '',
        userUrl = '';
 
      if (oThis.length) {
        userUrl = oThis.attr('href');
        oThis.find('a.jsUserPhoto.topWidget').attr('href', userUrl).attr('title', oThis.text());
 
        storIMG = sessionStorage.getItem('_top_' + userUrl); // Read object from sessionStorage, more fast!
        if (storIMG) {
            container.attr('src', storIMG);
        } else {
            // if not, then only request per session!!!
            jQuery.get(userUrl, function(data) {
              storIMG = jQuery('#emptyidcc .row1.gensmall img:eq(0), #profile-advanced-right .module:first .inner img:eq(0), #profile-advanced-right .main-content img:first, #profile-advanced-right .box-content.profile.center img:first', data).attr('src');
              if (storIMG !== undefined) {
                  container.attr('src', storIMG);
                  // Saving object in sessionStorage
                  sessionStorage.setItem('_top_' + userUrl, storIMG);
              }
            });
        }
      }
  });
});

e o resultado aqui está

https://i.servimg.com/u/f75/20/29/09/97/screen13.png

Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 14:56

Altere o código CSS que eu passei para:
Código:
        .module [summary="Top posters"] [title$="%"],
        .module [summary="Top posters"] a[href^="/u"] + .gensmall,
        .module [summary="Top posters"] [title$="%"] table {
            display: none;
        }
        
        .module [summary="Top posters"] a[href^="/u"] {
            font-size: 14px;
            font-weight: 700;
            color: #444;
        }
        
        .module [summary="Top posters"] [class^="row"] {
            display: block;
            width: 100%;
        }
        
        .module [summary="Top posters"] [title$="%"]::before {
            content: attr(title);
        }
        
        .module [summary="Top posters"] tr {
            margin-bottom: 1em !important;
            display: block !important;
        }
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 15:12

obrigado, quase terminado. só precisa de um avatar arredondado. raio da borda: 100%; onde colocá-lo ou quaisquer alterações
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 15:15

Código:
.topWidget .jsUserPhoto_mini {
    border-radius: 50%;
}
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 15:23

Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 15:29

Use mais isto:
Código:
.jsUserPhoto.topWidget {
    background: transparent;
    border-width: 0 !important;
    box-shadow: none;
}
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 15:41

Eu adicionei este código, mas ainda vejo o mesmo problema. você pode me aconselhar mais se VOCÊ não se importa?
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 15:43

Altere para:
Código:
        .jsUserPhoto.topWidget {
            background: transparent  !important;
            border-width: 0 !important;
            box-shadow: none  !important;
        }
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 16:01

funciona, mas vejo um quadrado branco ao redor das imagens arredondadas e outro problema é - o avatar padrão do fórum ainda não é arredondado. veja ISTO abaixo
https://i.servimg.com/u/f75/20/29/09/97/20210115.png
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 04.01.21 16:02

Altere o script para:
Código:
       
        /****
        * Application: Avatar in: Top posters, Top posting users this week, Top posting users this month and Most active topic starters Widget!
        * Description: This application displays the members avatar in all widget of topic.
        * Version: 1.07022015-jq1.9.1 - Meni
        * Made and Optimizations by JScript - 2015/07/02
        * Copyright (c) 2015 JScript <jscriptbrasil at live dot com>
        * This work is free. You can redistribute it and/or modify it
        * under the terms of the WTFPL, Version 2
        **/
        jQuery(function() {
          var oConfig = {
              sInfo: '<!--' +
                '* Application: Avatar in: Top posters, Top posting users this week, Top posting users this month and Most active topic starters Widget!' +
                '* Description: This application displays the members avatar in all widget of topic.' +
                '* Version: 1.07022015-jq1.9.1 - Meni' +
                '* Made and Optimizations by JScript - 2015/07/02' +
                '* Copyright (c) 2015 JScript <jscriptbrasil at live dot com>' +
                '* This work is free. You can redistribute it and/or modify it' +
                '* under the terms of the WTFPL, Version 2' +
                '-->',
              sDefaultAvatar: 'http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png',
              sCSS: '<style>' +
                '.jsUserPhoto.topWidget {' +
                'float: left;' +
                'margin-top: 3px;' +
                'margin-right: 3px;' +
                'background: none repeat scroll 0 0 #FFFFFF;' +
                'box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);' +
                'padding: 1px;' +
                '}' +
                '.topWidget .jsUserPhoto_mini {' +
                'height: 16px !important;' +
                'width: 16px !important;' +
                '}' +
                '</style>'
          };
       
          // Add CSS
          jQuery(oConfig.sCSS).insertBefore('body');
       
          // Show member avatar in Recent Topics Widget!
          var oTarget = $('#right, #left').find('td.genmed, div.module td, div.module.main .main-content td').find('a[href^="/u"]'),
              iLen = oTarget.length,
              index = 0,
              td = oTarget.parent();
       
          td.css('width', td.width() + 24);
       
          oTarget.prepend('<a class="jsUserPhoto topWidget" href="#" title="No avatar!"><img class="jsUserPhoto_mini" src="' + oConfig.sDefaultAvatar + '" alt="" /></a>');
       
          oTarget.each(function () {
              var oThis = $(this),
                container = oThis.find('.jsUserPhoto_mini'),
                storIMG = '',
                userUrl = '';
       
              if (oThis.length) {
                userUrl = oThis.attr('href');
                oThis.find('a.jsUserPhoto.topWidget').attr('href', userUrl).attr('title', oThis.text());
       
                storIMG = sessionStorage.getItem('_top_' + userUrl); // Read object from sessionStorage, more fast!
                if (storIMG) {
                    container.attr('src', storIMG);
                } else {
                    // if not, then only request per session!!!
                    jQuery.get(userUrl, function(data) {
                      storIMG = jQuery('#emptyidcc .row1.gensmall img:eq(0), #profile-advanced-right .module:first .inner img:eq(0), #profile-advanced-right .main-content img:first, #profile-advanced-right .box-content.profile.center img:first', data).attr('src');
                      if (storIMG !== undefined) {
                          container.attr('src', storIMG);
                          // Saving object in sessionStorage
                          sessionStorage.setItem('_top_' + userUrl, storIMG);
                      }
                    });
                }
              }
          });
        });
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 04.01.21 16:11

obrigado pedro, e de qualquer maneira para tornar o avatar padrão arredondado também? aqui VOCÊ vê abaixo?

https://i.servimg.com/u/f75/20/29/09/97/20210116.png
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 05.01.21 14:44

o avatar padrão arredondado também
O avatar é redondo, mas como tem um fundo transparente não parece. De qualquer forma use:
Código:
.jsUserPhoto.topWidget {
    border-radius: 50% !important;
    background-color: white !important;
    border: 1px solid #fff !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0,0,0,0.1) !important;
    background-clip: padding-box !important;
    padding: 0;
    object-fit: cover;
    object-position: center;
}
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por Hossain 05.01.21 14:54

oh sim, resolvido agora, muito obrigado querida
Hossain
Hossain
***

Membro desde : 16/12/2020
Mensagens : 105
Pontos : 192

http://bslccr.forumotion.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Alterar aparência do widget de postadores

Mensagem por tikky 05.01.21 15:01

Tópico resolvido


Movido para "Questões resolvidas".
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

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