Manipulating the Style menu in WYGWAM?

Question

This thing drives me nuts. There is no reason this thing should be so small. I'd love to:

1. Make it larger, both vertically and horizontally; and
2. Style the text inside. I don't necessarily want it to adopt the style of the element it creates, either.

Are these options I have any control over?

Answer 1

Go to Add-ons -> Fieldtypes and select Wygwam.

Edit the relevant Editor configuration.

Enter a CSS file you want to use in the "CSS File" field I use a template so enter: /css-javascript/css-wygwam (template group/template name format), but you can use any frontend URL. This controls the styling inside the Wygwam Text field.

Next add an advanced setting called stylesSet and enter the style reference and url to your JS file:

mystyles:/themes/site_themes/mysite/js/js-wygwam.js

You used to be able to reference a template in this URL, but I think that stopped working with a newer version (could be wrong!). Note the style reference "mystyles".

Here's an example JS file:

CKEDITOR.addStylesSet('mystyles',[
    {name:'Content text', element:'p'},
    {name:'Leadin text', element:'p', attributes: { 'class': 'leadin' }},
    {name:'Head2', element:'h2'},
    {name:'Head2+border', element:'h2', attributes: { 'class': 'line' }},
    {name:'Head3', element:'h3'},
    {name:'Read More', element:'a', attributes: { 'class': 'showtext' }},
    {name:'More Text', element:'div', attributes: { 'class': 'moretext' }}
]);

Note the same style reference "mystyles". This builds the dropdown menu in Wygwam.

Your styles will be reflected in the menu as well as the text area.

Your CSS file is loaded in the head of the CKEditor iframe, so you can manipulate the dropdown separately:

.cke_panel_list li a

But it's difficult to target each individual style as they're referenced as #cke_xxx, although once you've built the dropdown and the styles you want, you can specify these unique references in the CSS file.