Match Your Post Editor to Your Twenty Fourteen Theme Edits

After following along with the previous two tutorials we’ve done, your 2014 theme has new colours and it’s a bit wider. Well there’s one more thing I like to do to make things nice and clean! Let’s match up the new colours and the new width in our post editor!

I assume since we’ve gotten this far, you already have a child theme set up! I’m going to make a theme editor css file that matches my changes. You would need to substitute in the widths and the colours that you selected in the past 2 tutorials so that yours matches!

The first thing you need to do is make a folder named css in your child theme. If you haven’t already uploaded your child theme, it’s easy. If you have, you need to use ftp or your host’s file manager to take care of that. Inside of that folder you will need a file named editor-style.css with the code I will give below. I’m just matching up to my changes, if you went further and changed font sizes, margins, etc. you can take care of that in this file as well to match up!

Here’s the values you need. Whatever you set the content width  to be (not the hentry value, the actual content width), your link colour, and your hover link colour. Here are the defaults that came with 2014 as well as what I had used:

  • The content width value was 474, I bumped that up to 654
  • The link colour was #24890d, I used #bc175b
  • The hover colour was #41a62a, I used #ed2597

That’s all we need for my changes. Here’s all of the code in my editor-style.css file:

/*
Theme Name: Voodoo Child 2014
Description: Used to style the TinyMCE editor.
*/

html .mceContentBody {
	max-width: 654px;
}

a {
	color: #bc175b;
}

a:visited {
	color: #bc175b;
}

a:active,
a:hover {
	color: #d62c68;
}

img {
	max-width: 654px;
}

Leave a Reply