How can the background of CKEditor be changed to black, and the icons be changed to white -- for a dark website?
Using CKEditor 4 (4.11.4, source code version).
The background of the editor can be changed to black, but the buttons/icons become very dim and barely visible.
In [ckeditor_directory_path]/skins/moono-lisa/skin.js:
baseColor = colorBrightness( uiColor, -1 ),
In [ckeditor_directory_path]/skins/moono-lisa/config.js:
config.uiColor = '#000000';
This changes the editor background to black, but also results in dim buttons/icons. The icons need to be a brighter colour in order to be visible.
How can the icons be made white (#FFFFFF)?
There is a similar question, but the answer was not helpful. How to change ckeditor icons color
Hopefully in this case (using the "moono-lisa" skin), it is possible to change the background and button/icon colours using only CSS/Javascript/etc. and not create an entire set of graphical icons. The moono-lisa skin does not have an 'icons' directory (as other instructions regarding CKEditor version 3 have suggested): https://ckeditor.com/old/forums/CKEditor-3.x/How-change-toolbar-icon
So I don't know what the next step should be. Thanks in advance for your help.
(Update: edited to remove "tinyMCE" tags. I was going to warn other users not to use tinyMCE -- its "multiple editors per page" functionality is a nightmare to set up and the official documentation for tinyMCE 4 is cheerfully wrong. Numerous Stack Overflow topics only add to the confusion with no apparent correct answer. After days of wasted effort to work around several other tinyMCE issues, there seems to be no solution, hence I finally switched to CKEditor. But the deficiencies of tinyMCE are a separate issue. Hopefully CKEditor is a better option, although the documentation for basic features like background/icon colors, etc., aren't much of an improvement over tinyMCE -- which leads me here to ask this question...)
I've found two answers:
Moono Dark
Moono Dark Biskrem
Hope this helps someone looking for alternatives. If you have further thoughts about the question itself, that's also great, too; please add a comment. :)
Related
Maybe a simple question, but I am trying to enable light/dark mode for my Mac app. I added a color set, but what appeared wasn't what I expected. Instead of three colors I just have two, Any and Dark appearance.
I tried looking around for a fix, but I wasn't able to find anyone talking about this. Does anyone know what's going on?
Here's a screenshot I took that shows what is happening.
Occam's razor. You don't need three! Any plus Dark means that if you give Dark a different value, Any applies only to Light.
I have just upgraded to CKEditor 4.4.5 from 3.5, and notice quite a few changes !! One of the changes is the new skin called Moono which looks great. However it did get me wondering whether it would be possible to change the black in the menu icons to a custom colour, for branding reasons for example. We do this in the rest of the web application using a combination of Server code and CSS.
Many thanks.
Toolbar icons in Moono are images, so if you want to change them, you'd need to create a new skin or use an alternative one from the CKEditor Addons Repository.
However, since Moono is a monochromatic skin, maybe for branding purposes it would be enough for you to use the so-called "chameleon feature" that lets you change the UI color with a simple configuration option?
If so, just use config.uiColor to provide a mataching RGB color value or an HTML color name, as in:
config.uiColor = '#AADC6E';
See a working example here: http://sdk.ckeditor.com/samples/uicolor.html
I made a flyout window in the notification area using WinAPI and my goal was to make it similar to the flyout windows that show up when you click some of the icons in the notification area, like the Volume icon.
I already succeeded in making it look and behave similar to the other ones, but there is one thing I can't seem to figure out. The link area of the flyout windows has a darker blueish background and there is a subtle difference in the look between Windows 7 and Windows 8. A picture of it in Windows 7 can be seen here
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511448.aspx#flyouts
I achieved this by painting this link area of my flyout window manually in the right colors (including the gradient at the topmost part of the section) using the WM_PAINT message, but I just feel like it's too much of a hack, especially because it's not affected by changing themes in Windows. For example, if I set the "Windows Classic" theme this area should be grey and not blue.
So, my question is, am I missing something in how this can be achieved without painting the window manually. I noticed that the details pane in Explorer windows in Win 7 has the same look. I've searched quite a bit for answers but I haven't found anything yet. This is my first time doing a GUI using the WinAPI so I have very little experience, and therefore I'm assuming there is something that I just don't know about.
UPDATE:
I did manage to figure out how to draw this area without painting it manually. It can be drawn by using the OpenThemeData and DrawThemeBackground functions
HTHEME aeroTheme = OpenThemeData(hWnd, L"FLYOUT");
DrawThemeBackground(aeroTheme, hdc, FLYOUT_LINKAREA, 0, &rect, &rect);
This obviously only works when themes are enabled, so for non-themed cases I draw a normal rectangle with the appropriate color.
I'm not an expert in WinAPI so I can't offer any advice on achieving the look you want without manual painting.
However, if you're successfully achieving the appearance for a particular color theme, I'd suggest you look at the GetSysColor function and use this when creating your brushes for painting. This should allow you to get the correct colors based on the theme that has been set. More info (including a swatch table) can be found here.
Hope this helps.
For some reason the selected tab on TextMate is almost un-noticeable, I really cannot make it out, they all look the same to me. When I switch tab I notice it changing color, so I guess it's very very very slightly different, but that doesn't help much.
I've been having this problem for a while, but IIRC it worked fine some times ago — I've no idea what happened to trigger this change.
TextMate 1.5.10, OSX 10.6.8
Any idea?
Your screenshot looks normal to me.
Check your monitor’s “brightness” and “contrast” settings, and possibly your color profile (System Preferences → Displays → Color). On a flat-panel display, there may be a setting which will over-brighten the input signal, causing the top end of the range (light gray to white) to be clipped, so that it is all white (just like overexposure in a camera). There is no good reason to do this ordinarily, especially with a digital input signal, so you should adjust the settings to avoid clipping.
Here’s an image of a black-to-white gradient with a gray border. If a large portion of the left end looks flat white, then you are having that problem.
I have applied a color theme called Vibrant Ink (or some modification of it), and since I installed Visual Studio 2010 Pro Power Tools all my statement completion boxes are unreadable.
undreadable http://img139.imageshack.us/img139/7876/undreadable.png.
What setting changes the colors of these boxes? Preferrably, I'd like to change the background color to something darker, but if that's not possible at least I want to change the text color.
Update: I changed the SignatureHelpTooltipBackground setting under Tools->Options...->Environment->Fonts and colors, but this doesn't seem to affect the tooltips when editing JavaScript.
Is there another setting for JS colors, or is this a bug in VS?
The "default" ToolTip style has hard-coded colors that will only be different if you are running in high-contrast mode. Otherwise, it will be the light gray gradient you see in the picture above.
The tooltips in the ProPack for VB/C# files use a custom (configurable) style as you noted above.
Please submit feedback that the default tooltip background color should be configurable. The more customer requests are heard for this issue, the higher the likelihood it will be fixed in a future release:
http://connect.microsoft.com/VisualStudio
I'm not sure it is legal or not, we can always disassemble the code and modify (patch) what we want. In this case, find that gray color in assembly and change it. It shouldn't be hard for someone who knows .NET and hexes well.