vb.org Archive - Show Thread Enhancements - [CM] Post Bubble (Sharp, Rounded & Different Colors)

NEWS: Get this mod as XML Product by clicking on the link below:
https://vborg.vbsupport.ru/showthread.php?t=287136

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 the choosing another Tip https://vborg.vbsupport.ru/external/2012/08/27.png in different colors!

Example Image

https://vborg.vbsupport.ru/external/2012/08/28.png

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" or your "postbit" template! Depends on which one you use! I use "postbit legacy" on my template!

Step 2: Now find the code below inside the postbit legacy or your postbit template.

Code to find:

Code:

<!-- message -->

<div id="post_message_$post[postid]">

$ad_location[ad_showthread_firstpost_start]

$post[message]

</div>

<!-- / message -->

Now, add our code PART 1: ON TOP OF IT:

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 below the same code add our last part of the code to close it as a Wrapper:

Code to add below:

Code:

</fieldset>

If you notice, we just added the CODE inside our code,,,

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 => https://vborg.vbsupport.ru/external/2012/08/27.png 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!

https://vborg.vbsupport.ru/external/2012/08/73.png

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

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01229 seconds Memory Usage 1,742KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (8)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: