Fall leaves dancing in the chill breeze… a distant shadow drifting on the moon. It must be the spooky season again. And this year, why not add some (pumpkin) spice to your rich text editor with a seasonal, visual treat (not a trick at all 😉).
Being a versatile and flexible rich text editor, TinyMCE accepts custom skins to adjust how the editor looks – without you needing to completely overhaul the User Interface (UI).
One way of marking the spooky season is to make use of TinyMCE skins for Halloween. This article guides you through the steps to apply a TinyMCE custom skin, for the seasonal change.
But first, some halloween humor: What did the skeleton say on Halloween? Gimme some skin!
Haha… but it’s not just skeletons looking forward to new skins this Halloween. If you’re on on the lookout for a halloween skin for your editor, take a look through this article – there’s plenty of time to enable your Halloween look for your editor, and surprise your users first thing on October 31st 👻.
Halloween skin live demo
Here’s the complete skin working on TinyMCE:
Halloween skin design – how to design a skin
To build this skin, the TinyMCE skin builder provided a direct pathway. However, there are other ways to do this – another is to modify an existing skin.
Following the interactive builder process, you can easily construct a specific TinyMCE look which vastly alters the User Experience (UX).
Why create a custom TinyMCE skin?
Apart from a seasonal event, creating a new appearance for your rich text editor can refresh its look, which is a valuable addition for your users. The design of a website is one major factor that can improve traffic and visitors, alongside consistency in messaging, recency in messaging, and loading speed.
“A professional looking website can make or break a user’s impression of your website and in turn how much traffic you get…Is your design up to date and does it extend the presence of your business, or is it something you're embarrassed of?
~ Dominic Anastasio, Domin8 Designs
After a redesign, what you’re specifically looking for is an increase in web traffic quality. The main method to get this done is to record a benchmark prior to the redesign, and then compare it using a tool such as Google Analytics, to traffic following the redesign. It’s an increase in traffic quality that can often justify a redesign, and even if the increase is small, it can be a positive step forward.
How easy is it to toggle the Halloween skin on/off?
Access to the TinyMCE.init script
Locate the skin_url and the content_style options
Change these options to reference a specific style, or your custom style if you had one set up, and save
With this process in mind, the following paragraphs explain how to incorporate a new, custom skin into TinyMCE.
How to apply Halloween skin to TinyMCE
Download. Download the Tiny Halloween skins.zip file.
Unzip. Unzip the file in a location that can be accessed from where the editor is initialized.
Configure. Add configuration to the editor initialization script, specifying the path to the location of the skin and css files. These are the two options to configure:
skin_url: "/skins/ui/tiny-halloween-2019", content_css: "/skins/content/tiny-halloween-2019/content.css"
Looking at the source code in the demo, which uses the TinyMCE React integration, you’ll find the skins folder inside the public folder. The initialization script in index.js. This is where the initial editor content appears as HTML in as a string.
Complete with “pumpkin orange” highlights, the skin was created by one of our principal designers.
“Skins are fun to make because you can really customize the pumpkin out of it.” ~ Fredrik Danielsson, Principal Manager at Tiny
You can find out more about the Tiny Skins and Icon Packs premium plugin. We’re always working on new skins and icon packs, and signing up for a FREE API key gives you 14 days access to the skins and icons, as well as all our other Premium plugins.
Looking for a dark mode? you can initialize it with the following settings.
skin: "oxide-dark", content_css: "dark"