The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Postbit Legacy - Usergroup Backgrounds vb4 Details »» | |||||||||||||||||||||||||||||
Postbit Legacy - Usergroup Backgrounds vb4
Developer Last Online: Jan 2012
Updated for vBulletin 4.0.1!!!!
Hey Everyone! I went ahead and updated my vb3.x.x mod to work with the new coding in vBulletin 4. There are a few more modifications to make than the last time, but overall, I think you will find this very easy. To start, let's look at a screenshot of what this mod will do for you, it's the image behind the username and the posbit information. This will not do anything else but assign a special background to the specified usergroup and assign the regular styling to all other usergroups: DEMO: http://ltxtech.com/forums/showthread...or-New-Upgrade Now that you have decided to continue with the modification, let's begin! Navigate to: Style Manager --> Click on the << >> Next to the template you are editing -->CSS Templates postbit.css FIND: Code:
.postbitlegacy .userinfo { float:{vb:stylevar left}; position: relative; width: {vb:math {vb:stylevar postbitlegacy_userinfo_width}-{vb:math {vb:stylevar padding}*2}}; padding: 2px {vb:stylevar padding} {vb:math {vb:stylevar padding}/2}; font-size: {vb:stylevar small_fontSize}; display:block; background: {vb:stylevar postbit_userinfo_background}; _background-image: none; _margin-top: -{vb:math {vb:math 16px*{vb:stylevar line_height}} + {vb:stylevar padding}-{vb:stylevar postbit_border.borderWidth}}; clear:both; } Code:
/*Custom Postbit Background - Image*/ .postbitlegacy .userinfo2 { float:{vb:stylevar left}; position: relative; width:{vb:math {vb:stylevar postbitlegacy_userinfo_width}-{vb:math {vb:stylevar padding}*2}}; padding: 2px {vb:stylevar padding} {vb:math {vb:stylevar padding}/2}; font-size: {vb:stylevar small_fontSize}; display:block; background: #xxxxxx /*url(url to image here) no-repeat*/; _margin-top: -{vb:math {vb:math 16px*{vb:stylevar line_height}} + {vb:stylevar padding}-{vb:stylevar postbit_border.borderWidth}}; clear:both; } FIND: Code:
.postbitlegacy .userinfo .postuseravatar img, .eventbit userinfo .eventuseravatar img { border: {vb:stylevar postbitlegacy_avatar_border}; outline: {vb:stylevar postbitlegacy_avatar_outline}; max-width: {vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2}- {vb:math {vb:stylevar postbitlegacy_avatar_outline.borderWidth}*2} - {vb:math {vb:stylevar postbitlegacy_avatar_border.borderWidth}*2}}; } Code:
/*Custom Postbit Background - Avatar Border*/ .postbitlegacy .userinfo2 .postuseravatar img, .eventbit userinfo .eventuseravatar img { border: {vb:stylevar postbitlegacy_avatar_border}; outline: {vb:stylevar postbitlegacy_avatar_outline}; max-width: {vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2}- {vb:math {vb:stylevar postbitlegacy_avatar_outline.borderWidth}*2} - {vb:math {vb:stylevar postbitlegacy_avatar_border.borderWidth}*2}}; } Code:
.postbitlegacy .userinfo a.username, .eventbit .userinfo a.username { clear:right; font-size:21px; font-weight:none; width: auto; max-width:{vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2} - 20px}; word-wrap:break-word; } Code:
/*Custom Postbit Background - Username Style*/ .postbitlegacy .userinfo2 a.username, .eventbit .userinfo a.username { clear:right; font-size:21px; font-weight:none; width: auto; max-width:{vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2} - 20px}; word-wrap:break-word; } Code:
.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar { display:block; margin:{vb:math {vb:stylevar padding}/3} auto 0; text-align:center; width: auto; } Code:
/*Custom Postbit Background - Avatar Position*/ .postbitlegacy .userinfo2 .postuseravatar, .eventbit .userinfo .eventuseravatar { display:block; margin:{vb:math {vb:stylevar padding}/3} auto 0; text-align:center; width: auto; } Code:
.postbitlegacy dl.userinfo_extra dt, .postbitlegacy dl.user_rep dt { float: {vb:stylevar left}; text-align: {vb:stylevar left}; /*color: {vb:stylevar shade_color};*/ margin-{vb:stylevar right}: {vb:stylevar padding}; margin-{vb:stylevar left}: 0; min-width:60px; width:auto !important; width:60px; } /*Custom Postbit Background - Userinfo Alignment*/ Code:
.postbitlegacy dl.userinfo_extra2 dt, .postbitlegacy dl.user_rep dt { float: {vb:stylevar left}; text-align: {vb:stylevar left}; /*color: {vb:stylevar shade_color};*/ margin-{vb:stylevar right}: {vb:stylevar padding}; margin-{vb:stylevar left}: 0; min-width:60px; width:auto !important; width:60px; } Navigate to: Style Manager --> Click on the << >> Next to the template you are editing -->Postbit Templates postbit_legacy: FIND: Code:
<div class="userinfo"> Code:
<vb:if condition="is_member_of($post, #)"><div class="userinfo2"> <vb:else /> <div class="userinfo"> </vb:if> Code:
<dl class="userinfo_extra"> Code:
<vb:if condition="is_member_of($post, #)"><dl class="userinfo_extra2"> <vb:else /> <dl class="userinfo_extra"> </vb:if> All right! You should now have a styled postbit legacy background image for a specific usergroup! I can't really provide support, I'm extremely busy with work and life, but if I pop in from time to time I'll try to help. Also, please, please, please create your own background image. I do not want my image being used. If you would like to setup the modification and use my image to get it up and running, that's fine. But I am asking that you create your own after it's installed properly. Good luck guys! Screenshots
Supporters / CoAuthors Show Your Support
|
Comments |
#2
|
||||
|
||||
thanks man
|
#3
|
||||
|
||||
nice mod
|
#4
|
||||
|
||||
No problem guys! Glad it worked for you and you liked it!
|
#5
|
|||
|
|||
Thank you very much
|
#6
|
||||
|
||||
|
#7
|
|||
|
|||
This hasn't worked right for me, Admin avatars were 150x150px, they've now been resized and lost there transparency, other than that it has worked, but what piece of code handles the avatar width?
I think transparency has been lost due to the image being resized. Edit: I've found the resize code, I've changed this. |
#8
|
|||
|
|||
It's ok I've worked it out.
Installed I replaced this Code:
/*Custom Postbit Background - Avatar Border*/ .postbitlegacy .userinfo2 .postuseravatar img, .eventbit userinfo .eventuseravatar img { background: #ffffff; border: 1px dotted #d8d8d8; padding: 3px; max-width: 80px; max-height: 80px; } With Code:
/*Custom Postbit Background - Avatar Border*/ .postbitlegacy .userinfo2 .postuseravatar img, .eventbit userinfo .eventuseravatar img { background: #ffffff00; border: 0px solid #ffffff00; padding: 3px; max-width: auto; max-height: auto; } |
#9
|
|||
|
|||
Is it possible to put a background into more than 1 usergroup?
So I could have a different background for Mods and Vip's. |
#10
|
|||
|
|||
It is possible to reduce the message area?
|
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|