HomeProfile Customisation
4 posters
Page 1 of 1
Profile Customisation
by \isogriv.\ January 11th 2015, 3:16 pm
Hello.
I've posted this topic to ask for a code that will transform the look of user's profiles in their posts in-thread. I already have a vague sense of how it can be accomplished, but not the specific codes. The profiles in posts currently look like so:
I would instead like for the profile to be only the avatar, and upon hovering over the avatar, for it to fade into the following:
Following the example given, here's a summarised list of what I want:
If a customary profile field is not possible, other fields aside from those explicitly listed are fine to change. I would like for the customary profile field to be max-width'd at 125 and max-height'd at 300, not including the 1px border. The Rank simple needs to be placed under the name; I can take care of the font. All other profile fields should be "Times New Roman". I would like for the profile fields and name to be forced-uppercase. Most of the minute details such as font and text transformation are things I can do myself, but the placement of all these values and a customary profile-field are things I am foreign to.
A link to my site is provided below; the site is now taken off of construction mode, so guest-access is available.
http://alciem.forumotion.com/
I've posted this topic to ask for a code that will transform the look of user's profiles in their posts in-thread. I already have a vague sense of how it can be accomplished, but not the specific codes. The profiles in posts currently look like so:
I would instead like for the profile to be only the avatar, and upon hovering over the avatar, for it to fade into the following:
Following the example given, here's a summarised list of what I want:
- Upon hovering over the image, "background-color:rgba(255,255,255,0.87);" or similar to be activated
- over the "background-color" element, there should be an custom profile field which displays a secondary-image, like the one labeled "125x300".
- Bordering the custom-profile field is a "border: 1px solid #000;"
- Below is the username in garamond font, which I believe is pre-installed into Forumotion
- Below the username is the profile rank
- Below the rest of the Profile Fields should be lines up
- The preferred order of the Profile Fields is
- Posts
- Join Date
- Points
- Reputation
- When moving the mouse away from the avatar, it should fade out as well.
If a customary profile field is not possible, other fields aside from those explicitly listed are fine to change. I would like for the customary profile field to be max-width'd at 125 and max-height'd at 300, not including the 1px border. The Rank simple needs to be placed under the name; I can take care of the font. All other profile fields should be "Times New Roman". I would like for the profile fields and name to be forced-uppercase. Most of the minute details such as font and text transformation are things I can do myself, but the placement of all these values and a customary profile-field are things I am foreign to.
A link to my site is provided below; the site is now taken off of construction mode, so guest-access is available.
http://alciem.forumotion.com/
\isogriv.\- Forumember
- Posts : 31
Reputation : 4
Language : English -
Re: Profile Customisation
by Hert January 11th 2015, 3:29 pm
I think I might be able to help you with this ^^
I've done something similar to this on one of my test forums: http://evo-lution.actieforum.com/t2-wat
You can hover over the avatar etc.
Is that the kind of think you want? I do have the codes ready, it has to be done in CSS and HTML.
However I'm not sure if this is what you are looking for, giving the images that confuse me a little ^^'
I've done something similar to this on one of my test forums: http://evo-lution.actieforum.com/t2-wat
You can hover over the avatar etc.
Is that the kind of think you want? I do have the codes ready, it has to be done in CSS and HTML.
However I'm not sure if this is what you are looking for, giving the images that confuse me a little ^^'
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by _Twisted_Mods_ January 11th 2015, 3:34 pm
ok so you want a custom profile field that the user can add a image to and it will be the background for the whole profile? and also you want the avatar to fade in and out on hover?
_Twisted_Mods_- Helper
-
Posts : 2083
Reputation : 336
Language : English
Location : Ms -
Re: Profile Customisation
by \isogriv.\ January 11th 2015, 3:41 pm
@Hert YES. THAT IS ESSENTIALLY PRECISELY WHAT I WANT. Could you also change a profile field to fit another image, or add another profile field into the forum as well? With that, my request would be solved to perfection. By the way, your forum is absolutely gorgeous. Reminiscent of jcink and proboard forums. In fact, if you wouldn't mind could we discuss some more forum customisations through PM?
@_Twisted_Mods_ Yes, I would like a custom profile field in which the user may input the URL (or if possible, upload an image from their device) of an image; however, instead of a background for the whole profile, I would like for it to be placed over the avatar in generally the same area as shown in the example-image in my first post. I would like for all of these things to show upon hovering over the avatar by fading in, and upon taking the mouse off of the avatar, for all these things to fade out.
@_Twisted_Mods_ Yes, I would like a custom profile field in which the user may input the URL (or if possible, upload an image from their device) of an image; however, instead of a background for the whole profile, I would like for it to be placed over the avatar in generally the same area as shown in the example-image in my first post. I would like for all of these things to show upon hovering over the avatar by fading in, and upon taking the mouse off of the avatar, for all these things to fade out.
Last edited by isogriv. on January 11th 2015, 5:11 pm; edited 1 time in total
\isogriv.\- Forumember
- Posts : 31
Reputation : 4
Language : English -
Re: Profile Customisation
by Hert January 11th 2015, 3:47 pm
@ Isogriv: Well I do find my inspiration on proboards and then try to do it on actieforum, while giving it my own twist of course (;
Changing the size won't be a problem I think, but adding another profile field... Not sure if that is possible giving the default codes from actieforum (like the {.USERNAME} code).
You can send me a message if you want, but I'm not an expert and this isn't my work - sadly - so I won't always be here or have all the answers, hihi
Changing the size won't be a problem I think, but adding another profile field... Not sure if that is possible giving the default codes from actieforum (like the {.USERNAME} code).
You can send me a message if you want, but I'm not an expert and this isn't my work - sadly - so I won't always be here or have all the answers, hihi
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by \isogriv.\ January 11th 2015, 3:56 pm
No wonder it seemed so familiar. As for the additional profile field, I don't need it right away. If you could give me the codes on the rest of it, hopefully at a later time I or someone else finds out how to do so, or a staff member comments confirming your suspicions.
In terms of it not being your code, do you at least know how to modify the banner and put things inside of it? I would specifically like to place the menu and toolbar into it, and perhaps some other elements.
In terms of it not being your code, do you at least know how to modify the banner and put things inside of it? I would specifically like to place the menu and toolbar into it, and perhaps some other elements.
\isogriv.\- Forumember
- Posts : 31
Reputation : 4
Language : English -
Re: Profile Customisation
by Hert January 11th 2015, 4:07 pm
Ehm... It IS my code.
I look for a layout on proboards, when I find a design I like I try to get it working with codes - so in fact it is my code.
However, I never touch the toolbar since I do not like it in anyway and thus never work with it.
For moving the menu you can use the following CSS code:
You can use negative numbers, if I'm correct the bigger the negative number inserted with top the higher the menu will get - but since I haven't touched this code in ages you might have to see for yourself what happens (;
+ as for the avatar hover thingy: I need to know the size you want so I can already insert it etc.
Saves you alot of trouble searching in the template.
I look for a layout on proboards, when I find a design I like I try to get it working with codes - so in fact it is my code.
However, I never touch the toolbar since I do not like it in anyway and thus never work with it.
For moving the menu you can use the following CSS code:
- Code:
a.mainmenu {
position:relative;
top: XXXpx;
Left: XXXpx;
}
You can use negative numbers, if I'm correct the bigger the negative number inserted with top the higher the menu will get - but since I haven't touched this code in ages you might have to see for yourself what happens (;
+ as for the avatar hover thingy: I need to know the size you want so I can already insert it etc.
Saves you alot of trouble searching in the template.
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by \isogriv.\ January 11th 2015, 4:14 pm
Sorry about that statement, I misspoke. I meant the initial design of the banner elements wasn't yours as opposed to a general statement on your codes.
And thank you for the instructions on the menu! As for including elements into the banner, how is that done? And since you said you have the codes ready on the matter regarding the avatar, may I have please have them? Naturally, you will receive due crediting for the coding.
And thank you for the instructions on the menu! As for including elements into the banner, how is that done? And since you said you have the codes ready on the matter regarding the avatar, may I have please have them? Naturally, you will receive due crediting for the coding.
\isogriv.\- Forumember
- Posts : 31
Reputation : 4
Language : English -
Re: Profile Customisation
by Hert January 11th 2015, 4:19 pm
It is done with a hover code, some tables and ehm... Divs.
No it is done with CSS and HTML again, but I don't know if you're familiar with hover codes - they aren't that hard and very handy.
And yes you can have them, AFTER I have tested it with the format you want. I would like to test my stuff first before giving it to others, because actieforum can be very 'whiny' with these things. So again: can you please give me the format of the avatars?
No it is done with CSS and HTML again, but I don't know if you're familiar with hover codes - they aren't that hard and very handy.
And yes you can have them, AFTER I have tested it with the format you want. I would like to test my stuff first before giving it to others, because actieforum can be very 'whiny' with these things. So again: can you please give me the format of the avatars?
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by \isogriv.\ January 11th 2015, 4:51 pm
I am indeed familiar with hover codes, but I am unsure of how to put any elements inside the site's banner, such as the one in your test forum. I'm fine with waiting, and as for the format of the avatars, forgive me if I misunderstand what you wanted. Assuming you mean how I want the avatar to look, I'd essentially like it to look like the result of the follow code:
SO sorry for that, I only just realised you asked for it earlier.
- Code:
<center>
<div style="background-image:url(http://i1296.photobucket.com/albums/ag20/Ahnyonee/beta22_zps96e09c8c.png); width:150px; height:400px;">
<div id="profile_custom"><div style="height:25px;"></div>
<div style="padding:5px;">
<img src="http://i38.servimg.com/u/f38/19/01/34/63/placeh11.png" style=";border:1px solid #000;height:250px;width:125px;">
<div style="padding-top:20px;font-family:serif;font-size:17px;text-transform:uppercase;color:#000;"><a href="alciem.forumotion.com/u1">profile name</a></div>
<div style="font-family:arial;font-size:15px;color:black;text-transform:uppercase;">user rank</div>
<div style="padding-top:5px;text-align:left;font-size:8px;text-transform:uppercase;colorblack;font-family:times;">
Posts: 404
<br>Join Date: 2015-01-11
<br>Points: 1
<br>Reputation: 1121
</div>
</div>
</div>
</div>
<style>
#profile_custom {
background-color: rgba(255,255,255,0.47);
width: 150px;
height: 400px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
opacity: 0;
}
#profile_custom:hover {
background-color: rgba(255,255,255,0.47);
width: 150px;
height: 400px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
opacity: 1;
}
a:link {
color: black;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
a:hover {
color: black;
text-decoration: none;
text-shadow: 0em 0em 0.5em #000;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
a:visted {
color: black;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
a:active {
color: black;
text-decoration: none;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}
</style>
</center>
Hert wrote:+ as for the avatar hover thingy: I need to know the size you want so I can already insert it etc.
Saves you alot of trouble searching in the template.
SO sorry for that, I only just realised you asked for it earlier.
\isogriv.\- Forumember
- Posts : 31
Reputation : 4
Language : English -
Re: Profile Customisation
by Hert January 11th 2015, 5:20 pm
Hmm, okay.
I might not make it today, but do not worry - I will get to it!
Once I've finished it I will send you the codes (and where to put them) through a private message (;
edit: O and as for the hover for the logo, it is kind of the same as you would do it with sheets. To be honest.
I might not make it today, but do not worry - I will get to it!
Once I've finished it I will send you the codes (and where to put them) through a private message (;
edit: O and as for the hover for the logo, it is kind of the same as you would do it with sheets. To be honest.
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by _Twisted_Mods_ January 11th 2015, 6:08 pm
if answers are given in pm and not in the topic a mod will trash this topic for not being helpful to others because no answer will be supplied
_Twisted_Mods_- Helper
- Posts : 2083
Reputation : 336
Language : English
Location : Ms -
Re: Profile Customisation
by Ange Tuteur January 12th 2015, 12:07 pm
Hello @\isogriv.\,
This is what I came up with after reading over your post.
Go to Administration panel > display > templates > general > viewtopic_body
Find :
Replace by :
Save and publish the template.
For your profile field order, you can manage that by going to Users and Groups > Profiles. There you should see your fields along with a column named "Order" which has arrows in it. Clicking those arrows will allow you to change the order of your fields.
You should probably already be where the profile fields are, so go ahead and click the plus to add a new field. Now for the custom field, the most I could think of at the moment would be to create a new profile field with the following content :
Type : Text zone
Name : Your choice
Description : Your choice
Icon : Your choice
Necessarily filled ? : No
Display : Messages
Display type : icone
Who can modify : Your choice
Display for users who are : Your choice
Separator : No choice
For the default value, place this :
Change this image https://2img.net/i/bl/logo.png to the one you want as your default. Then save your settings, and edit the field. Scroll to the bottom and click "Replace content" to force the default value for everyone.
Other than using javascript to replace the content and add a classname for it, using a table is the easiest choice. The table content will hold the custom image, and the CSS will resize it to the dimensions you specified. The only problem is that it's not too edit friendly.
Then just add the following rulesets to your stylesheet.
Display > Colors > CSS stylesheet
It's pretty bareboned, I included only what you described so you're free to change anything you like..
@Hert support by PM is not allowed. We reply to these topics to ensure that members who have a similar question can find their answer via the search tool. If you're going to provide support, please do so in the member's support topic.
Thank you.
This is what I came up with after reading over your post.
Go to Administration panel > display > templates > general > viewtopic_body
Find :
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
Replace by :
- Code:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
<div class="postdetails poster-profile">
{postrow.displayed.POSTER_AVATAR}<br />
<div class="hidden">
<span class="name"><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div>
</div>
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
Save and publish the template.
For your profile field order, you can manage that by going to Users and Groups > Profiles. There you should see your fields along with a column named "Order" which has arrows in it. Clicking those arrows will allow you to change the order of your fields.
You should probably already be where the profile fields are, so go ahead and click the plus
to add a new field. Now for the custom field, the most I could think of at the moment would be to create a new profile field with the following content :Type : Text zone
Name : Your choice
Description : Your choice
Icon : Your choice
Necessarily filled ? : No
Display : Messages
Display type : icone
Who can modify : Your choice
Display for users who are : Your choice
Separator : No choice
For the default value, place this :
- Code:
[table class="customImage"][tr][td][img]http://2img.net/i/bl/logo.png[/img][/td][/tr][/table]
Change this image https://2img.net/i/bl/logo.png to the one you want as your default. Then save your settings, and edit the field
. Scroll to the bottom and click "Replace content" to force the default value for everyone.Other than using javascript to replace the content and add a classname for it, using a table is the easiest choice. The table content will hold the custom image, and the CSS will resize it to the dimensions you specified. The only problem is that it's not too edit friendly.
Then just add the following rulesets to your stylesheet.
Display > Colors > CSS stylesheet
- Code:
.post .poster-profile, .post .poster-profile .hidden { transition:750ms }
.post .poster-profile { position:relative }
.post .poster-profile .hidden {
visibility:hidden;
opacity:0;
}
.post .poster-profile .customImage img {
width:125px;
height:300px;
border:1px solid #000;
position:absolute;
top:0px;
left:0px
}
.post .poster-profile:hover { background-color:rgba(255,255,255,0.87) }
.post .poster-profile:hover .hidden {
visibility:visible;
opacity:1;
}
It's pretty bareboned, I included only what you described so you're free to change anything you like..
@Hert support by PM is not allowed. We reply to these topics to ensure that members who have a similar question can find their answer via the search tool. If you're going to provide support, please do so in the member's support topic.
Thank you.
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Profile Customisation
by Hert January 13th 2015, 11:50 pm
O I'm sorry, I've just had some issues before when I helped someone with some coding stuff (publicly) and am scared of things happening again - it wasn't my intention to break the rules!
@ Isogriv; I don't know if you still need my help after what Ange gave you, but if you do I still want to share my codes: I have them ready now for you forum (;
@ Isogriv; I don't know if you still need my help after what Ange gave you, but if you do I still want to share my codes: I have them ready now for you forum (;
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by \isogriv.\ January 14th 2015, 6:07 pm
\isogriv.\- Forumember
- Posts : 31
Reputation : 4
Language : English -
Re: Profile Customisation
by _Twisted_Mods_ January 14th 2015, 9:39 pm
try to replace
with
- Code:
[table class="customImage"][tr][td][img]http://2img.net/i/bl/logo.png[/img][/td][/tr][/table]
with
- Code:
<table class="customImage"><tr><td><img src="http://2img.net/i/bl/logo.png"></td></tr></table>
_Twisted_Mods_- Helper
- Posts : 2083
Reputation : 336
Language : English
Location : Ms -
Re: Profile Customisation
by Hert January 15th 2015, 12:57 am
In case it still doesn't work after the suggestion from Twisted_Mods, here are my codes:
Replace the HTML codes in the viewtopic_body template with the following codes:
Add these codes to your CSS:
If you were to apply changes to the colors, please inform me FIRST - the code is very 'fragile', if you know what I mean.
Replace the HTML codes in the viewtopic_body template with the following codes:
- Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
_atc.cwait = 0;
$('.addthis_button').mouseup(function(){
if ($('#at15s').css('display') == 'block') {
addthis_close();
addthis_close();
}
});
});
//]]>
</script>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<td align="left" valign="middle" nowrap="nowrap">
</td>
<td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
<span class="gensmall bold">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
<!-- BEGIN switch_plus_menu -->
|
<script type="text/javascript">//<![CDATA[
var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
<!-- END switch_plus_menu -->
</span>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
<tr align="right">
<td class="cattest" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title">
<h1 class="cattitle"> {TOPIC_TITLE}</h1>
</td>
<td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN topicpagination -->
<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END topicpagination -->
{POLL_DISPLAY}
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div class="poster-profile">
<span class="postdetails poster-profile" align="center">
<div class="posavatar" style="width: 150px; height: 400px; font-size: 10px; letter-spacing: 0px; text-align:justify; color: #80c449; line-height: 100%;">
<div class="hoverz"><br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div></div>
{postrow.displayed.POSTER_AVATAR}
<br />
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><div style="letter-spacing: 2px;">{postrow.displayed.POSTER_NAME}</div></strong></span>
{postrow.displayed.POSTER_RANK}
</span></div><br />
<img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>
<td colspan="2">
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
<div class="postbody">
<div>{postrow.displayed.MESSAGE}</div>
<!-- BEGIN switch_attachments -->
<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>
<!-- BEGIN switch_post_attachments -->
<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />
<!-- BEGIN switch_dl_att -->
<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
<!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att -->
{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
<!-- END switch_no_dl_att -->
</dt>
<!-- BEGIN switch_no_comment -->
<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>
<!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att -->
<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>
<!-- END switch_no_dl_att -->
<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>
<!-- END switch_post_attachments -->
</dd>
</dl>
<!-- END switch_attachments -->
<div class="clear"></div>
<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>
</div>
<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.ONLINE_IMG}
</td>
</tr>
</table>
</td>
</tr>
<!-- BEGIN first_post_br -->
</table>
<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>
<!-- END first_post_br -->
<!-- END displayed -->
<!-- BEGIN hidden -->
<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
</tr>
<!-- END hidden -->
<!-- END postrow -->
<!-- BEGIN no_post -->
<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>
<!-- END no_post -->
<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
<tr>
<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination -->
<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
<!-- END topicpagination -->
</tr>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</table>
<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row2 postbody" valign="top">
<!-- BEGIN link -->
» <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
<!-- END link -->
</td>
</tr>
</table>
<!-- END promot_trafic -->
<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
<tbody>
<tr>
<td class="catBottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
<h1 class="cattitle"> {L_FORUM_RULES}</h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="row1 clearfix">
<table>
<tr>
<!-- BEGIN switch_forum_rule_image -->
<td class="logo">
<img src="{RULE_IMG_URL}" />
</td>
<!-- END switch_forum_rule_image -->
<td class="rules postbody">
{RULE_MSG}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- END switch_forum_rules -->
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row2" colspan="2" align="center" style="padding:0px">
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br />
<!-- END switch_user_logged_in -->
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>
<!-- BEGIN show_permissions -->
<tr>
<td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
<td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
</tr>
<!-- END show_permissions -->
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<!-- BEGIN show_permissions -->
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
<!-- END show_permissions -->
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<!-- BEGIN viewtopic_bottom -->
<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- END viewtopic_bottom -->
<!-- BEGIN moderation_panel -->
<td align="center">
<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="gensmall"> </span>
</td>
<!-- END moderation_panel -->
</tr>
</table>
</form>
<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>
<!-- END viewtopic_bottom -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
Add these codes to your CSS:
- Code:
* -------------------------------- topic messages avatar*/
.name {
width: 150px;
text-align: center;
font-size: 16px;
font-family: Open sans condensed;
text-transform: uppercase;
}
.poster-profile {
text-align: center;
}
.label {
margin-top: -10px;
}
.hoverz{ text-shadow: 1px 1px 1px #424141;
opacity: 0.0;
transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s;
overflow: auto;
width: 150px;
height: 400px;
color: #ffffff;
background-color: #787878;
text-align: center;
}
.hoverz:hover {
opacity: 0.8;
}
.posavatar {
position: absolute;
}
.poster-profile img {
width: 150px;
height: 400px;
}
If you were to apply changes to the colors, please inform me FIRST - the code is very 'fragile', if you know what I mean.
Last edited by Hert on January 15th 2015, 4:51 pm; edited 2 times in total
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Re: Profile Customisation
by Ange Tuteur January 15th 2015, 3:45 am
@\isogriv.\, For the profile field type, did you select text field instead of text zone ? Textzone formats bbcode unlike textfield.
@Hert very nice.
I had to remove this from the bottom, it wouldn't save because it wasn't closed.
@Hert very nice.
I had to remove this from the bottom, it wouldn't save because it wasn't closed.
- Code:
<!-- BEGIN switch_image_resize -->
Ange Tuteur- Forumaster
- Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania -
Re: Profile Customisation
by Hert January 15th 2015, 4:52 pm
@ Ange; O, my bad!
I didn't copy the code all the way, appearently - it should be okay now ^^
Thank you ~
I didn't copy the code all the way, appearently - it should be okay now ^^
Thank you ~
Hert- Forumember
- Posts : 81
Reputation : 3
Language : Dutch and English -
Similar topics» Dice Rolls results customisation
» [QUERY] How to show the members' group joined in their post profile and even in their profile?
» How can adapt the advanced profile to IPB profile look?
» Profile + View Profile Issue
» Profile Fields and Profile layout help.
» [QUERY] How to show the members' group joined in their post profile and even in their profile?
» How can adapt the advanced profile to IPB profile look?
» Profile + View Profile Issue
» Profile Fields and Profile layout help.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
