badge box

Welcome back. I have a question, is it possible, as on the following screen, to make a separate field under the avatar so that the badges are visible? For example, make a field: Badge [text zone], and then set this field to be in this box ? I have forum PHPBB2

Maybe something like this @Amadeus https://help.forumotion.com/t155075-profile-awards-with-hover-over-names#1065666 you can customize it to your needs..

Hey @Amadeus,

Creation of the field

Go to ACP > Users and Groups > Users > Profiles , click on use the following settings:

• Type Text Zone
  Name (whatever you want)
  Icon URL (if desired)
  Necessarily filled ? No
  Display (wherever you want)
  Display type Icon
  Who can modify the profile field value ? (whatever you want)
  Display this field for users that are at least (whatever you want)
  Separator Back to the line

Default content

Code:

[table class="field_badge"][tr][td][/td][/tr][/table]

After creating, edit the field () again and click on "Replace content"!

Field management

The field will now have the following value:

Code:

[table class="field_badge"][tr][td][/td][/tr][/table]

and to add badges, just add the image inside the table:

Code:

[table class="field_badge"][tr][td][img]https://image.flaticon.com/icons/png/512/789/789432.png[/img][/td][/tr][/table]

Style

In your style sheet, add:

Code:

.field_badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
}


.field_badge img {
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 35px !important;
    margin: auto 4px 4px auto;
    vertical-align: middle;
    width: 35px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.field_badge br { display: none!important; }

I used the translator to facilitate any doubt just say! Source

pedxz wrote:Hey @Amadeus,

Creation of the field

Go to ACP > Users and Groups > Users > Profiles , click on use the following settings:

• Type Text Zone
  Name (whatever you want)
  Icon URL (if desired)
  Necessarily filled ? No
  Display (wherever you want)
  Display type Icon
  Who can modify the profile field value ? (whatever you want)
  Display this field for users that are at least (whatever you want)
  Separator Back to the line

Default content

Code:

[table class="field_badge"][tr][td][/td][/tr][/table]

After creating, edit the field () again and click on "Replace content"!

Field management

The field will now have the following value:

Code:

[table class="field_badge"][tr][td][/td][/tr][/table]

and to add badges, just add the image inside the table:

Code:

[table class="field_badge"][tr][td][img]https://image.flaticon.com/icons/png/512/789/789432.png[/img][/td][/tr][/table]

Style

In your style sheet, add:

Code:

.field_badge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  width: 100%;
}


.field_badge img {
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    height: 35px !important;
    margin: auto 4px 4px auto;
    vertical-align: middle;
    width: 35px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.field_badge br { display: none!important; }

I used the translator to facilitate any doubt just say! Source

Hi @Pedxz

I did as you wrote by design, and I would like to make a box like the one up there, but the box is in the avatar hover, and there is a possibility to move one box to be visible under it?

Can you give me your forum address (URL)?

pedxz wrote:Can you give me your forum address (URL)?

I send you for PM my adress

Create a new JavaScript page with investment in the topics with the following code:

Code:

(function($) {
  'use strict';
 
    $(function() {
   
      $('.post > td').each(function () {
      var $this = $(this);
       
        $('.field_badge').each(function() {
          var $badge = $(this);
         
        if(!$this.find($badge).length) return;
         
          $this.append('<div class="badges_label"></div>');
       
          $('.badges_label')
            .html($badge);
           
        });
       
        });
      });
})(jQuery);

Yay is working! thank you so much for help me