Jump to content
vBWarez - Rest In Peace

Fancy Background for Userinfo & Post Title [vb4.2.0]


Recommended Posts

[CENTER][B]Made after Postbit Legacy options / May work on Posbit[/B]

[B]Fancy Background for Userinfo & Post Title[/B]

Used for ADMINS - With 5 Stars Backgounrson Both Background
[IMG]http://i45.tinypic.com/11m525i.png[/IMG]

First of all Upload the 2 Images to your forum Images folder, which is attached below!

userinfo.png + posttitle.png = Upload both to your forum Images folder

[SIZE=3]1) [COLOR="#FF0000"]posttitle.png[/COLOR] [/SIZE]

[IMG]http://i576.photobucket.com/albums/ss208/Miklo_jan/adminbadge_zpsb686fec0.png[/IMG]

[SIZE=3]2) [COLOR="#FF0000"]userinfo.png[/COLOR][/SIZE]

[IMG]http://i576.photobucket.com/albums/ss208/Miklo_jan/userinfo_zps0710a414.png[/IMG][/CENTER]

[CENTER]You only need to upload [B]userinfo.png + posttitle.png [/B]to your images folder.[/CENTER]

[COLOR="#FF0000"]Lets start the Tutorial:[/COLOR]

STEP 1: FIRST GO TO YOUR TEMPLATES AREA, and find "CSS Templates"
In CSS Templates look for "postbit.css", Click on it and open it !
Now scroll all the way down, and add the following code below everything else:

ADD THE CODE BELOW IN YOUR POSTBIT.CSS:

Code to add in postbit.css:

[CODE].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: url([COLOR="#FF0000"]URL TO YOUR userinfo.png IMAGE[/COLOR]) no-repeat;
width:175px;
height:400px;
_margin-top: -{vb:math {vb:math 16px*{vb:stylevar line_height}} + {vb:stylevar padding}-{vb:stylevar postbit_border.borderWidth}};
clear:both;
}
.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}};
}
.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;
}
.postbitlegacy .userinfo2 .postuseravatar, .eventbit .userinfo .eventuseravatar {
display:block;
margin:{vb:math {vb:stylevar padding}/3} auto 0;
text-align:center;
width: auto;
}
.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;
}[/CODE]

[B]STEP 2[/B]: Now if you look at the FIRST code, I have marked it in [COLOR="#FF0000"]red[/COLOR] where it says: ([COLOR="#FF0000"]URL TO YOUR userinfo.png IMAGE[/COLOR]) on top!

Replace the [COLOR="#FF0000"]red[/COLOR] code with the URL to the [B]userinfo.png[/B] image in you images folder!

So basicly make sure now both of the images in are uploaded the "[B]userinfo.png[/B]" and "[B]posttitle.png[/B]" to your forums "images" folder!

[B]STEP 3[/B]: Now you need to go back to [B]Style Manager[/B] and click on the again back to the Template area to Edit the Postbit_legacy template.

Now in the Templates area Locate the Postbit Templates! Click on it and open the template called "postbit_legacy"!

[B]In postbit_legacy:
[/B]

[B]FIND CODE:[/B]

[CODE]<div class="userinfo">[/CODE]

[B]REPLACE WITH:[/B]

[CODE]<vb:if condition="is_member_of[COLOR="#FF0000"]($post, 6)[/COLOR]"><div class="userinfo2">
<vb:else />
<div class="userinfo">
</vb:if><center>
[/CODE]

[B]IN SAME TEMPLATE FIND:[/B]

[CODE]<dl class="userinfo_extra">[/CODE]

[B]AND REPLACE WITH:[/B]

[CODE]<vb:if condition="is_member_of[COLOR="#FF0000"]($post, 6)[/COLOR]"><dl class="userinfo_extra2">
<vb:else />
<dl class="userinfo_extra">
</vb:if><center>[/CODE]

As you can see the [COLOR="#FF0000"]NUMBER 6 as ($post, 6)[/COLOR] is the usergroupd ID that you want to have a fancy background!

[B]Now this was for the USERINFO Background, lets fix the "POST TITLE" background, but do not refresh your "postbit_legacy" template, Stay there to add the last part:
[/B]

[B]LAST PART FOR USERTITLE BACKGROUND:[/B]
In your postbit_legacy find the following code below:

[B]FIND THIS CODE:[/B]

[CODE]<h2 class="title icon">[/CODE]

[B]Add this code below:[/B]

[CODE]<vb:if condition="is_member_of[COLOR="#FF0000"]($post, 6)[/COLOR]">
<img src="images/posttitle.png" alt="Admin Image"><br />
</vb:if>[/CODE]

Now lets make all of it to stay in CENTER, if you dont want it to be centered, you can SAVE it now, and DONE!

But if you want it all to be showen nicely then I suggest you center it all, following my instructions!

[B]In same Template, Postbit_legacy find..[/B]

[B]Find this Code:[/B]

[CODE]<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />[/CODE]

[B]Add this code below:[/B]

[CODE]</center>[/CODE]

[B]In same Template find Code:[/B]

[CODE]<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd>[/CODE]

[B]ADD THIS CODE BELOW:[/B]

[CODE]</center>[/CODE]

Now [B]CLICK SAVE[/B], and we are done!

And again the Number 6 is used [COLOR="#FF0000"]($post, 6)[/COLOR] the 6 is the usergroup ID for Administrators! So it means that ONLY the admins will be able to have this BACKGROUND IMAGE! If you decided to give other usergroups a fancy background as the admins!

You can add more USERGROUP ID's or Numbers like this: [COLOR="#FF0000"]($post, 2,4,6)[/COLOR]

[CENTER][SIZE=4][COLOR="#FF0000"]EXTRA and OPTIONAL INFO[/COLOR][/SIZE]

If you decided to use your own images for the BACKGROUND, then make sure thar you images should match the options below:

Name one of the images to userinfo.png+ Name the the other to posttitle.png

Size of images should be:
userinfo.png: 400px height + 175px width
posttitle.png: 276px height + 37px width


The posttitle_EXTRA.png below is an extra image with the ADMIN to the right!
I you wanted to use it then make sure to change the name to posttitle.png

EXTRA IMAGE: posttitle_EXTRA.png
[IMG]http://i576.photobucket.com/albums/ss208/Miklo_jan/adminbadge_EXTRA_zps8466ae2e.png[/IMG]
[/CENTER]

Edited by dingo
  • Like 4
Link to post
Share on other sites
Was hoping to do this for admin and subscribers. Great mod dingo, keep the template mod tutorials coming. I love making the site look as different as possible. In fact contact me by PM and i will let you loose on my template to have all the fun you want. ;-)
Link to post
Share on other sites
  • 7 months later...
how to customize it?

selection of this backgound is group right?

how about....if the selection is the users?

i select the users with different pictures..
and also the Part of Message Box have a Background

How?

LIKE THIS

[IMG]http://i44.tinypic.com/29ynxp4.png[/IMG]

THANKS! Edited by jvdatahan
Link to post
Share on other sites
  • 1 year later...
  • 1 month later...
[quote name='havanna']Someone finds out how to add different postbit background to different users? like user x with bx and user z with bg z, and so on?
I would like to know if someone knows a way to make it...
Thanks.[/QUOTE]

Yeah. But it doesn't always work. It kept breaking on mine
Link to post
Share on other sites
×
×
  • Create New...