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/

may b this can help ?

Code:

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

Nope that didn't do it.  

Code:

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

mist3r0us_b0y wrote:quite simple like em

 Good work

Thank you!

runawayhorses wrote:Ok great thanks!

Your welcome here it is:


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!

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!

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:

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!

No it didn't work..  

Humm weird let me look into it once i have free time!

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.

Try this :

Code:

.module .main-content{
text-align:center!important;
}

If you gave me an testing account will be better.

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>

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

Yes absolutely I would allow access to view the profiles but your css code worked!   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..

You're welcome, I'm glad that it worked out for you.