Background Image in Article Editor - How Can I Remove it?

[indenticus]

I've recently set up a new website, but the back-end Article Editing window has a background image which is obviously from one of the front end templates I've installed. How can I get rid of the image and change the background to a light grey or any other pastel colour?

I've searched everywhere to try to find the link to this image. I'm using the Extended version of TinyMCE.

[coalaweb]

In these situations a great way to find out where a css style is being feed in from is by using Firebug.

https://getfirebug.com/

You should then be able to right click the back ground area and select "Inspect element with Firebug"

The image below is me doing this exact thing on the editor window I'm currently writing this post in.

[brian]

add the following to your template css
.mceContentBody {
background: none !important;
}

[indenticus]

Thanks Brian, but I have a number of front-end templates, and am using Bluestork back-end template. I've added that code to the Bluestork template.css, but the image still appears in the Article Editor, so should I have added it to others? If so, which ones?

[brian]

Add it to the default frontend template

[coalaweb]

If you use firebug you could find out which css file is producing the background colour or any other css atribute (for the furure) and make changes accordingly.

[indenticus]

If you use firebug you could find out which css file is producing the background colour or any other css atribute (for the furure) and make changes accordingly.

I tried that, thanks, but there's no indication of why the image is showing there. However, it may be that the TinyMCE editor window has a transparency setting which is allowing the front-end default template's background image (which is what the image is) to show through. So where do I need to look to find such a transparency value?

[coalaweb]

Ahh Ok That's interesting any chance of a screen shot?

[indenticus]

Add it to the default frontend template

I tried that too, but no joy.

[coalaweb]

I have seen in the past, some templates cause a conflict by applying the site's background as the wysiwyg editor's background but as Brian said it's normally to do with

Code: Select all

.mceContentBody

and in those cases I have put the following in the default templates css file and it fixed it for me.

Code: Select all

/* TinyMCE specific rules */
body.mceContentBody {
   background: #FFF !important;
   background-image: none;
}

I will do some more research.

[indenticus]

I've discovered a workaround to this problem that avoids editing the CSS files (because I want the ability to update the templates without having to do that each time).

I have created an additional front-end template which has a plain pastel-coloured background, and installed that as the default template. Then I assigned the working templates to the appropriate menus so that the plain default template doesn't show in the front end - but its plain background now shows in the Article editor.

[coalaweb]

Wow that's a very elaborate work around. You could also try creating a CSS file let's say custom.css place it in your default templates css directory and then add your changes. Next add it to the main CSS file of the template with an import statement.

Code: Select all

@import url(../template/css/custom.css);

when the template is updated it wont affect your custom CSS file and all you have to do is add the @import again and you are good to go.

[indenticus]

Thanks but the site already has a different template for each of its four sections, so adding a fifth is not a problem. It also means that when I update any of the other four (and the client may also do that in the future) there's no need to edit any CSS files at all.

[kona_pete]

I'm trying to remove the template background image from the TinyMCE editor.

I added:

.mceContentBody {
background: none !important;
}

to my template.css file, but the image is still displayed in the editor.

Is there something else that might work?

It would be nice if the plugin included a setting to display or not display the image.