The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
[CM] Fancy Background for Userinfo & Post Title (Postbit) Details »» | |||||||||||||||||||||||||||||||||
[CM] Fancy Background for Userinfo & Post Title (Postbit)
Developer Last Online: Feb 2023
Credits for the CSS Part to: FASTBIRDfrom vBulletin.org This mod was requested by member on vBCoderz.com where I am also a Staff Member. Please notice: This mod has only been tested on (Postbit Legacy) Fancy Background for Userinfo & Post Title Used for ADMINS - With 5 Stars Backgounrson Both Background 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 Tutorial Starts Here STEP 1: Goto your Style Manager >> Click on <<>> Button to enter your Templates Area >> Then find your "CSS Templates" >> In CSS Templates look for "postbit.css", Double Click on postbit.css to access it. >> Now scroll all the way down, and add the following code below everything else: 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(URL TO YOUR userinfo.png IMAGE) 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; } STEP 2: Now if you look at the FIRST code, I have marked it in red where it says: (URL TO YOUR userinfo.png IMAGE) on top. Replace the red code with the FULL URL to the userinfo.png image in you images folder! Example: http://site.com/forum/images/userinfo.png So basicly make sure now both of the images in are uploaded the "userinfo.png" and "posttitle.png" to your forums "images" folder! STEP 3: Now you need to go back to Style Manager 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"! In postbit_legacy: FIND CODE: Code:
<div class="userinfo"> Code:
<vb:if condition="is_member_of($post, 6)"><div class="userinfo2"> <vb:else /> <div class="userinfo"> </vb:if><center> Code:
<dl class="userinfo_extra"> Code:
<vb:if condition="is_member_of($post, 6)"><dl class="userinfo_extra2"> <vb:else /> <dl class="userinfo_extra"> </vb:if><center> 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: LAST PART FOR USERTITLE BACKGROUND: In your postbit_legacy find the following code below: FIND THIS CODE: Code:
<h2 class="title icon"> Code:
<vb:if condition="is_member_of($post, 6)"> <img src="images/posttitle.png" alt="Admin Image"><br /> </vb:if> But if you want it all to be showen nicely then I suggest you center it all following my instructions! In same Template, Postbit_legacy find.. Find this Code: 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}}" /> Add this code below: Code:
</center> Code:
<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd> Code:
</center> And again the Number 6 is used ($post, 6) 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: ($post, 2,4,6) Good luck and you can always ask if anything, and dont forget to visit us and contribute some more time on vBCoderz.com! Notice: Dont forget to download the 2 images attached right below, and upload them both to your forums Images folder! OPTIONAL INFO 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 and 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 image below is just an an extra image with the ADMIN text added on the opposit side! I you wanted to use it then to change the name to posttitle.png posttitle_EXTRA.png Screenshots
Supporters / CoAuthors Show Your Support
|
Comments |
#12
|
|||
|
|||
Quote:
Its all good and apology accepted mate. I respect you even more now! Thanks a lot, and with your work and your codings... You belong to the best in here! Regards ChiNa-Man |
#13
|
||||
|
||||
Good job man.
One suggestion: Ability for members to upload their own background via their cpanel. Thanks. |
#14
|
|||
|
|||
Is it at all possible to get this per usergroup so that a usergroup would have a different background?
|
#15
|
|||
|
|||
Thank you Mate, Very good one
|
#16
|
|||
|
|||
Quote:
@Bluefin221 well not in this version and, YES I did try see If i could make one for each but needs hard-coding! Only 1 of them can be made for all users, and thats the POST TITLE BACKGROUND, the USERINFO background is a bit hard and needs more codings.. But I will see if I can make that one day.. |
#18
|
|||
|
|||
This is a great little edit and i will be using it with my own styles added
Thank you. Regarding simonhind, don't worry about him he is a fool wishing he could do the same, I have reported his posts once again. It did the same in another thread and the mods removed his posts. |
#19
|
|||
|
|||
Quote:
Thank you, I am very new in this forum! I been here for 4 months, yet I have 50 releases or more! But I what I do, I repect older members on here! This is why I stick to myself ! No need to disrespect or make more out of it! But thank you for your kinds words! I just hope it doesnt happen for another person who have worked as hard as me,, |
#20
|
||||
|
||||
Is this only for the one usergroup or can you do this for a number of groups?
|
#21
|
|||
|
|||
Quote:
PostTitle Usergroup Permission: Code:
<vb:if condition="is_member_of($post, 6)"> <img src="images/posttitle.png" alt="Admin Image"><br /> </vb:if> So it will look like this: Code:
<vb:if condition="is_member_of($post, 6,5,7)"> <img src="images/posttitle.png" alt="Admin Image"><br /> </vb:if> |
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|