PitPik/tinyColorPicker

Embedded custom CSS gets overridden by the script-generated CSS

onet4 opened this issue · 1 comments

onet4 commented

It seems embedded CSS inserted in the head tag gets overridden by the script's default style.

<head>
    <style>
        .cp-color-picker {
            border: 1px solid #999;
            padding: 8px;
            box-shadow: 5px 5px 16px rgba(0,0,0,0.4);
            background: #eee;
            overflow: visible;
            border-radius: 3px;
            margin: 5px 0 0;
        }
     ...
    </style>
</head>

Linked CSS is fine on the other hand.

<head>
    <link id="colorPickerMod" rel="stylesheet" type="text/css" href="mod.css">
</head>

To fix it, a workaround I found is to insert the following code to the buildCallback callback.

     $( '#tinyColorPickerStyles' ).detach().prependTo( $( 'head' ) );

This can be easily fixed in the core by changing the following line,

        $('head').append('<style type="text/css" id="tinyColorPickerStyles">' +

to

        $('head').prepend('<style type="text/css" id="tinyColorPickerStyles">' +
PitPik commented

Hi @onet4 ,
I added a new option where you can decide where to add the css to not overwrite it:
cssPrepend: not set or false is like before, set to true makes the CSS prepend to the .

Cheers and thanks...