Loading multiple stylesheets in Wygwam

Question

I am using a UI Kit for styling out the pages on a site. With the UI kit, there are multiple CSS files and js files in order to achieve the results of the rendered objects. Is there a way to incorporate this into the wygwam field so that the editors can view the copy as it will render?

Too many times, they try to modify the copy to look like they think it should rather than trust the styles will render.

I know there is the option:

Enter the URL to a CSS file you want to be applied to your field contents.

but I need more...

* EDIT * Ok, I created a small CSS file that uses @import and load it in the custom CSS setting.

Now, I need to wrap the content in the field in a div so it renders properly during the entry process. Is that even possible?

* EDIT 2 * I have now modified the advanced settings to add a bodyClass of "grid page" which gets me somewhat close. I still really need a way to frame in the field as it is going to be used in the pages though.

Answer 1

I have found (and apparently you have too!) that using one css file that 'imports' multiple is the way to go. I point WYGWAM to my wygwam-style.css file which includes:

@import url("/css/reset.css");
@import url("/css/dynamic-content.css");

Reset.css is just a basic css reset that I use on the front-end of my site, so I figured it'd be best if it was included. And dynamic-content.css is the styles that I coded up for the dynamic content areas.

I noticed that the body of the iframe tag within my WYGWAM field has a class of cke_editable, so I ended up using that class around the content areas on my pages. Thanks for pointing out the bodyClass setting! I'll use that from now on.

I was able to constrain the width of the content in the WYGWAM editor by using this css:

.cke_editable.cke_editable_themed {
    width: 634px;
}

I hope that helps!