Theme changes not showing up in liferay

Question

I'm relatively new to CSS and very new to Liferay. I have a custom theme I'm trying to build. Just for testing, I was trying to change the title text color for portlets on the page. In my custom.css, I have

.portlet-title {
   float: none;
   font-weight: bold;
   min-width: 50%;
   padding: 5px;
   text-shadow: 1px 1px #FFF;
   color: #800000;
}

I'm assuming this is the correct class, because adding the color in the firefox inspector under this class changes the color. However, when I deploy the theme, it reverts back to

.portlet-title {
      float: none;
      font-weight: bold;
      min-width: 50%;
      padding: 5px;
      text-shadow: 1px 1px #FFF;
}

if I ftp to the folder for the theme, the changes I made are still in the custom.css. For some reason, when the theme renders in Liferay, it reverts back to the css from before I made the changes. I've tried everything I know to try including clearing the browser cache. Any thoughts?

Pl make sure that u are making the changes in the _diff folder. — Danish
Possible duplicate: stackoverflow.com/questions/26037640/… — Marco Mercuri

Olaf Kock Olaf Kock · Accepted Answer · 2014-09-26T07:31:21

It sounds like you're updating the files on the webserver directly ("ftp the folder for the theme") instead of changing it properly, e.g. in development environment, building a new theme.

Liferay minifies the CSS (and javascript), concatenating all CSS files into one and eliminating the whitespace. There's also SASS processing. All this is cached, so the odds are that Liferay will not detect your changes without redeploying a new theme.

Use the "raw" development version of your theme, make your changes there (in the _diffs folder) and build an updated theme plugin. Deploy that to Liferay, and the changes will be picked up.

Theme changes not showing up in liferay

3 Answers