The best way to style wysiwyg editors

[Tony_db]

I have emultiple content blocks on pages, where i use different background, styles etc.

How and what is the best way to make setup styleheets with: margins, background ans headings for
all those different content blocks.

I tried to atach static stylesheets to different blocks, but i dont seem to get it to work.
$this->CreateTextArea(true,$id, $winkel['content_blue'], 'contentBlue', '','', '', 'blue.css', '100', '10', ''));

I also have taken a look at the 'CSS styles' tab at the TinyMCE config menu, but i dont get it

PS: i now only have the background changed for all content blocks at Advanced->Body tag CSS.
But all my content blocks need a different backgound, to look like the frontend.

[Dr.CSS]

This is rather interesting seeing as how most people are trying to get the background to go away, I have no idea at this time how to get the different blocks to take the styles you want for each...

[jmcgin51]

I can't tell you how to get each one to have a different background, but adding styles to the WYSIWYG is easy.  Check the Tiny forums for info.

[henris]

Maybe if you adapt the templates and wrap your contentBlocks inside of DIV tags. Then you can define the css of the  div as you like... ok I know it is not very "dynamic" but it should work... after all conternt blocks are used more than once... Just in case you wouldn't understand what I am talking about... just here a sample of code.

instead of writing:

{myContentBlock}

you write :


{myContentBlock}


in the template.... and in the css you will have something like

.myContentContainer{
background-color: #9FF;
        background-image="myImage.jpg";

}

[tophers]

I know this is a bit of a stale topic, but fits my question perfectly.

We typically try to employ basic html elements when styling content, then use css specificity to achieve the desired effect. For example:

Code: Select all

h3 {
	color:#CCCCCC;
	font: bold 14px/18px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
#sidebar h3 {
	color:#50A1CD;
	font:bold 14px/16px Arial, Helvetica, sans-serif;
	text-transform:none;
}

So that the editor simply has to choose to style the text (rather than a particular style, like .sidebarheading, that could be misused).

Our problem is the WYSIWYG display - the Page Edit view doesn't show these div-specific styles within the Content Block editing windows, so the H3 in the Sidebar show up as gray, not the blue #50A1CD that they should be. The editor (our client) doesn't see them headings as blue, and then tries to add styles to the until it becomes blue (usually messing everything up in the process!).

In the example above the {content block='Sidebar'} is wrapped in . Is there a way to have TinyMCE read the container id or class of a Content Block, and display the styles accordingly?

[Dr.CSS]

No

tiny only takes the body background and no other styles like h3 etc....