Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

Text or treat: TinyMCE’s seasonally spooky skin

Ben Long

October 26th, 2019

Written by

Ben Long
Ben Long

Category

Trends & Inspiration

What did the skeleton say on Halloween?

Gimme some skin!

Skeletons and gamers aren’t the only ones looking forward to new skins this Halloween. At Tiny, we’re excited to show off one of ours, and we’re “leaking” it to make sure you have plenty of time to enable it and surprise your users first thing Thursday morning (October 31). 👻

The Tiny Halloween 2019 skin applied to TinyMCE.

Live demo

We’ve applied the Tiny Halloween 2019 skin to TinyMCE in a React app on CodeSandbox, so you can check it out and play around with it right here.

Apply the Halloween skin to TinyMCE

Applying skins to TinyMCE is easy:

  1. Download. Download the Tiny Halloween 2019 skins.zip file.
  2. Unzip. Unzip the file in a location that can be accessed from where the editor is initialized.
  3. Configure. Add configuration to the editor initialization script, specifying the path to the location of the skin and css files:

    skin_url: "/skins/ui/tiny-halloween-2019",
    content_css: "/skins/content/tiny-halloween-2019/content.css"
    

Looking at the source code in the React example above, you’ll find the skins folder inside the public folder, and the initialization script in index.js.

The designer

Complete with “pumpkin orange” highlights, the skin was created by one of our principal designers, Fredrik Danielsson, using the TinyMCE Skin Tool, which is currently under development. Fredrik is also the designer and architect of the tool.

Skins are fun to make because you can really customize the pumpkin out of it, and the upcoming skin tool will make it even easier.

Fredrik Danielsson, Principal Designer at Tiny
Sneak preview of the TinyMCE 5 Skin Tool (coming soon).

What next?

While you’re here, find out more about the Tiny Skins and Icon Packs premium plugin. We’ll soon have a new thin icon pack available too.

And stay tuned for news of our dark mode (coming soon). Actually – spoiler alert! – it’s already available in the community version of TinyMCE 5.1, and you can initialize it with the following settings.

skin: "oxide-dark",
content_css: "dark"

Happy Halloween!

Skins and Icons
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Pizza Desk Image by Joanna Ławniczak
    Trends & Inspiration

    How a fight over pizza rewrote web accessibility for the Fortune 5000

    by Robert Collings in Trends & Inspiration

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor