Back Ground Image
Back Ground Image
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
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
- paulbaker
- Dev Team Member
- Posts: 1465
- Joined: Sat Apr 18, 2009 10:09 pm
- Location: Maidenhead, UK
- Contact:
Re: Back Ground Image
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.
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.
To copy System Information to the forum:
https://docs.cmsmadesimple.org/troubles ... nformation
CMS Made Simple Geekmoots attended:
Nottingham, UK 2012 | Ghent, Belgium 2015 | Leicester, UK 2016
https://docs.cmsmadesimple.org/troubles ... nformation
CMS Made Simple Geekmoots attended:
Nottingham, UK 2012 | Ghent, Belgium 2015 | Leicester, UK 2016
Re: Back Ground Image
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
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
Re: Back Ground Image
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;}
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;}
Re: Back Ground Image
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.
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.
Re: Back Ground Image
Try using the some code to add the image to take it away...
background-image bla bla bla {none}
background-image bla bla bla {none}
Re: Back Ground Image
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
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
- PinkElephant
- Forum Members
- Posts: 169
- Joined: Fri Feb 06, 2009 2:08 pm
Re: Back Ground Image
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.
Extensions > TinyMCE > [profile] > Templates | Extra JavaScript options for the init script
Adding content_style...
Code: Select all
paste_as_text: true,
image_caption: true,
content_style: 'body {background-color:yellow;}'
Re: Back Ground Image
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
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
Re: Back Ground Image
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
Just notice that I now have a yellow background on my dropdown css selections.
So its possible the content_style that is wrong.
Thanks
- PinkElephant
- Forum Members
- Posts: 169
- Joined: Fri Feb 06, 2009 2:08 pm
Re: Back Ground Image
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
Code: Select all
body {
background: url([[root_url]]/uploads/images/logo1.gif) repeat;
}
Updating the default TinyMCE profile with ...
Code: Select all
content_style: 'body {background-color:yellow;background-image:none;}'
Re: Back Ground Image
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.
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.
- PinkElephant
- Forum Members
- Posts: 169
- Joined: Fri Feb 06, 2009 2:08 pm
Re: Back Ground Image
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...
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...
Code: Select all
content_style: 'body {background-image:none;}'
Re: Back Ground Image
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.
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.