14-day Cloud trial
Start today. For free.

One editor. 50+ features. Zero constraints. After your trial, retain the advanced features.

Try Professional Plan for FREE
PricingContact Us
Log InGet Started Free

New premium skins and icon pack

April 27th, 2020

2 min read

Stylized letter B, half in bold.

Written by

Fredrik Danielsson

Category

World of WYSIWYG

With TinyMCE 5.2, we released a couple of new premium skins and icon packs geared towards forms and webapp use.

  • The outside skin puts the toolbar outside of the visual editor frame, creating an interesting dynamic. 
  • The naked skin does away with all the borders altogether allowing you to decide how to frame the editor. 
  • Finally the new thin icon pack together with the snow skin makes a stunningly beautiful note taking experience.

The outside skin

Below is an example of the new outside skin inside a form. Together with the toolbar location configured on the bottom, it creates an interesting form layout.

TinyMCE configured with the outside skin within a form.

The naked skin

Yes, BYOB – bring your own borders! The naked skin removes the borders around the editor as well as the borders separating the menubar, toolbar and statusbar, giving you ultimate flexibility. It allows you to put your own borders around TinyMCE, and include custom UI controls outside of TinyMCE, making it look like it’s all part of the one, custom editing experience.

TinyMCE configured with the naked skin plus custom borders and controls.

The snow skin

The snow skin was designed to provide a spacious and fresh editing experience, especially with the new thin icon pack. The snow skin, too, does away with the outside border, allowing you to seamlessly incorporate it into your web app. Below is a demo note taking app built using TinyMCE, configured with the snow skin and thin icon pack.

TinyMCE used in a note taking app

The thin icon pack

The new thin icon pack is a light-weight and modern icon pack with a slight playful vibe. The icons are slightly smaller, somewhere between the default and small icon packs in size. Technically, the icons are designed around a 1.25px stroke width to give them a warm and slightly fuzzy feeling on non-retina screens.

A 1.25px stroke width gives a slight fuzzy rounded feeling.

 

The thin icon pack.

What next?

All of these skins are available, plus skins for Material, Bootstrap, and more, in the Tiny Skins and Icon Packs. These are included in all of our paid plans, starting from the Cloud Essentials package.

Start with a 14 day free trial.

For a comprehensive list of all our skins and icon packs, as well as information on how to use and configure them, see our technical documentation.

Also, check out our related blog posts:

Skins and Icons
byFredrik Danielsson

Fredrik is Principal Designer at Tiny, responsible for choosing the exact right shade of gray for borders and icons.

Related Articles

  • World of WYSIWYGNov 29th, 2023

    Best WYSIWYG editor image upload solutions compared: under pressure

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.