Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications

Reply
 
Thread Tools
[CM] Fancy Background for Userinfo & Post Title (Postbit) Details »»
[CM] Fancy Background for Userinfo & Post Title (Postbit)
Version: 1.00, by ChiNa ChiNa is offline
Developer Last Online: Feb 2023 Show Printable Version Email this Page

Category: Show Thread Enhancements - Version: 4.2.0 Rating:
Released: 10-12-2012 Last Update: Never Installs: 15
Template Edits
Re-useable Code Code Changes  
No support by the author.

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



1)posttitle.png



2) userinfo.png



You only need to upload userinfo.png + posttitle.png to your 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">
REPLACE WITH:
Code:
<vb:if condition="is_member_of($post, 6)"><div class="userinfo2">
<vb:else />
<div class="userinfo">
</vb:if><center>
IN SAME TEMPLATE FIND:
Code:
<dl class="userinfo_extra">
AND REPLACE WITH:
Code:
<vb:if condition="is_member_of($post, 6)"><dl class="userinfo_extra2">
<vb:else />
<dl class="userinfo_extra">
</vb:if><center>
If you can see the NUMBER 6 as ($post, 6)
is the usergroupd ID that you want to have a fancy background!

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">
Add this code below:
Code:
<vb:if condition="is_member_of($post, 6)">
<img src="images/posttitle.png" alt="Admin Image"><br />
</vb:if>
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!

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>
In same Template find Code:
Code:
<dt>{vb:rawphrase posts}</dt> <dd>{vb:raw post.posts}</dd>
ADD THIS CODE BELOW:
Code:
</center>
Now CLICK SAVE, and we are done!

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

File Type: png userinfo.png (27.3 KB, 0 views)
File Type: png posttitle.png (9.6 KB, 0 views)
File Type: png posttitle_EXTRA.png (9.5 KB, 0 views)

Supporters / CoAuthors

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
2 благодарности(ей) от:
Karma, patrick91

Comments
  #22  
Old 12-04-2012, 04:38 PM
patrick91 patrick91 is offline
 
Join Date: Aug 2009
Posts: 72
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

You make my DAY man!!!! I''m happy it is there for vB4.2 will try this soon big thanks!

1. Is there a possibilty to make it work on different user ids instead of usergroup?

2. Can i let the image stick to the bottom of the postbit?
Reply With Quote
  #23  
Old 12-05-2012, 07:11 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by patrick91 View Post
You make my DAY man!!!! I''m happy it is there for vB4.2 will try this soon big thanks!

1. Is there a possibilty to make it work on different user ids instead of usergroup?

2. Can i let the image stick to the bottom of the postbit?

1: Yes you can, but you need to change the number of the usergroup... And remember to change the "ADMIN" TEXT in the image"! Bcoz if you wanna use it for a moderator, then you cant use the image that says ADMIN!

2: I didnt get this one You can try fix the images yourself and see how it works for you!

3: Thanks for clicking on Installed ! Enjoy
Reply With Quote
  #24  
Old 12-06-2012, 07:54 PM
patrick91 patrick91 is offline
 
Join Date: Aug 2009
Posts: 72
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by ChiNa-Man View Post
1: Yes you can, but you need to change the number of the usergroup... And remember to change the "ADMIN" TEXT in the image"! Bcoz if you wanna use it for a moderator, then you cant use the image that says ADMIN!

2: I didnt get this one You can try fix the images yourself and see how it works for you!

3: Thanks for clicking on Installed ! Enjoy
1. I mean i want to use USERID instead of USERGROUPID'S? You feel me User dump100 has an USERID of 153

2. if you make a long post than the image shows on top. Can it set to be at the bottom.
Reply With Quote
  #25  
Old 01-28-2013, 07:42 PM
marccap's Avatar
marccap marccap is offline
 
Join Date: Feb 2012
Location: uk
Posts: 152
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by patrick91 View Post
2. if you make a long post than the image shows on top. Can it set to be at the bottom.
This would be useful to know
Reply With Quote
  #26  
Old 01-29-2013, 09:18 AM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by patrick91 View Post
1. I mean i want to use USERID instead of USERGROUPID'S? You feel me User dump100 has an USERID of 153

2. if you make a long post than the image shows on top. Can it set to be at the bottom.
Yes you can, but thats something you would have to figure out yourself, where and how! I have a few Ideas but if you needed help then I will for sure help you out.
Reply With Quote
  #27  
Old 02-06-2013, 01:35 PM
Nocturnal222 Nocturnal222 is offline
 
Join Date: Dec 2006
Posts: 121
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

i cannot find the postbit background not the userinfo background mod. anyone?
Reply With Quote
  #28  
Old 02-15-2013, 01:47 PM
ti6 ti6 is offline
 
Join Date: Dec 2011
Posts: 26
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi there!

As always, great mod. Have a question relating to this thread https://vborg.vbsupport.ru/showthrea...37#post2404437 . Is it possible to combine this with your mod? On the web i found this site http://www.urbanterror.info/forums/t...-january-2012/ admin posts look different than others. I really like this idea.
Reply With Quote
  #29  
Old 08-11-2013, 04:10 PM
marccap's Avatar
marccap marccap is offline
 
Join Date: Feb 2012
Location: uk
Posts: 152
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is there a way to have one image for a usergroup and a different image for a different usergroup etc etc
Reply With Quote
  #30  
Old 04-29-2014, 01:32 AM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I dont say it cannot be done, but it requires more work and we need to add an extra css field for the image in the css. But honestly I dont wanna recommend it, Because some of you guys will end up ruining the Postbit template. And it might take more than 1 hour or so. So I am not taking my chances on that,

But feel free to do it at your own risk and play arround with the Postbit code yourself.
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:07 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.07855 seconds
  • Memory Usage 2,349KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (11)bbcode_code
  • (4)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (10)post_thanks_box
  • (2)post_thanks_box_bit
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (3)postbit_attachment
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete