How to put Rank below Avatar but above Username [phpBB3]
4 posters
Page 1 of 1
How to put Rank below Avatar but above Username [phpBB3]
Hey, just a quick javascript/CSS (if possible) request. I've done some searches, and none of what I could find gave satisfactory results*. Basically, I want to rearrange the Avatar, Rank title/image, and Username so that they appear in that order on a phpBB3 forum. Naturally, it goes Avatar, Username, Rank, and it looks very messy when you use images for the Ranks, rather than words.
This is a quick example of how it looks, and how I'd like it to look.
Thanks in advance, if anyone can help me out with this.
* Most results were for other versions, like PunBB and phpBB2. The one working one I could get for phpBB3 moved username and rank above the avatar, and also threw the avatar out of alignment.
This is a quick example of how it looks, and how I'd like it to look.
Thanks in advance, if anyone can help me out with this.
* Most results were for other versions, like PunBB and phpBB2. The one working one I could get for phpBB3 moved username and rank above the avatar, and also threw the avatar out of alignment.
Last edited by CJ11™ on March 10th 2013, 9:15 pm; edited 2 times in total (Reason for editing : Just some minor word changes. Nothing important.)
Re: How to put Rank below Avatar but above Username [phpBB3]
Hi,
I don't think this is possible, I haven't seen any JS available to do this. You can only modify to your likes within the versions: phpBB2 or punBB.
I don't think this is possible, I haven't seen any JS available to do this. You can only modify to your likes within the versions: phpBB2 or punBB.
Sir Chivas™- Helper
- Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: How to put Rank below Avatar but above Username [phpBB3]
I figured it MAY not be possible. However, I saw no harm in asking :3
Here's the code that I found that moved the username and rank above the avatar, thought I may post it to see if it gave anyone any ideas. If there's no code given within a while (couple of days), I might just swap to BB2, because it's so much more customizable (I remember from past experience on other forums >< )
Here's the code that I found that moved the username and rank above the avatar, thought I may post it to see if it gave anyone any ideas. If there's no code given within a while (couple of days), I might just swap to BB2, because it's so much more customizable (I remember from past experience on other forums >< )
- Code:
$(function(){
var post = $('.postprofile');
for(var i = 0, l = post.length; i<l; i++) {
var av = post[i].getElementsByTagName('a')[0];
var dd = document.createElement('dd').appendChild(av);
post[i].getElementsByTagName('dl')[0].insertBefore(dd,post[i].getElementsByTagName('dd')[1]);
}
});
Re: How to put Rank below Avatar but above Username [phpBB3]
BUMP (it's ALMOST 24 hours... I don't think 20 minutes will make a difference)
I've decided to just change forum version to phpBB2, and I did the changes.
Would I be able to provide the code to be added to the "Tips & Tricks", so people can do it with the rank and title ABOVE the username? It looks much tidier in my opinion, than having an avatar, followed by a name, followed by another image. If not, oh well. Feel free to call this "Finished" (it's not exactly "solved") and lock the thread.
I've decided to just change forum version to phpBB2, and I did the changes.
Would I be able to provide the code to be added to the "Tips & Tricks", so people can do it with the rank and title ABOVE the username? It looks much tidier in my opinion, than having an avatar, followed by a name, followed by another image. If not, oh well. Feel free to call this "Finished" (it's not exactly "solved") and lock the thread.
Last edited by Calix on March 12th 2013, 11:31 am; edited 1 time in total (Reason for editing : typo correction)
Re: How to put Rank below Avatar but above Username [phpBB3]
If you want to submit a tutorial, please read this - https://help.forumotion.com/t61209-how-to-submit-a-tutorial
You said that it is not exactly solved. What is still wrong?
You said that it is not exactly solved. What is still wrong?
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Re: How to put Rank below Avatar but above Username [phpBB3]
Well, technically, for this to be solved, the original issue would have to have been answered or solved. Because I got around it by swapping forum versions, this is technically not solved, and someone else may have the same issue further down the line.
As for submitting the tutorial, I thought it'd be a little pointless as there is already one for putting the user name and rank title/image below the avatar (this one, to be specific), this is just an alteration that swaps those two around. It would have been logical to tack this on underneath as an alternate way of doing it, if it suited the user's fancy. But if you insist, I will submit it as its own tutorial :3
(forget the above, I sent a message to Base asking to have that tutorial updated)
(forget the above, I sent a message to Base asking to have that tutorial updated)
Re: How to put Rank below Avatar but above Username [phpBB3]
Make a new javascript and add that code :
- Code:
$(document).ready(function(){
$('.post .postprofile').each(function(){
var bef = $(this).find('dl dt a:has("img")');
$(this).find('dl dt strong:has("a")').insertBefore(bef);
$(this).find('dl dt strong:has("a")').after('<br>');
$(this).find('dl dt').next('dd').insertBefore(bef);
$(this).find('dl dt dd').wrapInner('<div class="rank_dd"></div>');
$(this).find('dl dt dd .rank_dd').unwrap().css('margin-top','5px').css('margin-bottom','5px');
});
});
Re: How to put Rank below Avatar but above Username [phpBB3]
candy_fear wrote:Make a new javascript and add that code :
- Code:
$(document).ready(function(){
$('.post .postprofile').each(function(){
var bef = $(this).find('dl dt a:has("img")');
$(this).find('dl dt strong:has("a")').insertBefore(bef);
$(this).find('dl dt strong:has("a")').after('<br>');
$(this).find('dl dt').next('dd').insertBefore(bef);
$(this).find('dl dt dd').wrapInner('<div class="rank_dd"></div>');
$(this).find('dl dt dd .rank_dd').unwrap().css('margin-top','5px').css('margin-bottom','5px');
});
});
I tested this out, and it placed the name and rank above the avatar, which is the complete opposite of what I was aiming for. HOWEVER, it is a good update of the other script I came across that puts them above the avatar, because it doesn't screw up the alignment. +1 for that, at least.
Similar topics
» Avatar under username and rank - phpBB3
» Username & Rank under the avatar for phpbb3 version ?
» phpbb3 moving username & rank above avatar
» center avatar, rank title and rank image phpbb3
» PhpBB3 (Username under the Avatar)
» Username & Rank under the avatar for phpbb3 version ?
» phpbb3 moving username & rank above avatar
» center avatar, rank title and rank image phpbb3
» PhpBB3 (Username under the Avatar)
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum