Trick # 558 | Dieser Beitrag beinhaltet 724 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Der TinyMCE-Texteditor des Divi-Themes liefert standardmässig einige mögliche Farben. Jedoch passen die meist nur mehr schlecht als recht zumn Design der Website, was die Farbpalette weitgehend unbrauchbar macht.. Heute fügen wir darum der Farbpalette des Editors weitere Farben hinzu.
Klicken Sie in einem Textmodul auf das unterstrichene «A». So wie nebenan erscheint nun die Standard-Farbauswahl im TinyMCE-Editor des Divi-Themes:
Die Auswahl ist nicht eben berauschend und passt selten.
Zum Ergänzen der Farbpalette benötigen Sie das nachfolgende Script. Es gehört in den <head>-Bereich Ihrer Website. Klicken Sie dazu im Backend auf Divi/Theme-Optionen/Integration und fügen Sie den Code in den <head>-Bereich ein:
<script>
jQuery(document).ready(function() {
var colorArray = {
'Dr. Code Text': '#343434',
'Dr. Code White': '#ffffff',
'Dr. Code Blue': '#293280',
'Dr. Code Green': '#59b14b',
'Dr. Code Light-Green': '#ddefdb'
};jQuery(document).on('click', '.et-fb-modal__module-settings .mce-colorbutton .mce-open', function() {
var colorRowId = 'db_custom_tinymce_colors';// Check if the color row has been added
if (jQuery('#' + colorRowId).length === 0) {
var colorRow = '<tr id="' + colorRowId + '">';jQuery.each(colorArray, function(name, hex) {
colorRow += '<td class="mce-grid-cell">' +
'<div data-mce-color="' + hex + '" role="option" tabindex="-1" style="background-color: ' + hex + '" title="' + name + '"></div>' +
'</td>';
});colorRow += '</tr>';
jQuery('.mce-colorbutton-grid').prepend(colorRow);
}
// Set height:auto to the parent .mce-floatpanel
jQuery('.mce-colorbutton-grid').closest('.mce-floatpanel').css('height', 'auto');
});
});
</script>Die Farbnamen und Farbwerte auf den Zeilen 4 bis 8 können Sie natürlich anpassen und/oder kürzen und/oder um weitere Farben ergänzen.
Nun präsentiert sich der Color-Picker so wie nebenan:
Die neu hinzugefügten Farben erscheinen in der ersten Reihe der Auswahl.
Werbung
Werbung
