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.

Username + Rank Above Avatar.

View previous topic View next topic Go down

Solved Username + Rank Above Avatar.

Post by Selvester on December 29th 2013, 9:42 pm

Hello. So I would like to place my username and rank above the avatar on my forum... And I thought I had solved this a while back however I just noticed today that they are both below the avatar. I don't know if they were never placed above and I just wasn't paying attention before, or if they were and they aren't now... Anyway I have tried to look up the topic I used as a guide earlier to double check everything, however I can not seem to locate it. But the Javascript code it had which I used, and thought had worked, was:

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

There was no CSS with it however the CSS I do have relating to the posting profile is as follows:

Code:
.postprofile {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4) !important;
    border-radius: 5px 5px 5px 5px;
    color: #999;
    display: inline;
    margin: 5px 0 0;
    min-height: 80px;
    position: relative;
    text-align: center;
    width: 20%;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset, 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 5px;
}

Now I really don't know a ton about Java and CSS, not as much as I wish I did anyway... so I don't know if there is something in the CSS that would make the Javascript not work, or maybe something I could add in place of the Javascript... Because really I don't understand anything about Javascript and I would prefer to avoid using to much of what I don't understand (though if it is needed then I will use it). CSS I can at least comprehend somewhat.

Anyway I am using phpBB3 for my forum version... I tried hunting up the solution however like I said I couldn't find the same topic from before and surprisingly enough... couldn't find any similar or related ones. The closest was the tutorial about getting the username and avatar below the avatar for phpBB2... Kind of what I already have though and the opposite of what I want.

Selvester
Forumember

Female Posts : 255
Reputation : 10
Language : English, French (little bit)

http://rp-central.forumotion.com

Back to top Go down

Solved Re: Username + Rank Above Avatar.

Post by SLGray on December 29th 2013, 9:57 pm

Is the JavaScript checked for in topics only?


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


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Username + Rank Above Avatar.

Post by Selvester on December 29th 2013, 9:58 pm

Hello SLGray.

Yes that was the first thing I checked on. It is selected for topics only.

Selvester
Forumember

Female Posts : 255
Reputation : 10
Language : English, French (little bit)

http://rp-central.forumotion.com

Back to top Go down

Solved Re: Username + Rank Above Avatar.

Post by SLGray on December 29th 2013, 10:00 pm

Could you post a link to a topic that guests can see?


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


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Username + Rank Above Avatar.

Post by Ange Tuteur on December 29th 2013, 10:06 pm

I don't believe javascript is necessary for this. You should be able to achieve this by using the following CSS :

Code:
.postprofile, .postprofile dt { position:relative; }
/* margin above avatar for rank and name */
.postprofile dl dt img {
margin-top:60px;
/* negate margin from fallback */
margin-bottom:-20px;
}
/* fallback for users without avatars */
.postprofile dt+dd+dd+dd { margin-top:20px; }
/* username */
.postprofile dl dt br + strong {
position:absolute;
top:0px;
right:0px;
left:0px;
}
/* rank */
.postprofile dl dt + dd {
position:absolute;
top:20px;
right:0px;
left:0px;
}

There should only be minor adjustments needed depending on the type of ranks you use.


Last edited by Ange Tuteur on December 29th 2013, 10:39 pm; edited 1 time in total

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Username + Rank Above Avatar.

Post by Selvester on December 29th 2013, 10:13 pm

Just tested the code Ange... Works like a charm.

That you both. Problem solved. Smile

Selvester
Forumember

Female Posts : 255
Reputation : 10
Language : English, French (little bit)

http://rp-central.forumotion.com

Back to top Go down

Solved Re: Username + Rank Above Avatar.

Post by SLGray on December 29th 2013, 10:17 pm

You're welcome.

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

http://fmthemes.forumotion.com/

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