The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to put Rank below Avatar but above Username [phpBB3]

4 posters

Go down

In progress How to put Rank below Avatar but above Username [phpBB3]

Post by Calix March 10th 2013, 10:05 am

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.

How to put Rank below Avatar but above Username [phpBB3] Forumoex1

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, 3:15 pm; edited 2 times in total (Reason for editing : Just some minor word changes. Nothing important.)
Calix
Calix
New Member

Posts : 13
Reputation : 1
Language : English
Location : New Zealand

View user profile http://calixrparena.forumotion.co.nz/

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by Sir Chivas™ March 10th 2013, 3:15 pm

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.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6823
Reputation : 433
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

View user profile

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by Calix March 11th 2013, 5:47 am

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 >< )

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]);
}
});
Calix
Calix
New Member

Posts : 13
Reputation : 1
Language : English
Location : New Zealand

View user profile http://calixrparena.forumotion.co.nz/

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by Calix March 12th 2013, 5:30 am

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.


Last edited by Calix on March 12th 2013, 5:31 am; edited 1 time in total (Reason for editing : typo correction)
Calix
Calix
New Member

Posts : 13
Reputation : 1
Language : English
Location : New Zealand

View user profile http://calixrparena.forumotion.co.nz/

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by SLGray March 12th 2013, 5:52 am

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?


How to put Rank below Avatar but above Username [phpBB3] Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50155
Reputation : 3457
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by Calix March 12th 2013, 5:56 am

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)
Calix
Calix
New Member

Posts : 13
Reputation : 1
Language : English
Location : New Zealand

View user profile http://calixrparena.forumotion.co.nz/

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by levy March 12th 2013, 9:38 am

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');
  });
});
levy
levy
Hyperactive

Male Posts : 2620
Reputation : 349
Language : English, Romanian
Location : Grinding

View user profile https://better.forumotion.co.uk/

Back to top Go down

In progress Re: How to put Rank below Avatar but above Username [phpBB3]

Post by Calix March 12th 2013, 10:15 am

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.
Calix
Calix
New Member

Posts : 13
Reputation : 1
Language : English
Location : New Zealand

View user profile http://calixrparena.forumotion.co.nz/

Back to top Go down

Back to top

- Similar topics

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