I have a page design which uses css background images on an unordered list (puts an icon in the corner). All works fine until you enter wysiwyg mode. The wysiwyg does not honor the ‘no-repeat’ rule and renders icon backgrounds ad-infinitum - makes it a little hard to see the text!.
I have tried tweaking the CSS and so far have managed to turn the backgrounds off in the ‘preview’ mode of simple edit, but they return when you actually enter the wysiwyg editing mode. Another attempt removed all the background images from the toolbar buttons, but not the ones on the page!
I tried forcing the whole wysiwyg area to have a ‘no-repeat’… eg: [font=“Courier New”]#htmlarea * { background-repeat: no-repeat !important; }[/font], again without success.
Obviously, whatever CSS selector I use is going to need to be quite specific! any hints?
[quote]I tried forcing the whole wysiwyg area to have a ‘no-repeat’… eg: [font=“Courier New”]#htmlarea * { background-repeat: no-repeat !important; }[/font], again without success.
Obviously, whatever CSS selector I use is going to need to be quite specific! any hints?[/quote]
In your system configuration > global preferences > WYSIWYG style… do you have the body type as div or iframe? (iframe always used in mozilla). If you are using firefox then you are always getting an iframe. In which case you will not be able to load css styles into the content within that iframe. If your using the visual aid plugin you could think about adding this functionality to it.
ah, OK, so we have it as an iframe, but it still puzzles me that one style is getting through (applying the background), but I can't find anyway to override that style to remove it.
The background style is applied by a linked style sheet (just a text file, not a css asset) in a customisation (mysource_files/custom.css).
Any ideas on how to override that when in the wysiwyg?
Checking back up on the iframe threads… you are able to apply styles to the iframe's properties such as background colour and size etc… just not the content of the iframe (so is my current thinking).
You could try to add this to /__fudge/wysiwyg/core/htmlarea.css :
iframe {
background-color: #fff; }