Individual Pseudo-Usergroup Icon in Postbit
This modification is in the archives.
Requested by people who wanted to choose a small icon by their name like I gave to moderators and admins via Usergroup Markup code. Obviously if it's done by usergroup it can't be done for individuals (and frankly it looks like a minor disaster in WOL if every user has an icon). This way, with only template changes, it can.
Screenshot at the bottom of the post! INSTRUCTIONS: AdminCP > User Profile Fields > Add New User Profile Field Single-Line Text Box Title: Username Icon Description: If you would like an icon to appear next to your username when you post on the forum, enter the URL ONLY in the text box below. Do NOT include the http:// part. Maximum permitted size is 16x16 pixels. Obviously change the pixel dimensions to whatever dimensions you would like user to post, 16x16 looks right to me. Default Value: imagename.gif ...A few settings here which are up to your own discretion... Profile Field Type: Single-Line Text Box Field Required: No. Field Editable by User: Yes Private Field: No. Field Searchable on Members List: No Show on Members List: No Which page displays this option? Edit Profile Save the page and make a note of the field number for this custom field which is shown in the list on the User Field Manager page. If it is your first custom field then it will be field6. Now go to AdminCP > Styles & Templates > Style Manager > Edit Templates and edit your postbit(_legacy) template. FIND: Code:
<if condition="$show['profile']"><a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a> Code:
<if condition="$show['profile']"> <if condition="$post['fieldX']"><span class="usernameicon"><div <if condition="is_browser('ie', 6)">style="margin:0;padding-right:4px;"</if>><img src="http://$post[field7]" alt="" class="inlineimg" border="0" /></div></span></if> <a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a> Next go to AdminCP > Styles & Templates > Style Manager > Main CSS and copy and paste the following code into the custom CSS text box at the bottom of the page, again changing the width and height pixel numbers to match the maximum size of the icon you want your members to use. Code:
.usernameicon { display:inline-block; } .usernameicon div { display:inline-block; float:left; clear:none; width:16px; height:16px; overflow:hidden; margin:6px 6px 0 0; } Three things for you to note: There's no real restriction on the size of image people can use. The CSS ensures it won't show break your layout, since no matter how big a picture they choose only 16x16 pixels of it will show up. But it will show down page load times and waste your users bandwidth with large images, so be observant. Secondly, this does not interfere with Usergroup Markup so you can specify an image there as well if you like. Thirdly, this will only display to logged-in users. vBulletin does not allow Guests to pull custom user-field data so there won't be a fix as long as it remains a template mod. Demo: The Username Icon is the red rose on the left, the Usergroup Icon is the yellow rose on the right. If there is no Usergroup icon it will display where the yellow rose is. Fix: The http:// part of the URL is now set in the template code and not the user-defined text to stop the layout breaking if plain text is defined instead of an image URL. The default field text and description have been changed to reflect this. The alt text has been set to nothing for the same reason. Fix: CSS has been thoroughly kerjiggered so a block div will display inline next to the username. Or anything else for that matter. Fix: Changed the mod name to something terrible. Fix: IE Conditional to fix erratic IE rendering. Now aligns properly. Fix: AJAX posting will no longer makes the icon appear/disappear in new posts. Current Issues Mod name is something terrible but more accurately desciprtive. Download
This modification is archived, downloads are still allowed. |