Buy Now
Sign in

Changing the quote display style (v1.2)

Sadowskin , October 20 2008, 08:43
S
Sadowskin 14
October 20 2008, 08:43 #15618
I wanted to change the display style of the quotes for the great Chronocomments component v1.2 on my site.
I think you can do this with the blocquote style in your template.css but I wanted a seperate style for Chronocomments...
Maybe it can be useful to someone else. The steps I took (the ones I remember ):

********
Backup the original chronocomments files !!!
Make sure you can write to directories and files mentioned below.
If you chmod files and/or dirs to write to make sure to chmod them back to their previous permissions.
********

OPEN {joomla}/plugins/content/ChronoComments.php

on line# 89 FIND
$document->addCustomTag('<!--[if !IE]> <--><link href="'.JURI::Base().'components/com_chronocomments/style.css" rel="stylesheet" type="text/css" /><!--> <![endif]-->');

AFTER INSERT
$document->addCustomTag('<link href="'.JURI::Base().'components/com_chronocomments/chronoquote.css" rel="stylesheet" type="text/css" />');

on line# 320 FIND AND REPLACE
'<p style="font-weight: bold; padding: 0px; margin: 0px;">Quote:</p><blockquote style="padding: 0px; margin: 0px;">$1</blockquote>',

BY

'<div class="chronoquote">$1</div>',


SAVE AND CLOSE FILE
***
OPEN {joomla}/components/com_chronocomments/chronocomments.php

on line# 768 FIND AND REPLACE
'<p style="font-weight: bold; padding: 0px; margin: 0px;">Quote:</p><blockquote style="padding: 0px; margin: 0px;">$1</blockquote>',

BY
'<div class="chronoquote">$1</div>',


SAVE AND CLOSE FILE
***

You can now create a {joomla}/components/com_chronocomments/chronoquote.css file and change the style of the div to anything you like.

my chronoquote.css:
@charset "utf-8";
/* quote styling css for Quotes in ChronoComments http://chronoengine.com v1.2 (X.2008) */

/* For browsers other than IE */
html>/**/body div.chronoquote {
  background: #fff url(images/quotebg.png) no-repeat;
  margin: 0.5em 0.5em 0.5em 10px;
  padding-left: 30px;
  padding-top: 0.4em;
  border-left: #e5e5d8 5px solid;
}

/* For lte IE7 */
*:first-child+html {} * html {} div.chronoquote {
  background: #fff url(images/quotebg.png) no-repeat 5px 0px;
  margin: 0.5em 0.5em 0.5em 10px;
  padding-left: 30px;
  padding-top: 0.4em;
  border-left: #e5e5d8 5px solid;
}


/*this will NOT work in IE (for now anyway) !!! */
div.chronoquote:before {
  content: "Quote: "; /* change "quote" to your language or anything if you like... */
  
  font-weight: bold;
  
  display: block; /* for linebreak after quote */
  margin-bottom: 0.5em;
}


As you can see, I created " Quote: " text through css which will not work in IE, but I spent so much time fighting IE6 in the past, I consider it a bonus for those using other browsers 8)

*************
Hope someone will find it useful.
Attachments
quote_styling.jpg
quote_styling.jpg
(50.23 KiB)
3703 Downloads/Views
admin 29
October 20 2008, 12:34 #15629
Great addon, thanks for sharing!

Regards,
Max
Max
If your main question got answered then please mark the answer using the button!
Did you try the new ChronoForms7 ? if yes then please send us your comments!!
M
Maxvn 15
December 16 2008, 09:03 #19474
Thank for share,
i will use this qoute for my site.

regards,
S
Sadowskin 14
December 16 2008, 14:36 #19506
If you want you can use my bg image I put in the
{joomla}/components/com_chronocomments/images/
directory too.
Attachments
quotebg.png
quotebg.png
(0.38 KiB)
3507 Downloads/Views