This article documents the CSS in Web Content Management and lists steps to resolve the issue or avoid it altogether.
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.
- 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.
- 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.
- User errors: is there a misspelled word or a missing semicolon or bracket?
- Web Content Display portlet
- Click Options → Configuration for the Web Content Display portlet
- Go to Look and Feel → Advanced Styling and use the GUI there.
- 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.)
- 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.
- 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).
- Follow the checklists for database migration and portal upgrade.
- Check for misspelled words and missing elements including (but not limited to) missing brackets, semicolons, and dashes.