style set wygwam

Question

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' } }
]);

Answer 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.

Answer 2

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

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:

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