2

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.

  • You're on the right track. I usually end up creating a CSS file with a subset of the stuff the user needs to see/access from WYGWAM. Sometimes you have to advise the user that elements won't look exactly the same in WYGWAM as in the site. For example, how text wraps. – 4midori Dec 5 '13 at 19:47
2

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!

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.