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 |
#22
|
||||
|
||||
Still have this tagged Fastbird, get it going for 4.0.2 please :up:
|
#23
|
||||
|
||||
Ignore me I am a knob, will install :up:
Add: Where does it pull the image from? Looking over code changes, I cant see where the image is extracted from. Is it profile pic? |
#24
|
||||
|
||||
If you want an image, you need to supply one and place it in the CSS. It's commented out. Check the first section of code to add/replace for it.
|
#25
|
||||
|
||||
Quote:
Thanks anyhoo your code: Code:
background: #xxxxxx /*url(url to image here) no-repeat*/; Code:
background: #ff9900 images/bg.jpg no-repeat; Even tried absolute URL |
#26
|
||||
|
||||
Quote:
Code:
background: #ff9900 url(images/bg.jpg) no-repeat; |
#27
|
|||
|
|||
I see on your site you used different images for different usergroups, how do I do the same??
|
#28
|
||||
|
||||
One usergroup is like this:
Code:
<vb:if condition="is_member_of($post, #)"><dl class="userinfo_extra2"> <vb:else /> <dl class="userinfo_extra"> </vb:if> Code:
<vb:if condition="is_member_of($post, #)"><dl class="userinfo_extra2"> <vb:else /> <vb:if condition="is_member_of($post, #)"><dl class="userinfo_extra3"> <vb:else /> <dl class="userinfo_extra"> </vb:if> </vb:if> |
#29
|
|||
|
|||
It's not possible to make it simpler? Because duplicating css I think shouldnt be necessary if you can somehow do that.
|
#30
|
||||
|
||||
If there's a simpler way, I don't know it. The way I explained it is known to work, so if there is a better way, then by all means go for it. I just don't know what that way is, sorry
|
#31
|
|||
|
|||
Thnx i will install this soon! but how do you get your postbit look like that???
|
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|