Profile Rank Title Alignment

Go down

Solved Profile Rank Title Alignment

Post by runawayhorses on September 30th 2013, 3:41 pm

Hi, in this screenshot below is my profile page showing the avatar and rank. The rank "Admin" is actually an image and I would like it to align evenly with the word Rank: like a table tr td would do. I was able to do it with html table coding using the firefox extension "firebug" but I don't see the html anywhere in the templates, so I'm hoping someone knows how to align the word "Rank:" and the image "Admin" so they are side by side evenly. As you can see from the screenshot the image "Admin" is higher than the word "Rank:" and I want them even side by side like you can do with table coding. Of course I want this to apply to all the ranks on the forum not just the Admin.

thanks, my forum version is punbb.

Forum url: http://runawayhorses.alldiscussion.net/

Profile Rank Title Alignment Y46L2


Last edited by runawayhorses on September 30th 2013, 9:53 pm; edited 1 time in total
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

View user profile http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by mist3r0us_b0y on September 30th 2013, 5:30 pm

may b this can help ?


Code:
.postprofile{
text-align:center !important;
box-shadow:1px 1px 3px rgba(0,0,0, 0.5);
}
mist3r0us_b0y
mist3r0us_b0y
Forumember

Male Posts : 747
Reputation : 19
Language : english

View user profile http://sh.st/nJRXG

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by runawayhorses on September 30th 2013, 5:39 pm

Nope that didn't do it. Sad 
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

View user profile http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by mist3r0us_b0y on September 30th 2013, 6:00 pm

Code:
.postprofile dd, .postprofile dt {
line-height: 1.2em;
margin-left: 8px;
text-align: center;
}
mist3r0us_b0y
mist3r0us_b0y
Forumember

Male Posts : 747
Reputation : 19
Language : english

View user profile http://sh.st/nJRXG

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by Sir. Mayo on September 30th 2013, 6:07 pm

@mist3r0us_b0y wrote:quite simple like em

héhé Good work
Thank you!

@runawayhorses wrote:Ok great thanks! Very Happy
Your welcome here it is:
Profile Rank Title Alignment Vet_zps597d5980

For some reason Servimg is not working for me?? SO i had to use photobucket!

Please don't use this i posted the wrong message in the wrong topic!


Last edited by Sir. Mayo on September 30th 2013, 7:01 pm; edited 1 time in total
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

View user profile http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by runawayhorses on September 30th 2013, 6:34 pm

Thanks so much Sir. Mayo that looks great! Yeah I noticed serving is not working correctly right now I tried to upload an image a few minutes ago and the image was a blank image, in other words it didn't really upload. grrr

thanks again! Smile

Edit:

Opps wrong topic, whatever: https://help.forumotion.com/t126997-simple-ranks#851793

The last code didn't work.

This is a code I used with firebug and it worked. I added table coding to the already existing code, but I can't find the html in the templates to apply it:

Code:
  <div class="main-content clearfix center"><img alt="" src="http://i223.photobucket.com/albums/dd190/runawayhorses1/forumresources/avatars/forum3.jpg"><br><br><table><tr><td>Rank:</td><td> <img src="http://i73.servimg.com/u/f73/12/28/94/48/a10.png"></div></td></tr></table>
Result:

Notice the text "Rank:" and the image "Admin" are even:

Profile Rank Title Alignment OLSTj
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

View user profile http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by Sir. Mayo on September 30th 2013, 6:57 pm

LOL, Sorry, posted it in the wrong topic! My bad!

EDIT:
For the code you created goto View_topic body and find this line:
{postrow.displayed.POSTER_NAME}<br /> {postrow.displayed.POSTER_AVATAR} <br /> {postrow.displayed.RANK_IMAGE}
Delete it and replace it with your code this could work I'm not sure! but give it a try!
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

View user profile http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by runawayhorses on September 30th 2013, 7:21 pm

No it didn't work.. Sad 
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

View user profile http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by Sir. Mayo on September 30th 2013, 8:23 pm

Humm weird let me look into it once i have free time!
Sir. Mayo
Sir. Mayo
Forumember

Male Posts : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

View user profile http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by Ange Tuteur on September 30th 2013, 8:51 pm

Hi runawayhorses,

Try going to Templates > Profile > profile_view_body

Find these variables and apply your changes:
Code:
{L_RANK}
{POSTER_RANK}
I think for poster rank, since its in a data cell you could try putting..<td valign="middle"> if not you could try your setup you made.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by levy on September 30th 2013, 8:54 pm

Try this :

Code:
.module .main-content{
text-align:center!important;
}
If you gave me an testing account will be better.
levy
levy
Hyperactive

Male Posts : 2602
Reputation : 347
Language : English, Romanian
Location : Grinding

View user profile https://help.forumotion.com/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by runawayhorses on September 30th 2013, 9:22 pm

Thanks Seth and candy_fear I tried both your suggestions and neither one worked..grrr

I'll copy my profile_view_body template and maybe you can figure out how to add this.

This is what I tried and it didn't work, I added table codes like this:

<table><tr><td><dt>{L_RANK}:</dt></td><td><dd><strong>{POSTER_RANK}</strong></dd></td></tr></table>

This below is the complete template unedited:

Code:
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<div class="main">
 <div class="main-head">
 <h1 class="page-title">{L_VIEWING_PROFILE}</h1>
 </div>

 <div class="main-content clearfix">
 <fieldset class="frm-set left profile-view">
 <dl>
 <dt>{L_AVATAR_IMG}</dt><dd>{AVATAR_IMG}</dd>
 </dl>
 <dl>
 <dt>{L_RANK}:</dt><dd><strong>{POSTER_RANK}</strong></dd>
 <!-- BEGIN switch_show_status -->
 <dt>{L_STATUT}:</dt><dd><strong>{USER_ONLINE}</strong></dd>
 <!-- END switch_show_status -->
 </dl>
 <!-- BEGIN switch_allow_friendsfoes -->
 <dl>
 <dt>{L_FRIENDS_AND_FOES}:</dt><dd><strong>{FRIENDSFOES}</strong></dd>
 </dl>
 <!-- END switch_allow_friendsfoes -->
 <!-- BEGIN switch_auth_user -->
 <dl>
 <dt>{L_ADMINISTRATE_USER}:</dt><dd><strong>{ADMINISTRATE_USER}{BAN_USER}</strong></dd>
 </dl>
 <!-- END switch_auth_user -->
 <!-- BEGIN profile_field -->
 <dl id="field_id{profile_field.ID}" class="left-box details" style="width: 80%;">
 <dt>{profile_field.LABEL}</dt> <dd>{profile_field.CONTENT}<!-- BEGIN profil_type_user_posts --> [{POST_PERCENT_STATS} / {POST_DAY_STATS}]
 <br /><a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a>
 <br /> - <a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a>
 <br /> - <a rel="nofollow" href="/spa/{PUSERNAME}">{L_POSTS}</a><!-- END profil_type_user_posts --></dd>
 </dl>
 <!-- END profile_field -->
 </fieldset>

 <fieldset class="frm-set right profile-view">
 <div class="sub-head"><h2>{L_CONTACT} {USERNAME}</h2></div>
 <form action="{S_PROFILE_ACTION}" method="post" name="post">
 <!-- BEGIN contact_field -->
 <dl id="field_id{contact_field.ID}">
 <dt>{contact_field.LABEL}</dt> <dd>{contact_field.CONTENT}</dd>
 </dl>
 <!-- END contact_field -->

 <!-- BEGIN switch_admin_user_comment_active -->
 <dl>
 <dt>{L_COMMENTS} :<br /><span class="italic">{L_MODS_AND_ADMINS}</span></dt>
 <dd><textarea name="admin_user_comment_text" rows="8" cols="30">{ADMIN_USER_COMMENT}</textarea></dd>
 </dl>
 <dl class="frm-buttons clearfix">
 <dt> </dt>
 <dd><input type="hidden" value="update_admin_user_comment" name="mode" />
 <input type="hidden" value="{USER_ID}" name="userid" />
 <input type="submit" name="user_comment_maj" value="{L_UPDATE}" /></dd>
 </dl>
 <!-- END switch_admin_user_comment_active -->
 </form>
 </fieldset>
 </div>

 <div class="main-head">
 <div class="subtitle">{L_STATS}</div>
 </div>

 <div class="main-content">
 <fieldset class="frm-set profile-view">
 <dl><dt>{L_LAST_VISITED}:</dt> <dd>{LAST_VISIT_TIME}</dd></dl>
 <!-- BEGIN switch_dhow_mp -->
 <dl><dt>{L_PRIVATE_MSG}:</dt> <dd>{PRIVATE_MSG}</dd></dl>
 <!-- END switch_dhow_mp -->
 </fieldset>
 </div>

 <!-- BEGIN switch_rpg -->
 <div class="main-head">
 <div class="subtitle">{L_VIEWING_RPG}</div>
 </div>

 <div class="main-content frm clearfix">
 <fieldset class="frm-set multi">
 <dl>
 <dt>{RPG_IMAGE}</dt>
 <dd> </dd>
 </dl>
 </fieldset>

 <fieldset class="frm-set left rpg">
 <!-- BEGIN rpg_fields_left -->
 <dl>
 <dt>{switch_rpg.rpg_fields_left.F_NAME} :</dt>
 <dd>{switch_rpg.rpg_fields_left.F_VALUE_NEW}</dd>
 </dl>
 <!-- END rpg_fields_left -->
 </fieldset>

 <fieldset class="frm-set right rpg">
 <!-- BEGIN rpg_fields -->
 <dl>
 <dt>{switch_rpg.rpg_fields.F_NAME} :</dt>
 <dd>{switch_rpg.rpg_fields.F_VALUE_NEW}</dd>
 </dl>
 <!-- END rpg_fields -->
 </fieldset>
 <br class="clear" />
 <fieldset class="frm-set clearfix">
 <div class="frm-buttons">
 {U_ADMIN_RPG}
 </div>
 </fieldset>
 <br />
 </div>
 <!-- END switch_rpg -->
</div>
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
 $('[id^=field_id]').each(function(){
 if ( $(this).find('.field_editable').is('span, div') )
 {
 $(this).hover(function()
 {
 if( $(this).find('.field_editable.invisible').is('span, div') )
 {
 $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
 $(this).find('.ajax-profil_edit').attr({
 alt: "{L_FIELD_EDIT_VALUE}",
 title: "{L_FIELD_EDIT_VALUE}"
 }).click(function(){
 $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
 $(this).prev().find('.ajax-profil_valid').attr({
 alt: "{L_VALIDATE}",
 title: "{L_VALIDATE}"
 }).click(function(){
 var content = new Array();
 $(this).parent().find('[name]').each(function(){
 var type_special = $(this).is('input[type=radio],input[type=checkbox]');
 if ( (type_special && $(this).is(':checked')) || !type_special )
 {
 content.push(new Array($(this).attr('name'), $(this).attr('value')));
 }
 });
 var id_name = $(this).parents('[id^=field_id]').attr('id');
 var id = id_name.substring(8, id_name.length);
 $.post(
 "{U_AJAX_PROFILE}",
 {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
 function(data){
 $.each(data, function(i, item){
 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
 });
 },
 "json"
 );
 });
 $(this).remove();
 });
 }
 },function()
 {
 if( $(this).find('.field_editable.invisible').is('span, div') )
 {
 $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
 $(this).find('.ajax-profil_edit').remove();
 }
 });
 }
 });
 });
//]]>
</script>
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

View user profile http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by Ange Tuteur on September 30th 2013, 9:40 pm

Hmm I've tested edits on my pun board, but I believe that is only for "Simple Profiles" rather advanced. I did however, setup a CSS code for vertical alignment of an image.

If it will work I am not completely sure, but if it does not can you allow us temporary access to viewing profiles on your forum?

Code:
div.main-content.clearfix.center > img:nth-child(4){
vertical-align:middle;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by runawayhorses on September 30th 2013, 9:52 pm

Yes absolutely I would allow access to view the profiles but your css code worked! Very Happy  Thanks a lot. I like this method much better than editing the template if I can help it, and it worked fine.

Thanks again Seth and to everyone else that posted in this topic trying to help, I really appreciate it.. Very Happy
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

View user profile http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by Ange Tuteur on September 30th 2013, 9:57 pm

You're welcome, I'm glad that it worked out for you. Smile
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13232
Reputation : 2971
Language : EN, JA, FR
Location : Macungie, PA

View user profile https://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Rank Title Alignment

Post by SLGray on October 1st 2013, 3:43 am

Topic Solved & Locked


Profile Rank Title Alignment Slgray10
Profile Rank Title Alignment Ssshfm13

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

Male Posts : 48155
Reputation : 3383
Language : English
Location : United States

View user profile https://help.forumotion.com/

Back to top Go down

Back to top


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