CKEditor Dark Theme

Yesterday I wanted to adapt the CKEditor in my Laravel project for a dark background. (Note that while this will work with any CKEditor, not just in Laravel.) That shouldn’t be a problem, I found and installed the Moono Dark Theme.
* In Laravel the skins folder is located at public/vendor/unisharp/laravel-ckeditor
And don’t forget to add this line to the config.js file to enable the skin:

config.skin = 'moono-dark';

I thought I was done, but it looked like this:

I love the bar with the buttons, that’s perfect. But the background of the text area is still white and that’s no good, it’s very harsh on the dark site. It should be easy to find a css selector for it and change it though, right? As it happens… no. No it is not easy. Google showed me a lot of people who had the same problem and solutions that didn’t work. I updated CKEditor to 4.12 hoping that would make a difference, but it did not.

Here’s how I changed it.

First I decided to turn off the iframe by installing the Div Editing Area plugin. I’m sure there’s a way to change the iframe but for this method you’ll have to install the plugin first.
*In Laravel the plugins folder is located at: public/vendor/unisharp/laravel-ckeditor/plugins
Enable the plugin in the config.js file:

config.extraPlugins = 'divarea';

So now you can go in to /skins/moono-dark/editor.css and replace the following classes. I didn’t change all the content here, but to make it easier I’ve included everything within the affected classes so you can copy and paste to replace them. Now I’m sure I could have overridden these things in my project’s css file, but I wanted to keep it contained so that I can re-use it for other projects.

.cke_bottom {
	padding: 6px 8px 2px;
	position: relative;
	border-top: 1px solid #0d0d0d;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	background: #1f1f1f;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#333),
		to(#1f1f1f)
	);
	background-image: -moz-linear-gradient(top, #333, #1f1f1f);
	background-image: -webkit-linear-gradient(top, #333, #1f1f1f);
	background-image: -o-linear-gradient(top, #333, #1f1f1f);
	background-image: -ms-linear-gradient(top, #333, #1f1f1f);
	background-image: linear-gradient(top, #333, #1f1f1f);
	filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#ebebeb',endColorstr='#cfd1cf');
}
.cke_wysiwyg_div {
	display: block;
	height: 100%;
	overflow: auto;
	padding: 10px;
	outline-style: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cke_wysiwyg_div {
	background-color: #000;
	color: #CCC;
}
.cke_inner {
	display: block;
	-webkit-touch-callout: none;
	background: #000;
	padding: 0;
}
.cke_path_item,
.cke_path_empty {
	display: inline-block;
	float: left;
	padding: 3px 4px;
	margin-right: 2px;
	cursor: default;
	text-decoration: none;
	outline: 0;
	border: 0;
	color: #888;
	text-shadow: 0 1px 0 #000;
	font-weight: bold;
	font-size: 11px;
}
a.cke_path_item:hover,
a.cke_path_item:focus,
a.cke_path_item:active {
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.2);
	color: #888;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset,
		0 1px 0 rgba(255, 255, 255, 0.5);
}
/* add this class in if you want to fix the spacing at the top */
/* my custom theme already formats paragraph tags so this you might not need it */
.cke_inner p:first-child {
	margin-top: 0;
}

This will change the main background, the border, and the bar at the bottom with the path items. Now it looks like this!

I hope this helps someone! Let me know if you’ve figured out a solution for the iframe version.

Who am I and what am I doing here?

My name is Natalie and I’m a Web Developer. I’ve started this blog to share my progress, various tips and code, and whatever else may be relevant.

First of all, let’s back up. I learned HTML back in high school. I decided to get a Bachelors of Information Systems at college, learning things like object oriented programming, relational databases and networking. At the same time I was working on my web sites and doing small projects for people. I really enjoyed object oriented programming in Java, but I loved web programming. After college I moved to the US from Canada and started doing freelancing. I did a lot of full stack with WordPress and PHP, plus all the design work.

At that point in my story my husband and I started a family and funny enough babies kind of take over everything. I decided to stay home with the kids while they were little, and it has been some wonderful years. My kids are some of the best people I know and it has been a privilege to spend my days with them.

Now – I could say “finally,” because some days it feels like that, but it also feels like they were just born yesterday – my kids are both in school full time. I realized I know what I want to fill my time with: coding!

So here has been my journey so far:

  • Refresh my skills in JavaScript and PHP
  • Learn new things: JavaScript ES6, jQuery, CSS3, SASS
  • Learn GIT and GITHub
  • Try out a new framework – I chose Laravel so I could build a larger project with RESTful routing
  • Familiarize myself with the latest version of WordPress

I’ve been having so much fun! Many of the new features available now are really cool. Grid and Flexbox are amazing. jQuery is simple and powerful. Git honestly seems like magic.

Right now I am working on a Laravel project, which is nearing completion. I’m very excited to be able to share it soon! When that is done I’ll be completely re-designing my portfolio site. After that is done I would like to tackle React or Vue.

At first I didn’t want to start a blog because I didn’t want to put myself out there; I’m not an expert (yet), and I’m certainly not going to pretend to be one. I decided, however, that I do have something worth sharing, and at the very least I may help others out who are on a similar journey. I’m continually impressed by the web dev community and how helpful everyone is, so here’s hoping to find my own little corner. Thanks for stopping in!