0

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?

enter image description here

1 Answer 1

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.

Grab of wygwam customised style dropdown

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.