Hitskin.com
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
))
Facebook
Twitter
Pinterest
Youtube
