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

Halloween skin for TinyMCE: text or treat

Ben Long

October 26th, 2022

3 min read

Written by

Ben Long

Category

World of WYSIWYG

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).

TinyMCE skin builder showing the older TinyMCE 5 build process

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?

It’s a lower degree of difficulty, and involves changing JavaScript values. All you need is the following three steps:

  1. Access to the TinyMCE.init script

  2. Locate the skin_url and the content_style options

  3. 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

  1. Download. Download the Tiny Halloween 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. 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.

TinyMCE custom halloween skin running in a browser

The designer

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

What next?

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"

Happy Halloween!

Skins and IconsTinyMCEDesignCommunity
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. 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

  • World of WYSIWYG

    TinyMCE 5: Power meets beauty

    by Team Tiny in World of WYSIWYG
Subscribe for the latest insights served straight to your inbox every month.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor
Tiny logo
Privacy Policy - Terms of Use© 2023 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing