The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

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

View previous topic View next topic Go down

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

Post by Calix on 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.



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

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

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™ on 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.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

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

Back to top Go down

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

Post by Calix on 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
New Member

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

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 on 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
New Member

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

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 on March 12th 2013, 5:52 am

If you want to submit a tutorial, please read this - http://help.forumotion.com/t61209-how-to-submit-a-tutorial

You said that it is not exactly solved. What is still wrong?


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


SLGray
Administrator
Administrator

Male Posts : 36657
Reputation : 2443
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

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

Post by Calix on 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
New Member

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

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 on 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
Hyperactive

Male Posts : 2582
Reputation : 345
Language : Romanian, English
Location : criticize artwork, not people!

http://help.forumotion.com/

Back to top Go down

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

Post by Calix on 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
New Member

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

http://calixrparena.forumotion.co.nz/

Back to top Go down

View previous topic View next topic Back to top


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