Unit Verse

Optimizing Your CSS for Unify’s Editor

• by Ryan 2 years ago
• 4 Comments

At times you may want to optimize your CSS to craft specific styles which would be better suited for editing content in Unify. Since Unify currently uses TinyMCE as it’s text editor, we can pinpoint what’s shown in the editing window by simply prepending body.mceContentBody before any CSS selector.

Here are some examples.

Example: Changing the Font-size

Tom is the owner of TomsTumultuousTshirts.com (that domain is totally available, BTW). He’s 120 and ½ years old, has very bad eyes, and uses Unify to edit his site. But Tom is having trouble reading the text in the editor and he can’t see what he’s typing.

So Tom’s designer jumps into the code to add some styles into his stylesheet. In this case, since Tom is having a problem seeing the content of <div id="about">, the designer will need to add this line, which will affect the editor for this <div> only:

body.mceContentBody div#about {
   font-size: 700px;
}

Now the font-size in the editor for that <div> is 700 px, and Tom can read his site fine.

Example: Removing the Background Image

Ingrid’s site, IngridsInsights.com, uses a very tasteful blinking rainbow .gif for the background, but she’s having readability problems when she’s editing her site. Right now, the CSS looks like this:

div#main-content {
   background-image: url(images/awesome-blinking-rainbow.gif);
}

With a quick addition to the end of the CSS file, Ingrid’s designer can remove that background-image from the editor, and now Ingrid can see what she’s typing.

body.mceContentBody div#main-content {
   background-image: none !important;
}

Nicely done, designer. Now Ingrid is able to easily read and edit her content in the editor.

Example: Changing the Background to Black (or any color)

Nancy and Ulysses have a site that teaches young children about the radiation emanating from black holes, and because of the subject matter, their designer opted for a completely black website with white text, but when Nancy and Ulysses open the Unify editor, they can’t read any text since the background in the editor is white.

Usually, they adjust the contrast by scrolling their mouse in the contrast field, but they don’t want to have to do this every time. So Nancy’s designer jumps into the CSS and adds this line:

body.mceContentBody{
   background: #000;
}

Now they can read the white text with ease and can continue to educate the young minds about Hawking radiation.

Possibilities Galore

By adding some CSS rules to your stylesheets, you’ll be able to change the editing styles to fit your clients’ needs. This keeps the UI clean, gives you many options for optimization, and keeps the control in your hands.

Have fun!