pragmaMx Support Forum pragmaMx Support Forum

speech css bubble for comments

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline diabolo

  • *****
  • 592
  • +4/-0
  • Geschlecht: Männlich
speech css bubble for comments
« am: 18 Juli 2007, 15:01:26 »
Hi,
demo ex:
http://www.pragmamx.fr/News-file-article-sid-100.html#comments

for this:
open style.css of your theme and add:
/* css comments*/
.sbl { background: url('../images/bl.gif') bottom left no-repeat #ECF4D7; text-align: left; width: 100%; }
.sbr { background: url('../images/br.gif') bottom right no-repeat; }
.stl { background: url('../images/tl.gif') top left no-repeat; }
.str { background: url('../images/tr.gif') top right no-repeat; padding: 10px; }
.sb { padding: 2px 0px 10px 50px; background: url('../images/b.gif') 30px top no-repeat; }

Download pictures form this attachment post
and put them in: /themes/Yourtheme/images/

Open /modules/News/comments.php

line 82:
echo '
        <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="' . $bgcolor2 . '"><tr><td>
        <table width="100%" border="0" cellspacing="0" cellpadding="2">' . $views . '</table>
        </td></tr></table>';

replace by
echo $views;
and line 279:
return '
    <tr bgcolor="' . $bgcolor2 . '">
    <td><a name="' . $data['tid'] . '"></a><span class="tiny"><b>' . $nameclick . '</b> ' . _WRITES . '&nbsp;' . _ON . ' ' . $datetime . ':</span></td>
    <td align="right">' . implode(' ', $pics) . '</td>
    </tr>
    <tr bgcolor="' . $bgcolor1 . '"><td colspan="2">' . $data['comment'] . '</td></tr>
    ';
replace by:
return '<div class="sbl">
    <div class="sbr">
    <div class="stl">
    <div class="str">' . $data['comment'] . '</div>
    </div></div></div>
<div class="sb"><a name="' . $data['tid'] . '"></a><span class="tiny"><b>' . $nameclick . '</b> ' . _WRITES . '&nbsp;' . _ON . ' ' . $datetime . ':</span>' . implode(' ', $pics) . '
</div>';

Enjoy  ;)
This is just a example from,
http://www.gamexe.net/view_tutorial.php?id=24

 there is lot of possibilities for speech bubble css
look at google  ;)


Offline Sitki

  • ******
  • 3.747
  • +0/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #1 am: 18 Juli 2007, 15:27:59 »
Hi Diabolo  :),

very nice idea! And thank you for the provision of information.  :thumbup:
viele Grüße
Kein Support über PN, Mail oder Messenger!
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

Offline henne

  • *******
  • 2.915
  • +2/-0
  • Geschlecht: Männlich
  • All in all is all we are!
Re: speech css bubble for comments
« Antwort #2 am: 18 Juli 2007, 15:38:26 »
very nice  :thumbup: :thumbup:
bye Henne

don't click the blue "e" on your desktop, use Firefox

Jeden Tag verschwinden Rentner im Internet, weil sie gleichzeitig alt und entfernen drücken

Offline Sitki

  • ******
  • 3.747
  • +0/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #3 am: 18 Juli 2007, 16:22:37 »
... and the same way for the comments in surveys it works as well.  ;)
viele Grüße
Kein Support über PN, Mail oder Messenger!
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

Offline diabolo

  • *****
  • 592
  • +4/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #4 am: 19 Juli 2007, 10:25:14 »
Hi,
another way with javascript and css
source:
http://www.cssplay.co.uk/menu/bubbles


1/Open style.css of your template and add:
/* Rounded Bubble */
div.bubble div.rounded {
margin-bottom: 10px;
border: 1px solid #668247;
background-color: #F2F2F2;
}
div.bubble div.rounded blockquote {
border: 0;
background-color: transparent;
}
div.bubble div.rounded blockquote p {
margin: 0px 10px;
}
div.bubble cite.rounded {
position: relative;
margin: 0px;
padding-left: 15px;
padding-top: 12px;
top: 9px;
background: transparent url(../images/tip-rounded.gif) no-repeat 15px 0;
}

2/Open /modules/News/comments.php

Do the same change for line 82

And for line 279 replace by:
return '<div class="bubble">
    <div class="rounded">
<blockquote><p>' . $data['comment'] . '</p></blockquote>
</div>
<cite class="rounded"><a name="' . $data['tid'] . '"></a><span class="tiny"><b>' . $nameclick . '</b> ' . _WRITES . '&nbsp;' . _ON . ' ' . $datetime . ':</span>' . implode(' ', $pics) . '</cite>
</div>';

3/Download file attachment

-> Copy tip-rounded.gif to /themes/Yourtheme/images/
-> Copy rounded_corners.inc.js to /themes/Yourtheme/

4/Open theme.html of your theme and just after
<!-- START more_header -->Cut and paste code from javascriptcode.txt

Enjoy
Result:


This speech buble is so nice and very easy to change but using javascript  :heu:

Offline Sitki

  • ******
  • 3.747
  • +0/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #5 am: 20 Juli 2007, 16:16:11 »
Hi  :),

what do you mean exactly with
Zitat
Do the same change for line 82
?
viele Grüße
Kein Support über PN, Mail oder Messenger!
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

Offline diabolo

  • *****
  • 592
  • +4/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #6 am: 21 Juli 2007, 13:43:45 »
Hi,
If you ve not made change for first method

Zitat
ine 82:
Code:

 echo '
        <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="' . $bgcolor2 . '"><tr><td>
        <table width="100%" border="0" cellspacing="0" cellpadding="2">' . $views . '</table>
        </td></tr></table>';

Zitat
replace by
Code:

echo $views;
;)

Offline Sitki

  • ******
  • 3.747
  • +0/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #7 am: 22 September 2007, 18:10:59 »
Hi Diabolo :),

I’m so sorry, that I forgot to thank you for your last information, so I wish to make up leeway. Thank You!

Also I have to register me today on pragmaMX France and saw a very great work, that you and your team to mount. My respect and compliment! :thumbup:

Sorry for my bad English. :red:
viele Grüße
Kein Support über PN, Mail oder Messenger!
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

breakdancer

Re: speech css bubble for comments
« Antwort #8 am: 22 September 2007, 19:29:45 »
Natürlich macht das bei mir wieder Probleme  :puzzled:

Hi out there,

also from me thnx for nice interpretation of comments by working with speech bubbles. That is a great hint, Diabolo, you made my day !

But...

it seems I have some Problems with deformed output and the grafics do not really fit... See here for example please: http://www.kirmes-und-volksfest.de/News-file-article-sid-75.html

Anyone here to tell me, why it looks so crazy ?

Kind regards

Markus

Offline diabolo

  • *****
  • 592
  • +4/-0
  • Geschlecht: Männlich
Re: speech css bubble for comments
« Antwort #9 am: 22 September 2007, 19:36:50 »
Hi,

For this comments
http://www.pragmamx.fr/News-file-article-sid-100.html#comments

This is another method with no javascript  ;) only css

I'll explain it in the next few days  ;)