MyBB Community Forums

Full Version: Add ballon post style like www.mybb-es
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello i would like to add the Baloon post style like in mybb-es if u need an example is the orange line near the post of the author...how to do it for each group ??

I found this http://www.mybb-es.com/Hilo-globos-de-di...gen?page=1 but all the groups use the same color....

Thank you Smile
This tutorial will help you make bubbles in post bit Step one open templates>Template Set> -name of template- >

postbit Add this this code :

<div class="post_arrow"></div>
<style type="text/css">
.post_body {
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
background:none repeat scroll 0 0 #c margin:8px;
padding:10px;
color:;
text-shadow:0 -1px #ffffff;
} .post_arrow {
border-bottom:12px solid #cedfff;
border-left:12px solid transparent;
border-right:12px solid transparent;
height:0;
margin-bottom:-12px; margin-left:15px;
margin-top:3px;
width:0;
}
</style><div class="post_arrow"></div>

Above:
<div class="post_body" id="pid_{$post
['pid']}">
{$post['message']}


You can replace the arrow with image just replace
<div class="post_arrow"></div> to <img src="image url">

and remove the .post_arrow css. The image just
point to the user or above

NOTE: This is only work with horizontal postbit
(2012-07-27, 10:14 AM)Matt-One Wrote: [ -> ][quote='envira' pid='891509' dateline='1343377850']
This tutorial will help you make bubbles in post bit Step one open templates>Template Set> -name of template- >

postbit Add this this code :

<div class="post_arrow"></div>
<style type="text/css">
.post_body {
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
background:none repeat scroll 0 0 #c margin:8px;
padding:10px;
color:;
text-shadow:0 -1px #ffffff;
} .post_arrow {
border-bottom:12px solid #cedfff;
border-left:12px solid transparent;
border-right:12px solid transparent;
height:0;
margin-bottom:-12px; margin-left:15px;
margin-top:3px;
width:0;
}
</style><div class="post_arrow"></div>

Above:
<div class="post_body" id="pid_{$post
['pid']}">
{$post['message']}


You can replace the arrow with image just replace
<div class="post_arrow"></div> to <img src="image url">

and remove the .post_arrow css. The image just
point to the user or above

NOTE: This is only work with horizontal postbit

Well i found this for the normal postbit because i use this:
in the postbit :

<div id="1" style="float:left; z-index: 1; position: Absolute;">
<br><img src="http://www.cionfs.it/forum/images/globito01.png">
</div>
<div id="2" style="z-index: 0; padding: 5px;">
<fieldset class="<if $thread['uid'] == $post['uid'] then>post_op<else>post_otro</if> "">
{$post['message']}
</div>
</div>  

in global.css

fieldset.post_op { 
background: #ffffff; 
border:2px solid #bde1fd; 
-moz-border-radius:8px; 
box-shadow: 0 0 1em #b6b6b6;
-webkit-border-radius:8px; 
position: relative; 
} 
fieldset.post_otro { 
background: #ffffff; 
border:2px solid #f4c98c; 
-moz-border-radius:8px; 
box-shadow: 0 0 1em #b6b6b6;
-webkit-border-radius:8px; 
position: relative; 
}  

But, how to change the icon when other users answer?? Baloon color lines changes but what about the icon?? Thank you Smile

PS
For icon i mean globito01.png Smile
I did it this way with great success and it is very easy:
Go to: ACP > Templates > Postbit Templates > postbit_classic > and find;

{$post['message']} 

and Change it into;

<div id="1" style="float:left; z-index: 1; position: Absolute;">
<br><img src="http://mimspace.com/mybb/images/chameleon/arrowleft.png">
</div>
<div id="2" style="z-index: 0; padding: 5px;">
<fieldset style="background: #ffffff;
border:2px solid #C3C3C3;
border-radius: 8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
position: relative;">{$post['message']}</fieldset>
</div>
</div></div>

Credit for this belongs to Mimspace
and I got it off of Yaldaram's Site

do that in postbit and postbit classic and I guarantee it will work..
(2012-07-27, 10:21 PM)Starnova Wrote: [ -> ]I did it this way with great success and it is very easy:
Go to: ACP > Templates > Postbit Templates > postbit_classic > and find;

{$post['message']} 

and Change it into;

<div id="1" style="float:left; z-index: 1; position: Absolute;">
<br><img src="http://mimspace.com/mybb/images/chameleon/arrowleft.png">
</div>
<div id="2" style="z-index: 0; padding: 5px;">
<fieldset style="background: #ffffff;
border:2px solid #C3C3C3;
border-radius: 8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
position: relative;">{$post['message']}</fieldset>
</div>
</div></div>

Credit for this belongs to Mimspace
and I got it off of Yaldaram's Site

do that in postbit and postbit classic and I guarantee it will work..

thank you but i solved this problem just now eheheheh Smile