badge box

Go down

Solved badge box

Post by Amadeus on June 9th 2020, 5:20 pm

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

badge box Supp10


Last edited by Amadeus on June 9th 2020, 10:42 pm; edited 1 time in total
Amadeus
Amadeus
Forumember

Female Posts : 143
Reputation : 1
Language : Polish, English
Location : Poland

View user profile

Back to top Go down

Solved Re: badge box

Post by TonnyKamper on June 9th 2020, 5:40 pm

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

Female Posts : 637
Reputation : 53
Language : Dutch/English
Location : The Netherlands

View user profile http://www.nederlandheelt.nl/forum

Back to top Go down

Solved Re: badge box

Post by pedxz on June 9th 2020, 5:44 pm

Hey @Amadeus,

Creation of the field

Go to ACP > Users and Groups > Users > Profiles , click on badge box 757883 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 (badge box 323947) 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
pedxz
Forumember

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: badge box

Post by Amadeus on June 9th 2020, 7:46 pm

@pedxz wrote:Hey @Amadeus,

Creation of the field

Go to ACP > Users and Groups > Users > Profiles , click on badge box 757883 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 (badge box 323947) 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?

badge box Screen11
Amadeus
Amadeus
Forumember

Female Posts : 143
Reputation : 1
Language : Polish, English
Location : Poland

View user profile

Back to top Go down

Solved Re: badge box

Post by pedxz on June 9th 2020, 7:55 pm

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

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: badge box

Post by Amadeus on June 9th 2020, 8:16 pm

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

I send you for PM my adress
Amadeus
Amadeus
Forumember

Female Posts : 143
Reputation : 1
Language : Polish, English
Location : Poland

View user profile

Back to top Go down

Solved Re: badge box

Post by pedxz on June 9th 2020, 10:06 pm

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);
pedxz
pedxz
Forumember

Male Posts : 310
Reputation : 83
Language : Português
Location : Forumeiros

View user profile https://www.forumotion.com/create-forum/modernbb

Back to top Go down

Solved Re: badge box

Post by Amadeus on June 9th 2020, 10:41 pm

Yay is working! thank you so much for help me badge box 1f60d
Amadeus
Amadeus
Forumember

Female Posts : 143
Reputation : 1
Language : Polish, English
Location : Poland

View user profile

Back to top Go down

Solved Re: badge box

Post by APE on June 9th 2020, 11:14 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


badge box Left1212badge box Center11badge box Right112
badge box Ape_b110
badge box Ssshfm13
badge box Ape1010
APE
APE
Administrator
Administrator

Male Posts : 15637
Reputation : 1687
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum