Show Thread Enhancements - Postbit Legacy - Usergroup Backgrounds vb4

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:

.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;
}

ADD UNDER:

/*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;
}

---> Note: The Red xxxxxx is a color number. You need to specify a background color in case you aren't using an image. Remove the /* and */ around the url code to use an image. Otherwise it will just change the color of the box. I suggest fading the image to the color of the background you choose, as shown in the picture example.

FIND:

.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}};
}

ADD UNDER:

/*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}};
}

FIND:

.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;
}

ADD UNDER:

/*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;
}

FIND:

.postbitlegacy .userinfo .postuseravatar, .eventbit .userinfo .eventuseravatar {
	display:block;
	margin:{vb:math {vb:stylevar padding}/3} auto 0;
	text-align:center;
	width: auto;
}

ADD UNDER:

/*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;
}

FIND:

.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;
}

ADD UNDER:
/*Custom Postbit Background - Userinfo Alignment*/

.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;
}

That does it for the CSS file. Now we need to do one last thing, and that's edit the posbit_legacy template.

Navigate to:

Style Manager --> Click on the << >> Next to the template you are editing -->Postbit Templates

postbit_legacy:

FIND:

<div class="userinfo">

REPLACE:

<vb:if condition="is_member_of($post, #)"><div class="userinfo2">
<vb:else />
<div class="userinfo">
</vb:if>

FIND:

<dl class="userinfo_extra">

REPLACE:

<vb:if condition="is_member_of($post, #)"><dl class="userinfo_extra2">
<vb:else />
<dl class="userinfo_extra">
</vb:if>

The RED # is the ID of the usergroup that you want to have a unique background. In my example picture, the administrators have the custom image, so the # sign is replaced in the code with a 6, because the ID for the administrator usergroup is 6. To find the ID, go to usergroup options in the AdminCP and look at the chart. The group ID should be on the same line as the usergroup name.

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!

[HHelp1]

Originally Posted by d19rnyxx

Brilliant mod but can't get it to work because of the custom theme.

yES and i think it no longer work for 4.1.8 or greater

[RobbieZ]

Originally Posted by HHelp1

yES and i think it no longer work for 4.1.8 or greater

Still working on 4.1.11 !

[HHelp1]

Only for default ? Or any style ?

[wishtheend]

Installed fine, but does anyone know if the userinfo2 can be extended so it runs the length of the actual post? Mine also cuts off after the user info, but I'd like it to run the length of the post as indicated by this arrow

Example Pic

[Nocturnal222]

thanks working at vb4 latest version

[Pure Dope]

this is wonderful! but 2 many template mods.

[Pure Dope]

if you can get the template mods down to 0 and make the background for the entire post for the usergroup, that would be awesome!

[Subieforums]

This mod looks pretty badarse...

Is there a certain size the background images have to be for this? Just asking before I start adding this code, as I want to make custom graphics for each of the usergroups. Thanks!

[Luis]

Originally Posted by Fastbird

One usergroup is like this:

<vb:if condition="is_member_of($post, #)"><dl class="userinfo_extra2">
<vb:else />
<dl class="userinfo_extra">
</vb:if>

Two usergroups is like this:

<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>

You keep adding the statement over and over and then add a vb:if at the end for each additional phrase you add. Then, you must duplicate the css each time for each usergroup. So, in the example for installation, I use userinfo2 for the duplicate css codes. Each additional usergroup will have an incremental increase, so the css for the 2nd usergroup would be userinfo3, the 3rd user group would use userinfo4, and so on. Just keep duplicating each of the steps above for each usergroup.

done xD!

[FTG LIQUID CL]

Does not seem to work with 4.1.12