editor background color

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
4/27/2008 9:21:25 PM
Gravatar
Total Posts 5

editor background color

How can I change the background of the FCKEditor to white.

 

It keeps picking up the background image that I have chosen for the skin body.  I have googled extensively and tried many things that I have seen.  Little help?

4/28/2008 6:51:17 AM
Gravatar
Total Posts 18444

Re: editor background color

Hi,

In the layout.master file of your skin add a clss to the body tag like this:

<body class="pagebody">

It may already have this class in some skins. Set the background image (or color) in this class instead of directly on body. This will make it work on the page but not inside the editor.

i.e. move the styles from

body {}

to

.pagebody {}

Hope it helps,

Joe

4/28/2008 8:24:38 AM
Gravatar
Total Posts 5

Re: editor background color

Thanks for the reply,

 

I discovered this myself a couple of hours after I posted this message.

 

On another note...is there any document that maps out the CSS files.  I am creating a skin and using another skin as a guide but it is taking forever because  I have to change something, check the page to see what changed, and then change it back if need be.

ANy help in this?

4/28/2008 8:36:49 AM
Gravatar
Total Posts 18444

Re: editor background color

Sorry I don't have any answers to make it easy to do skinning. It takes knowledge of html, css, and getting to know the rendered html from mojoportal to discover the class names and things you can use as selectors for assigning styles. A lot can be learned from the included skins, thats really the best I can do is give good examples, there is no silver bullet I know of to make it all easy.

The css files are fairly self documenting, they are organized so that layout is in one file, colors in another, borders in another, images in another. menu/treeview styling is kept in a single file for the menu or treeview.

Even for me, creating a skin from a design is a trial and error process. I always use an existing skin as a starting point and I choose which skin to use as a starting point by the layout not the colors. For exmple if the design I'm trying to use is a fixed width layout with hirizontal menu, I pick an existing one that is fixed width horizontal menu. If its a fluid layout I start with a fluid layout, etc. Then its a process of making small changes, refresh the browser to see if it worked, repeat until the design is achieved.

Gradually you develop strategy from experience and have a good idea what changes to try, but its still the same process of make small change, see if it worked, repeat.

Hope it helps,

Joe

4/28/2008 8:46:06 AM
Gravatar
Total Posts 5

Re: editor background color

Well...I guess I am on the right track then.

 

Thanks for the help.

1/1/2009 7:36:32 AM
Gravatar
Total Posts 38

Re: editor background color

Hi,

I have in both body and .pagebody the style background-color: #6F7A86 (dcarter-bluespring skin), and body is <body class="pagebody">. But I'm still getting an FCKEditor whit a white background. Is this an issue related to dcarter-bluespring skin?

The problem is that text color inside editor is a light grey, so, in a white background, I can't see almost anything. Alternatively, I could set the editor's text color to black, in order to have black on white, but I cannot find how. Some helps?

Thanks,

LB

1/1/2009 9:59:33 AM
Gravatar
Total Posts 18444

Re: editor background color

Whenever you make changes to css you need to clear the server cache by touching web.config and the browser cache

The editor should show the background color specified by the body, use of pagebody is for when you don't want the editor to have that background the same as the page body has.

Hope it helps,

Joe

1/1/2009 6:06:12 PM
Gravatar
Total Posts 38

Re: editor background color

Thanks Joe,

the dcarter-bluespring skin contains the stylecolors.css file with

body { color: #D5D2D6; }

so this skin has FCKEditor with light grey text on a white background.

Regards,

LB

1/2/2009 6:11:55 AM
Gravatar
Total Posts 18444

Re: editor background color

Thanks for letting me know. I will fix that here so it will be fixed in the next release.

For anyone who needs to fix this now, there are 2 things that need fixing in stylecolors.css for dcarter-bluespring to make the editor readable.

1. Remove the color from body{}

2. Change from

a:link { color: white; }
a:visited { color: white; }
a:hover { color: #1775D5; }
a:active { color: white; }

to

.pagebody a:link { color: white; }
.pagebody a:visited { color: white; }
.pagebody a:hover { color: #1775D5; }
.pagebody a:active { color: white; }

After that you need to touch Web.config to clear the server cache and then clear the browser cache.

Best,

Joe
 

You must sign in to post in the forums. This thread is closed to new posts.