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

Create your own TinyMCE Skins using the Skin Tool

Fredrik Danielsson

March 9th, 2021

Written by

Fredrik Danielsson

Category

How-tos & Tutorials

Being one of the world’s most flexible rich text editors means you can tailor the look of TinyMCE to your needs. Skins are what control the appearance of the editor, including colors, margins, fonts, etc. The default skin is called Oxide, however, with TinyMCE you have the option to easily create your own skin using Oxide as a base.

Note: there is a difference between skins and themes, where themes allow you to replace the whole UI with your own. But that is a lot of work and not something we generally recommend anyone doing.  

Today, we’re just going to look at skins and how you can create your own. Let’s get started! 

To save our users time and energy, we developed the TinyMCE 5 Skin Tool, allowing you to intuitively customize the look of TinyMCE 5 for both cloud and self-hosted users.  

Go to the TinyMCE 5 Skin Tool.

Setup

Layout of the TinyMCE 5 Skin Tool 

First thing's first, set up your skin by choosing a name and selecting a background. I recommend selecting the color in which your editor will operate, this way you can work in the most accurate visual environment. 

Init Config 

Next, use the init configuration to customize the behavior and user interface options of TinyMCE. Again, I recommend setting up TinyMCE here as it is (or will be) on your platform. You can customize different options such as block formats, toolbar controls, or hiding the menu bar. Make sure to click the run button once you’ve made your configurations.

By default, the Skin Tool automatically gives the following configuration: 

tinymce.init({
  plugins: [
    "a11ychecker advcode casechange formatpainter",
    "linkchecker autolink lists checklist",
    "media mediaembed pageembed permanentpen",
    "powerpaste table advtable tinymcespellchecker",
  ],
  toolbar:
    "formatselect | fontselect | bold italic strikethrough forecolor backcolor formatpainter | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | link insertfile image | removeformat | code | addcomment | checklist | casechange",
  height: 360,
});

For a comprehensive guide of the user interface options, read through our user interface documentation

Content CSS

Here you can edit the style of all the content within the editable area of TinyMCE. This is where you define the look of headers, tables, links as well as adjusting colors, margins, and paddings. The Skin Tool provides you with sensible defaults but if you are into web publishing you should match these styles to the ones on your site for the best WYSIWYG experience.

Check out our documentation for more information regarding content_css.

Styles

Now, this is where the color fun really begins! Under the styles tab, you have a range of options to configure, which allow you to customize different aspects of the editor’s appearance. The options included, but not limited to you are:

  • Editor Background
  • Toolbar Background Color
  • Border Color
  • Color Black
  • Color White
  • Tint Color
  • Error color
  • Success color
  • Base size
  • Controls border radius
  • Panels border radius
  • Editor border radius
  • Font Stack
  • Normal font weight
  • Bold font weight
  • Toolbar button icon color
  • Hover background color
  • Hover icon color
  • Focus background color
  • Focus icon color
  • Active background color
  • Active icon color

As you adjust these settings you are given a live preview of the changes you make. This is what makes our Skin Tool so intuitive - consider it the WYSIWYG editor of skinning. 

Helpful hint: make sure to keep the ‘px’ after the numerical value whenever you’re changing pixel densities. 

Now, if you’re feeling adventurous you can explore the advanced mode and get access to the 300 or so variables you can use to tweak the look of TinyMCE. However, this will require you to be familiar with CSS and you will also need to know how to browse the source files on GitHub to locate the variables available to you. For the scope of this blog post, we will not be diving into the advanced mode of the Skin Tool.

Load your skin into TinyMCE

So you’ve created the perfect skin and now you’re ready to use it - woo! The first step is to download the skin by clicking the Get Skin button on the top right-hand corner.

Download button

This will provide a .zip file containing the UI and contents, which will be named according to the name of your skin during setup.

Screenshot of files

To use the skin you will need to put the folders (the one under "ui" and the one under "contents") on a server. This is applicable for bother cloud or self-hosted TinyMCE instances. Afterward, you use skin_url to point to the location of the "ui" folder and use content_css to point to the location of the content folder.

And that’s it! Those are the essentials of how to use the TinyMCE 5 Skin Tool. For more in-depth information make sure to check out our documentation on skins

If time is not on your side or you want to match the look of some popular design frameworks like Bootstrap and Material, I highly recommend looking at our premium Skins and Icon pack

Or, if you’re interested in learning more about skinning, we have several other blogs dedicated to TinyMCE Skins:


As always, make sure to contact us or visit us on Stackoverflow if you’re having any trouble. Also, if you’ve made a cool skin that you think we’ll love, make sure to get our attention on Twitter by using @joinTiny!

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

  • How-tos & Tutorials

    New TinyMCE integration: How to get started with Blazor

    by Elise Bentley in How-tos & Tutorials
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© 2021 Tiny Technologies Inc.TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.

Products

  • TinyMCE
  • Tiny Drive
  • Customer Stories
  • Pricing