jazzband / django-tinymce

TinyMCE integration for Django
http://django-tinymce.readthedocs.org/
MIT License
1.28k stars 317 forks source link

Change to a custom skin #399

Open n4ff4h opened 2 years ago

n4ff4h commented 2 years ago

Been diggin for a while without success. Could'nt find anythn in the docs or did i miss it?

LBWright commented 1 year ago

Same issue here! Haven't been able to customize the skins properly.

some1ataplace commented 1 year ago

Just guessing here but maybe try making your own folder/files inside of these /static/tinymce/skins/ directories or override these directories yourself:

https://github.com/jazzband/django-tinymce/tree/master/tinymce/static/tinymce/skins/ui

https://github.com/jazzband/django-tinymce/tree/master/tinymce/static/tinymce/skins/content

For example, inside TINYMCE_DEFAULT_CONFIG we can currently do this:

'skin': 'oxide-dark',

Once you make your own files/folders, change this to be:

'skin': 'custom-folder-name',

some1ataplace commented 1 year ago

To change Django-tinymce to use a custom skin you created, you can follow these steps:

  1. Create a new skin directory in your static files directory, for example: static/tinymce/skins/my_skin/

  2. Copy the contents of the default skin directory (static/tinymce/skins/lightgray/) into your new skin directory.

  3. Modify the CSS files in your new skin directory to customize the skin's appearance as desired.

  4. In your Django settings file, add the following configuration to your TINYMCE_DEFAULT_CONFIG:

TINYMCE_DEFAULT_CONFIG = {
    # ... other options ...
    'skin': 'my_skin',
    'skin_url': '/static/tinymce/skins/my_skin/',
    # ... other options ...
}

In this example, we're setting the skin option to 'my_skin', which is the name of the directory containing our custom skin. We're also setting the skin_url option to the URL where our custom skin directory is located.

Note that if you're using a custom configuration object instead of the default one, you'll need to add these options to your own configuration object instead.