Home
Hello All,
Choose your banner at the top of posts
--------------------------------------
This trick allows the user to choose the banner and they want
At the top of the posts (❁´◡`❁) Â
-----------------------------
WORKS ON THE FOLLOWING FORUM VERSIONS:
PhpBB2
Phpbb3
PunBB
Invision
ModernBB
AwesomeBB
Â
 : go to the Administration Panel >> Users & Groups >> Profiles Add a field
-------------
Make choices as shown in the picture
Â
 The field must be at the top of the list (one number)
------------------------------------------------
Â
 Copy and paste the codes for your forum.- All other versions:
Find the next part in viewtopic_body template
- Code:
<!-- BEGIN displayed -->
replace it with
- Code:
<!-- BEGIN displayed -->
 <p-layer class="po-st">
      <div class="pos-t">
                  <div class="avatark">
                    {postrow.displayed.POSTER_AVATAR}
                  </div>
                </div>
                 <div align="center"></div>
                 <div class="cover"></div>
  </p-layer>
Javascript
------------
Title  : as you like
Placement : In the topics
code
- Code:
$(function() {
$('p-layer.po-st').each(function(){
var cover = $(this).find('a').attr('href'),
 covero = $(this).find('.cover');
 $.get(cover+'/u' , function(d) {
  var coverp = $('#profile-advanced-details dl:first, .profile-advanced-stats:first', d);
  if (coverp[0]) {
   coverp = coverp.html();
$(covero).append('<div class="user-cover">' + coverp + '</div>');
  }
 });
console.log(cover); Â
});
});
document.write('<style type="text/css">
.avatark, pos-t {
 display: none;
}
p-layer.po-st img {
 border-radius: 30px 30px 0px 0px;
 border: solid 2px #c5bbbb;
 width: 100%;
 height: 130px;
}
p-layer.po-st {
 font-size: 0;
}
     Â
</style>');
Don't forget to save
- phpBB2:
Find the next part in viewtopic_body template
- Code:
<!-- BEGIN displayed -->
replace it with
- Code:
<!-- BEGIN displayed -->
 <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <p-layer class="po-st">
      <div class="pos-t">
                  <div class="avatark">
                    {postrow.displayed.POSTER_AVATAR}
                  </div>
                </div>
                 <div align="center"></div>
                 <div class="cover"></div>
  </p-layer>
Javascript
------------
Title  : as you like
Placement : In the topics
code
- Code:
$(function() {
$('p-layer.po-st').each(function(){
var cover = $(this).find('a').attr('href'),
 covero = $(this).find('.cover');
 $.get(cover+'/u' , function(d) {
  var coverp = $('#profile-advanced-details dl:first, .profile-advanced-stats:first', d);
  if (coverp[0]) {
   coverp = coverp.html();
$(covero).append('<div class="user-cover">' + coverp + '</div>');
  }
 });
console.log(cover); Â
});
});
document.write('<style type="text/css">
.avatark, pos-t {
 display: none;
}
dd {
  margin-inline-start: 0px;
}
p-layer.po-st img {
  border-radius: 30px 30px 0px 0px;
  border: solid 1px#c5bbbb;
  width: 100%;
  height: 130px;
  margin-top: 20px;
}
p-layer.po-st {
 font-size: 0;
}
     Â
</style>');
Don't forget to save
 Â
  Now users can choose their banner from profile
We hope you like this great Trick Â
_____________________________
This tutorial was written by @كونان2000,
(The codes were written by @كونان2000, and @omarpop23 code was used in this thread)
Last edited by كونان2000 on August 26th 2023, 6:52 am; edited 5 times in total
))