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)
3591 Downloads/Views
admin 28
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!
Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
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)
3402 Downloads/Views