[Request] Quoted Text Plugin (Details inside)

[TDT-Alpha]

Hi there,
I'm working on my CCW (Client Care Website) and I need some plugin that will look similar to the following image: (found on Google)

But the thing is, it cannot be just inserted image, it won't look good, and will be harder to make on many many pages, I need it like a tag...
Actually, it could be like in here:

Quoted Text

But with a little header says "Quote:"...
Can someone think about an idea on how to make this?

Thanks and have a nice day,
TDT-Alpha.
http://thedragonteam.myftp.org/

[dominionit]

cant you in the page edit change the hmtl directly and let this quoted text section inherit from class that you manipulate via css ? then you have the control you need ?

[mvlcek]

Hi there,
I'm working on my CCW (Client Care Website) and I need some plugin that will look similar to the following image: (found on Google)

But the thing is, it cannot be just inserted image, it won't look good, and will be harder to make on many many pages, I need it like a tag...
...
Can someone think about an idea on how to make this?

Add custom styles to your WYSIWYG editor like described here.

I suggest a definition like this:

Code:

{ name : 'Quote', element : 'p', attributes : { 'class' : 'quote' } },

Then add appropriate styles to your css file, e.g.:

Code:

.quote {
  background-image: ...; /* for the quotes */
  color: green;
  font-style: ...;
  ...
}

[TDT-Alpha]

cant you in the page edit change the hmtl directly and let this quoted text section inherit from class that you manipulate via css ? then you have the control you need ?

TF? I didn't get anything... And what does 'inherit' means??

Hi there,
I'm working on my CCW (Client Care Website) and I need some plugin that will look similar to the following image: (found on Google)

But the thing is, it cannot be just inserted image, it won't look good, and will be harder to make on many many pages, I need it like a tag...
...
Can someone think about an idea on how to make this?

Add custom styles to your WYSIWYG editor like described here.

I suggest a definition like this:

Code:

{ name : 'Quote', element : 'p', attributes : { 'class' : 'quote' } },

Then add appropriate styles to your css file, e.g.:

Code:

.quote {
  background-image: ...; /* for the quotes */
  color: green;
  font-style: ...;
  ...
}

Doing...
Where should I add the {define} thingy? When I put it in the config.js (inside admin\template\js\ckeditor) the whole editor disappears...

[mvlcek]

Doing...
Where should I add the {define} thingy? When I put it in the config.js (inside admin\template\js\ckeditor) the whole editor disappears...

See the wiki link.

[TDT-Alpha]

O.K did it all and should work but it doesn't, here's the CSS:

Code:

.quote {
  background-image: "http://thedragonteam.myftp.org/images/quote.png"; /* for the quotes */
  background-position: left;
  color: #09F;
  font-style: italic;
  margin-left: 25px;
}

It's in the Theme's style.css...

Actually, it does show up, it is in the right color but no image... The image is in the rught folder with the right name..

See client page:
http://thedragonteam.myftp.org/index.php?id=clientnum

[mvlcek]

O.K did it all and should work but it doesn't, here's the CSS:

Code:

.quote {
  background-image: "http://thedragonteam.myftp.org/images/quote.png"; /* for the quotes */
  ...
}

If you looked at the syntax of css, e.g. here, you would see that the syntax is rather:

Code:

background-image: url('/images/quote.png');

I suggest you use the Firefox plugin Firebug or the debugger of Chrome to look at HTML and CSS: There you can easily see, if an image is used or not. Or if a CSS rule takes precedence before another one...

[TDT-Alpha]

O.K finally managed to make that work...
Soooo much work, I think I'll learn PHP and post a plugin for it.. For the community here..

Example pages:
http://thedragonteam.myftp.org/index.php?id=clientnum
http://thedragonteam.myftp.org/

CSS:

Code:

.quote {
  background-image: url('/images/quote.png'); /* for the quotes */
  background-repeat: no-repeat;
  color: #09F;
  font-style: italic;
  margin-left: 0px;
  min-height: 50px;
  padding-left: 15px;
  padding-top: 15px;
  margin-bottom: -15px;
}

[Connie]

O.K finally managed to make that work...
Soooo much work, I think I'll learn PHP and post a plugin for it.. For the community here..

TDT-beta (just a joke),

I think you must learn more than PHP because this topic here is pure CSS + CKEditor, nothing with PHP

I get the impression that you demand too much at once, start reading our wiki first, it will help you a lot

Cheers and good success,

Connie

[RobA]

I created a dynamic text replacement plugin but never released it. See it work here:

http://testbed.cartocopia.com/test-page/

it renders the text in the tag as an image, styled according to default settings or settings that can specified in the tag.

I attached a version of here: http://get-simple.info/forum/topic/1394/...placement/

-Rob A>

[TDT-Alpha]

I created a dynamic text replacement plugin but never released it. See it work here:

http://testbed.cartocopia.com/test-page/

it renders the text in the tag as an image, styled according to default settings or settings that can specified in the tag.

I attached a version of here: http://get-simple.info/forum/topic/1394/...placement/

-Rob A>

Wow, If I would hav eknown this plugin it would have saved me about a half of an hour of coding.... Thanks..
I'll try to use it.

Please close the thread, I've got all I need and other people may, too.

[Connie]

I close it