1

I would like to make some modification to the [‘Format”] dropdown box in WYGWAM but I can not find the file. (Normal, formatted, address, Heading, etc]. I figured out how to make the modifications needed for the [“Styles”] dropdown box from the Wigwam Docs and that works great.

How do I change the [‘Format”] dropdown box or create a custom file like I did with the styles by adding ‘my_styles’

2 Answers 2

1

To simply remove options from the Format dropdown, navigate to the "Editor Configurations":

/system/index.php?S=0&D=cp&C=addons_modules&M=show_module_cp&module=wygwam

Then under the Advanced Settings, add the option called: "format_tags" which will display a checkbox list that you can use to specify which format options you would like to be available in the Format dropdown.

As for styling these selections (like you would with the Styles dropdown), I would suggest you try to use the "Styles" dropdown to do the work; however, you can explore specifying auto-classes on the header tags, etc. by trying to create a "customConfig".

Again, under Advanced Settings, add the option called "customConfig". Then specify your a different custom JS file that has the "format tag" rules in it. Here's the documentation on what you'd probably put in that custom config file.

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_tags http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_h1 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.format_h2 etc...

e.g.

config.format_h1 = { element : 'h1', attributes : { 'class' : 'contentTitle1' } };

(Note that I haven't used the customConfig option before; so I can't confirm any success with this)

0

UPDATE: Based on your comment on my answer it sounds like you are looking for a way to style the content as it appears inside Wygwam when viewed on the edit entry page.

If that's the case go to Add-ons > Modules > Wygwam > Editor Configurations and select the configuration you want to edit.

Look for the CSS File field and enter the path to the CSS file you want to use.

wygwam custom css file


(old answer...not what you were looking for...)

This can be managed in the Control Panel. Go to Add-ons > Modules > Wygwam > Editor Configurations and select the configuration you want to edit.

Under the Advanced Settings area add a new advanced setting for format_tags. You'll see a series of checkboxes that allow you to control what elements appear in the Format dropdown in the toolbar.

wygwam format options

2
  • i saw that, it just adds and removes them. I want to change the h1 or h2 size and color (properties) so the client who is editing the content, can see it in the CKeditor. Thanks
    – seeingis
    Commented Apr 23, 2015 at 18:59
  • I updated my answer.
    – Alex Kendrick
    Commented Apr 23, 2015 at 19:08

Your Answer

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

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