CMS Made Simple Forums

Hi
Can anyone explain how I can show an image in the background of the page but not in admin when editing.

My CSS at the moment is:

body {
background-image:url(https://www.mysite/uploads/images/body-bg.jpg);
background-repeat:repeat;
}

The problem is the image shows when editing a page which makes it difficult to add text etc. I would like to remove it from admin.

Thanks

One way: If you use TinyMCE (find out at My Preferences > My Account > User Preferences > Select WYSIWYG to use).

Then: Extensions > TinyMCE WYSIWYG editor and have a look around there (can't find an installation with TinyMCE at the moment to give you further details). Pretty sure there is an option to add specific CSS.

Hi
Yes there is an option to add CSS in Tinymce which we are already using, but these only affect the content page you are edit at the time.


I am trying to remove/hide a background image from Tinymce admin which shows in the editor while editing a page which prevents from seeing the text.

Thanks

The options Paul mentions should be what you're looking for.

Another approach could be to use the browser's inspector to find a specific class for the editor. (could be something like .tinymce) and override the background in your css

e.g.
.tinymce body {background: none;}

Hi
I have now got back to looking into the issue.

While building the site we just temp removed the BG image but now we have other editors using the site we like to find an answer to the problem.

I believe there must be someway.

We have added this bit of code to the css file.

/* TinyMCE specific rules */
body.mceContentBody { background: #fff; color:#000; }

We have also tried adding this to css background: none !important;

But this seems to have no affect could something be missing?

Thanks for any further ideas.

Try using the some code to add the image to take it away...

background-image bla bla bla {none}

Thanks for your suggestion but unable to make it work.

We now have this in the css.

/* TinyMCE specific rules */

body.mceContentBody {
background-image: none !important;
background: #fff; color:#000; }

Is the call correct body.mceContentBody could that be wrong??

Thanks

Dusting off an old test site and installing TinyMCE... it looks like the editor content is sandboxed in an iframe where the child body can inherit the parent styles (optionally from the CMSMS design) but to override them you need to insert them *within* the child. TinyMCE seems to offer a number of ways of doing that (see Configure the appearance of content inside TinyMCE's editable area). I think the easiest way in this case is to go via javascript...

Extensions > TinyMCE > [profile] > Templates | Extra JavaScript options for the init script

Adding content_style...
... does the trick here but you may need to CTRL-F5 to see the change.

Thanks for your suggestion but unfortunatly it still the same.

I have added one more line to your suggestion.

paste_as_text: true,
image_caption: true,
content_style: 'body {background-image:none;}',
content_style: 'body {background-color:yellow;}'

But still unable to hide the image or get a yellow background.

Cleared the cache and rebooted the system each time but no luck.

I will keep trying but if you have any other ideas I would appreciate it.

Thanks

Hi again
Just notice that I now have a yellow background on my dropdown css selections.
So its possible the content_style that is wrong.

Thanks

Barrowboy wrote: ↑Wed Jul 07, 2021 4:22 pmJust notice that I now have a yellow background

Perhaps you didn't refresh the browser -- or a server clear-cache was needed.

It seems to work here...

... adding this to the design's main stylesheet ... makes editing content quite tricky

Updating the default TinyMCE profile with ...
... yellow remains and the image disappears (but I did clear the cache and refresh the browser a couple of times).

Hi Again

Got it Hooray, Hooray.

Change the setting to you last recommendation and yellow to white.

Cleared cache in maintenace, browser, and the server now works. Didn't do server last time.

That's a load of my mind.

Thanks for all your help I hope this helps anyone else with the same issue.

Regards.

Cool

By the way, I only used background-color as an example (and an easy-to-see change in the TinyMCE's handy preview), you can probably run with just one property override...

Hi
Thanks but I had already done that.

It's nice to have a colour sometimes so you can follow what's going on.

My uses can now see and edit content.