Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[CM] Post Bubble (Sharp, Rounded & Different Colors) Details »»
[CM] Post Bubble (Sharp, Rounded & Different Colors)
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: 08-14-2012 Last Update: 08-15-2012 Installs: 21
Template Edits
Additional Files Translations  
No support by the author.

This was brought to you by ChiNa-Man


First of all I am a free soul, So if one of you guys decided to post this on another forum or a website, I would be appreciated if you give some CREDITs to the Developer simply typing his name: Credits to: ChiNa-Man, and do not CHANGE or DELETE the ORIGINAL CONTENT! Thank you!

:::::::::::::::::::::::::::::::::::::::::::::


Notice, This mod was configured on vB 4.2 Only!


Hey Guys, I have tried to make this to a Product, I must admit it was a bit harder than I expected, but I figured out if we could do this without changing the Default Template, and just add the code instead it will be a lot better, because then you have much more options to change Color of the Background, and choosing another Tip in different colors!


Example Image



So lets get started:

I will first add 2 Different codes for the Post Bubble! One with Sharp Corners, and the other one with Rounded Corners!

We will do this tutorial with the Sharp Cornered, And keep in mind that it has 2 Parts!

Now we need to find the POST Variable or POST Code in your Postbit_Legacy Template! We have to WRAP our code arround the code in the Postbit_Legacy, so every post will be showen inside the BUBBLE!

Step 1: Go to your ADMINCP area, Click on Styles & Templates, and now you will see your Template name, click on the DropDown Menu to the right of your Template, and choose Edit Template.

You should now be in the template area, now look for Postbit Templates, and then click on "postbit legacy" (This code is for Pos

Step 2: Find the code below inside the postbit legacy template.

Code to find:
Code:
<h2 class="title icon">
<vb:if condition="$show['messageicon']"><img src="{vb:raw post.iconpath}" alt="{vb:raw post.icontitle}" /> </vb:if>{vb:raw post.title}
</h2>
</vb:if>

Now, add our code PART 1: right below:


Code to add:
Code:
<div id="1" style="float:left; z-index: 1; position: Absolute;">
<br><img src="images/purple.png">
</div>
<div style="z-index: 25; padding: 11px;">
<fieldset style="background: #ffffff;
border:2px solid #9F54FF;
margin:1px 3px 3px 1px; padding:7px; 
-moz-border-radius: 11px;
border-radius: 8px;
box-shadow: 0 0 1em #9F54FF;
-webkit-border-radius:8px;
position: relative;">


Now in same Template, Find the last part of the code:


Code to Find :

<div id="post_message_{vb:raw post.postid}">
<blockquote class="postcontent restore ">
{vb:raw post.message}
</blockquote>
</div>


Now add the Part 2 of the code below to close our Wrapper:

Code to add below:
Code:
</fieldset>
And we are done, Now if you look up in our code, I have marked one of the lines with RED COLOR! Thats the PATH to the TIP your going to use! Now dont forget to upload one of the TIP Images in your forums "images" folder! If you dont know what the TIP is, then this is the TIP => Download the "Extras.zip" file that I have attached below, you will find all the images for the TIPS and also many diffrent codes and COLORS inside the file!

Follow the Tutorial Below for more and exact info!
And make sure to Click on Installed, for further support or help!



Extra Tutorial & Changes


Ok I will now add both of the codes, basicly the full code to the Sharp and Round Cornered Post Bubble

Code 1 (Sharp Cornered)
Code:
<div id="1" style="float:left; z-index: 1; position: Absolute;">
<br><img src="images/purple.png">
</div>
<div style="z-index: 25; padding: 11px;">
<fieldset style="background: #ffffff;
border:2px solid #9F54FF;
margin:1px 3px 3px 1px; padding:7px; 
-moz-border-radius:8px;
box-shadow: 0 0 1em #9F54FF;
-webkit-border-radius:8px;
position: relative;"> POSTBIT CODE HERE </fieldset>



Code 2 (Round Cornered)
Code:
<div id="1" style="float:left; z-index: 1; position: Absolute;">
<br><img src="images/purple.png">
</div>
<div style="z-index: 25; padding: 11px;">
<fieldset style="background: #ffffff;
border:2px solid #9F54FF;
margin:1px 3px 3px 1px; padding:7px; 
-moz-border-radius: 11px;
border-radius: 8px;
box-shadow: 0 0 1em #9F54FF;
-webkit-border-radius:8px;
position: relative;"> POSTBIT CODE HERE </fieldset>

So the code is simple, all we did was we added the code from postbit legacy, inside OUR code! Where it says "POSTBIT COD HERE"!
I just explained it in 2 Parts:!

Now if you see I have marked the parts that can be edited with a color!



Red:
Path to your TIP image
Blue: Post Bubble Background Color
Lime Green: Color for the Border
Orange: Post Bubble Shadow

Download Now

File Type: zip Extras.zip (26.2 KB, 65 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #12  
Old 08-26-2012, 02:19 PM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Syria BoY: Glad you made it, Enjoy buddy

GamerPerfection: Looking great on your forum, thanks for sharing, You forum looks very nice and clean. Thanks for Installing it!
Reply With Quote
  #13  
Old 08-27-2012, 11:39 AM
xixxon's Avatar
xixxon xixxon is offline
 
Join Date: Jun 2007
Location: Việt Nam.
Posts: 126
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

It's very nice. Thank you
Reply With Quote
  #14  
Old 08-30-2012, 07:32 AM
GalnetMIUI GalnetMIUI is offline
 
Join Date: Sep 2011
Posts: 3
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks for this, it has helped make my forum much easier to read!

Is there a way to have this display in the What's New section as well?
Reply With Quote
  #15  
Old 08-30-2012, 09:20 AM
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Posts: 457
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by GalnetMIUI View Post
Thanks for this, it has helped make my forum much easier to read!

Is there a way to have this display in the What's New section as well?
Nope not right now, but if you could send me a graphic or a drawing of how you wanted it too look like, then I will maybe make a mod for that too
Reply With Quote
  #16  
Old 12-14-2012, 03:25 AM
doileloi's Avatar
doileloi doileloi is offline
 
Join Date: Oct 2007
Posts: 24
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

how we do for forum postbit ?
Reply With Quote
  #17  
Old 09-16-2013, 04:14 AM
Bubble #5 Bubble #5 is offline
 
Join Date: Apr 2005
Posts: 984
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Is there anyway to have the shadow appear just at the bottom and right side (like a real shadow)?
Reply With Quote
Reply


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 07:42 PM.


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.04969 seconds
  • Memory Usage 2,294KB
  • Queries Executed 22 (?)
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
  • (5)bbcode_code
  • (1)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
  • (1)pagenav_pagelink
  • (7)post_thanks_box
  • (7)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (7)post_thanks_postbit_info
  • (6)postbit
  • (1)postbit_attachment
  • (7)postbit_onlinestatus
  • (7)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
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • 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