3

I have defined a new set of style to use in the wygwam editor and that works fine. I have called this file "my styles.js" and included it in /themes/third_party/wygwam_assets/ as suggested in the guide located here: http://pixelandtonic.com/wygwam/docs/style-set

One of the styles I have included is called myclass (see below) and it does get applied within the editor. I have also included a style sheet in the same location as described in the guide that defines myclass. The problem I have is that the styling although being applied is not showing within the editor window.

    CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block Styles
    { name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
    { name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
    { name: 'My Class', element: 'div', attributes: { 'class': 'myclass' } },

    // Inline Styles
    { name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },

    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);
1

You still need to point Wygwam to the new styleset. In Addons > Modules > Wygwam, select the configuration you want to use. Then you'll see the 'CSS File' field. This is where you place the full path to your CSS file to be applied to the Wygwam field. Copy that in here and hit 'Update' and you should see your styles applied.

enter image description here

| improve this answer | |
1

Actually you will need to set the StylesSet as Ian said, but the option looks like this:

enter image description here

It doesn't "really" matter where the file is located, you just have to enter the path to it. I prefer using a relative path. Then be sure you have the "Styles" drop down in whichever Configuration file you are using for WYGWAM:

enter image description here

Then just use the styles to add whatever style to text, images, etc...

| improve this answer | |
  • Note: for an unknown reason, I had to use an absolute path to my styles set: example.com/js/wygwam_styles.js - otherwise it didn't work – 4midori Jul 24 '15 at 16:59
  • Shouldn't have to, a relative path like /assets/js/wygwam.js should work. – Mark Busnelli Jr Jul 25 '15 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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