Submit Feedback
Legacy Knowledge Base
Published Jul. 2, 2025

Common Errors When Applying CSS in DXP 7.1

Written By

Justin Choi

How To articles are not official guidelines or officially supporteddocumentation. They are community-contributed content and may not alwaysreflect the latest updates to Liferay DXP. We welcome your feedback toimprove How to articles!

While we make every effort to ensure this Knowledge Base is accurate, itmay not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with anyfeedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack"publication program, made available for informational purposes. Articlesin this program were published without a requirement for independentediting or verification and are provided "as is" withoutguarantee.

Before using any information from this article, independently verify itssuitability for your situation and project.

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. Check to see if there is a misspelled word, or a missing semicolon or bracket.

Recommended Solution

  1. Web Content Display portlet

    1. Click Options → Look and Feel Configuration for the Web Content Display portlet

    2. Go to Look and Feel → Advanced Styling and use the GUI there.
      common-errors-css-71-01.png
  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.
Did this article resolve your issue ?
Legacy Knowledge Base
Did this article resolve your issue ?