Common Errors When Applying CSS in DXP 7.0

This article documents the CSS in Web Content Management and lists steps to resolve the issue or avoid it altogether.

Resolution

Error: CSS in the template is not applied to web content articles

Summary: Users who write their CSS in the Web Content Template will see that the web content will follow default formatting instead of their custom formatting.

Common Causes

1. Older portal versions had a minimalist approach to configure web content structures and templates by providing the velocity and freemarker graphical editors. Not all users always took advantage of the functions available on the Web Content Display portlet.
2. If users had created their data in 6.0 or 6.1, and then upgraded to 6.2, and now DXP 7.0, the upgrade process might have broken.
3. User errors: is there a misspelled word or a missing semicolon or bracket?

Recommended Solution

1. Web Content Display portlet
   1. Click Options → Configuration for the Web Content Display portlet
   2. Go to Look and Feel → Advanced Styling and use the GUI there.
2. Place any HTML pages inside the \webapps\ROOT\HTML folder and CSS inside the \webapps\ROOT\HTML\CSS folder. (Those can be used as custom landing pages.)
3. Developers who are creating a custom theme should place their custom.CSS file in the source \docroot\_diffs\css folder. (Source files are found in the Liferay Plugins SDK.) If using Dev Studio, follow the prompts and guides when creating the CSS.

Prevention Tips

1. It is best practice to separate HTML content and CSS because it is easier to make global changes to the CSS than to every HTML page. Even Web Content templates should be as clean as possible. In fact, Liferay now offers custom CSS changes based on portlet ID and type (e.g. web content display portlets).
2. Follow the checklists for database migration and portal upgrade.
3. Check for misspelled words and missing elements including (but not limited to) missing brackets, semicolons, and dashes.