White text in edit mode

[SparkyCanada (Peter)]

Greeting everyone

I am having difficulty figuring out how to change the background in edit mode so that I can see white text - which I am using on my website

Would also be OK if I could figure out how to type in black in edit mode and have it automatically convert to white when published…

Any suggestions on how to do this?

Thanks,

SparkyCanada

[willwood (William Woodgate)]

If using the Styled Text page type in RapidWeaver, it would probably be good to keep the content black at all times. In other words, apply no styling to it using the controls in RapidWeaver.

Then use some custom CSS code to change its colour to white:

#content {
    color: white;
}

The CSS code would only take effect when the page is previewed or published. So in edit mode, you should be able to see what you are typing!

Add the CSS code in the Page Inspector > Code > CSS box.

The exact code (e.g. the #content selector name) depends on the theme being used. If you find the above code does not work, if you share the link here, someone might be able to suggest a slight alternative.

CSS code looks scary, but is in fact quite simple for tasks like this.

Separating your content from the styling is always considered the best approach in the web design industry. It also makes for cleaner code, with less inline styling and other verbiage.

[SparkyCanada (Peter)]

Thanks for the response Will Woodgate.

So, if I just place that code in the CSS box - nothing happens (using Climate Theme)

If instead I place a “Markdown” stack on the page - the text on the edit page is black and the font on the published test page is white… this happens with and without the CSS code…

Not sure why this is doing what it’s doing…

Is there a long term problem that may develop if I do my entire site like this?

Thanks,

SparkyCanada

[willwood (William Woodgate)]

The Climate theme supplied with RapidWeaver already converts any text you type in the Styled Text page type into a light shade, when you preview or export the webpage.

I just tested it, and this was the result I got:

Edit Mode

Preview Mode

Other themes would probably behave the same way.

So could it be possible that you are pasting in content from another source (like Pages, Microsoft Word or Libre Office) that is contaminated with hidden formatting, like text colouring?

Or maybe after you typed your text, you accidentally highlighted it all and used the white colour picker to recolor it white in Edit Mode?

When using the Styled Text page type or a Styled Text stack, 99% of the time you never need to touch the formatting controls. Instead you let the theme recolour and format your text to suit the theme design.

If you really did want to change the text colour in Climate and saw no theme style setting to do it already, then this is the CSS code to be using for that theme:

.content {
    color: red;	
}

Resulting in:

However it looks like the Climate theme is already setup to let you type styled text in the default black colour, and then convert it to white or light grey when the page is previewed or published. So you might have taken a wrong turn somewhere.