Profile Rank Title Alignment
+2
mist3r0us_b0y
runawayhorses
6 posters
Page 1 of 1
Profile Rank Title Alignment
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/
thanks, my forum version is punbb.
Forum url: http://runawayhorses.alldiscussion.net/
Last edited by runawayhorses on September 30th 2013, 9:53 pm; edited 1 time in total
Re: Profile Rank Title Alignment
may b this can help ?
- Code:
.postprofile{
text-align:center !important;
box-shadow:1px 1px 3px rgba(0,0,0, 0.5);
}
Re: Profile Rank Title Alignment
- Code:
.postprofile dd, .postprofile dt {
line-height: 1.2em;
margin-left: 8px;
text-align: center;
}
Re: Profile Rank Title Alignment
Last edited by Sir. Mayo on September 30th 2013, 7:01 pm; edited 1 time in total
Re: Profile Rank Title Alignment
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:
Notice the text "Rank:" and the image "Admin" are even:
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>
Notice the text "Rank:" and the image "Admin" are even:
Re: Profile Rank Title Alignment
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!
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!
Re: Profile Rank Title Alignment
Hi runawayhorses,
Try going to Templates > Profile > profile_view_body
Find these variables and apply your changes:
Try going to Templates > Profile > profile_view_body
Find these variables and apply your changes:
- Code:
{L_RANK}
{POSTER_RANK}
Re: Profile Rank Title Alignment
Try this :
- Code:
.module .main-content{
text-align:center!important;
}
Re: Profile Rank Title Alignment
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:
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>
Re: Profile Rank Title Alignment
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?
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;
}
Re: Profile Rank Title Alignment
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..
Thanks again Seth and to everyone else that posted in this topic trying to help, I really appreciate it..
Re: Profile Rank Title Alignment
Topic Solved & Locked
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum