Custom CSS Files in a 6.2 Hook

[Brian Russell, modificado hace 9 años.]

I'm posting this in case it helps someone else avoid the black hole of a time sink I went through in order to get this to work. It's possible this is common knowledge and I just missed something along the way, or wasn't looking in the right place, but regardless, it took me some time to finally come to this solution.

My goal was to include a globally available custom css file based on the user's role on every page, without having to add to each theme separately. That part was simple by using the hook plugin to modify the /html/common/themes/bottom-ext.jsp file (could use any file really, but I chose that one.) I can post code regarding that if anybody is interested, just let me know.

However, the difficulty came in trying to add custom css files which would be referenced by the jsp file, and my lack of understanding of how sass compilation and the general css structure for the portal works. My plan was to have a css file per role, with each importing scss partials, including the 'compass', 'mixins', a custom 'colors' partial, and the role specific scss partial (could really be any number or type of partials). To do this, at first, I simply made a custom folder (cw) under /html/css, with all of my css & scss files. Well this lead me to errors like being unable to find the compass or mixins files because it was looking in the same custom directory and therefore giving an error in the liferay log like:

2014-06-05 18:19:45,919 WARN  [code_jsp:128] {code="404", msg="/html/css/cw/compass", uri=/html/css/cw/compass}
2014-06-05 18:19:45,922 WARN  [code_jsp:128] {code="404", msg="/html/css/cw/mixins", uri=/html/css/cw/mixins}
2014-06-05 18:19:45,938 WARN  [code_jsp:128] {code="404", msg="/html/css/cw/colors", uri=/html/css/cw/colors}

As well as similar 404 errors in the browser console while using Chrome's DevTools inspection, and "Resource interpreted as Stylesheet but transferred with MIME type text/plain" for the imports of my custom role-specific scss files.

I even got to a point where I cleared up the 404 errors, with the MIME type console errors still occurring, and my custom css actually being recognized. I didn't like those nagging errors in the console though, so I tried more ways to fix it than I care to admit, until I finally broke everything down and realized how Liferay compiles sass, where the partials need to be located, how they are referenced, and everything is finally working fine.

So here is a simplification of the steps for what I did in my hook plugin:

• Overrode the /html/common/themes/bottom-ext.jsp file where I reference my custom css files as needed with code similar to:
  

  <link class="lfr-css-file" href="<%= HtmlUtil.escapeAttribute(PortalUtil.getStaticResourceURL(request, themeDisplay.getPortalURL() + " html css cw default.css") ) %>" rel="stylesheet" type="text/css"/&gt;

• Placed any of my partials in the /html/css/common folder (including some additional mixins in the existing _mixins.scss file). All partials named as _[partial-name].scss (e.g. _default.scss).
• Placed the actual custom css files I reference from the bottom-ext.jsp in a /html/css/cw folder
• Within those css files, I make my imports in the simple style (@import "[partial-name";) like:
  

  @import "compass";
  @import "mixins";
  @import "colors";
  @import "default";

• Added a target in my hook plugin's build.xml file like:
  

  	<target name="build-css">
  		<build-css module.dir="." />
  	</target>

• Added a call to the build-css macro for hook plugins in the build-common.xml sdk file (in the war-macro macrodef):
  

  				<elseif>
  					<antelope:endswith string="${plugin.name}" with="-hook" />
  					<then>
  						<!-- compile any css/sass in the hook -->
  						<build-css module.dir="@{module.dir}" />
  
  						<war-web module.dir="@{module.dir}" />
  					</then>
  				</elseif>

• Run the "all" ant call and deploy the hook plugin. Which will give errors initially when compiling the sass files because the custom partial scss files do not exist yet on my development ROOT webapp in /html/css/common, which it is trying reference.
• Run the 'all' ant call again, the sass will compile correctly since it now can find the imported partials on my dev tomcat server's ROOT webapp in /html/css/common, redeploy, and now I'm all set. No errors in console or logs.

Now I can use scss files for my custom css (which are easier to work with in an IDE), and I can reference them from my hook jsps. There are some optional steps in there, that probably could be done a better way, but that's the jist of it. The important lesson is that if you're going to want to import partials, without having to use the traditional css method of "@import url(path/to/css);" then put the scss partials in the /html/css/common folder, just like the _mixins.scss file. Then you can reference any of those partials in your custom css files.

I hope this helps someone else out there to avoid the extra work I went through until I completely understood what was going on, since I found very little about it out there!
Our Platform Setup
Liferay 6.2 CE GA2 (20140319114139101)
Tomcat 7.0.42
MySQL 5.5.33
Java 1.8.0_05-b13

[Daniel Tyger, modificado hace 9 años.]

I am really grateful for this post, Brian. No glitches so far with java 1.8?

[Brian Russell, modificado hace 9 años.]

Great to hear! No problems so far with 1.8!

[Prakash Khanchandani, modificado hace 9 años.]

Added a call to the build-css macro for hook plugins in the build-common.xml sdk file (in the war-macro macrodef):

Were exactly have you included this block? In which file and at what place in the plugins SDK? Can you give more details like the path to the file and line-no. etc

Thanks

[VolunteerMatters Support, modificado hace 9 años.]

Prakash Khanchandani:

Were exactly have you included this block? In which file and at what place in the plugins SDK? Can you give more details like the path to the file and line-no. etc

That is in the build-common.xml file of the base directory of the 6.2 SDK. It is on line 1737, starting with the <macrodef name="war-macro"> node.

Here is that complete macro definition for me, where it would start at line 1737 (there's a bunch of extra code in there for replacing environment specific variables in the hook template xml & properties file, which you can ignore, but I just left in there out of laziness! But my customizations are surrounded by the BSR /BSR comments):

	<macrodef name="war-macro">
		<attribute name="module.dir" />

		<sequential>
			<set-module-properties module.dir="@{module.dir}" />

			<if>
				<or>
					<antelope:endswith string="${plugin.name}" with="-layouttpl" />
					<antelope:endswith string="${plugin.name}" with="-web" />
				</or>
				<then>
					<war-web module.dir="@{module.dir}" />
				</then>
				<!-- BSR: add in replacements from environment-specific properties files -->
				<elseif>
					<antelope:endswith string="${plugin.name}" with="-hook" />
					<then>
						<copy overwrite="true" file="@{module.dir}/docroot/WEB-INF/liferay-hook-template.xml" tofile="@{module.dir}/docroot/WEB-INF/liferay-hook.xml">
			        <filterset id="hook.xml.filters" description="Replace tokens in hook plugin descriptor with deployment-specific values.">
			          <filter token="DEFAULT_CAS_APP_URL" value="${default.cas.app.url}" />
			          <filter token="DEFAULT_LIFERAY_SERVER_NAME" value="${default.liferay.server.name}" />

				        <filter token="WELLPOINT_SAML_CERTIFICATE_DIRECTORY" value="${wellpoint.saml.certificate.directory}" />
				        <filter token="WELLPOINT_SAML_CERTIFICATE_FILE_NAME" value="${wellpoint.saml.certificate.file.name}" />
				        <filter token="WELLPOINT_SAML_REQUEST_URL_FILTER" value="${wellpoint.saml.request.url.filter}" />
				        <filter token="WELLPOINT_SAML_LOGIN_REDIRECT_URL" value="${wellpoint.saml.login.redirect.url}" />
				        <filter token="WELLPOINT_SAML_CUSTOMER_CODE" value="${wellpoint.saml.customer.code}" />
				        <filter token="WELLPOINT_SAML_SIGNATURE_LEVEL" value="${wellpoint.saml.signature.level}" />
				        <filter token="WELLPOINT_SAML_EXTERNAL_ID_ATTRIBUTE" value="${wellpoint.saml.external.id.attribute}" />

			        </filterset>
		        </copy>
						<copy overwrite="true" file="@{module.dir}/docroot/WEB-INF/src/portal.properties" tofile="@{module.dir}/docroot/WEB-INF/classes/portal.properties">
			        <filterset id="portal.properties.filters" description="Replace tokens in portal.properties with deployment-specific values.">
		 	         <filter token="DEFAULT_LIFERAY_SERVER_NAME" value="${default.liferay.server.name}" />
				       <filter token="VM_APP_BASE_URL" value="${vm.app.base.url}" />
			         <filter token="VM_APP_CONTEXT" value="${vm.app.context}" />
		 	         <filter token="DOCKBAR_HELP_URL" value="${dockbar.help.url}" />
			         <filter token="SHOPPING_PAYPAL_URL" value="${shopping.paypal.url}" />
			         <filter token="DEFAULT_SAML_LOGOUT_REDIRECT_URL" value="${default.saml.logout.redirect.url}" />

				        <filter token="THEME_CSS_FAST_LOAD" value="${theme.css.fast.load}" />
				        <filter token="THEME_IMAGES_FAST_LOAD" value="${theme.images.fast.load}" />
				        <filter token="JAVASCRIPT_FAST_LOAD" value="${javascript.fast.load}" />
				        <filter token="LAYOUT_TEMPLATE_CACHE_ENABLED" value="${layout.template.cache.enabled}" />

				        <filter token="FILTER_CACHE_ACTIVE" value="${filter.cache.active}" />
				        <filter token="FILTER_ETAG_ACTIVE" value="${filter.etag.active}" />
			        </filterset>
		        </copy>

						<!-- compile any css/sass in the hook -->
						<build-css module.dir="@{module.dir}" />

						<war-web module.dir="@{module.dir}" />
					</then>
				</elseif>
				<!-- /BSR -->
				<elseif>
					<antelope:endswith string="${plugin.name}" with="-portlet" />
					<then>
						<call-macrodef-or-target macrodef.name="compile" module.dir="@{module.dir}" />

						<build-css module.dir="@{module.dir}" />

						<war-web module.dir="@{module.dir}" />
					</then>
				</elseif>
				<elseif>
					<antelope:endswith string="${plugin.name}" with="-theme" />
					<then>
						<call-macrodef-or-target macrodef.name="compile" module.dir="@{module.dir}" />

						<build-css module.dir="@{module.dir}" />

						<if>
							<not>
								<available file="@{module.dir}/docroot/images/screenshot.png" />
							</not>
							<then>
								<echo>screenshot.png does not exist.</echo>
							</then>
						</if>

						<if>
							<not>
								<available file="@{module.dir}/docroot/images/thumbnail.png" />
							</not>
							<then>
								<echo>thumbnail.png does not exist.</echo>
							</then>
						</if>

						<mkdir dir="${sdk.dir}/dist/${deploy}" />

						<delete file="${plugin.file}" />

						<zip basedir="@{module.dir}/docroot" destfile="${plugin.file}" excludes="_diffs.*,_diffs/**,${plugins.war.excludes}" />
					</then>
				</elseif>
				<else>
					<call-macrodef-or-target macrodef.name="jar" module.dir="@{module.dir}" />
				</else>
			</if>
		</sequential>
	</macrodef>

I hope that helps!

[VolunteerMatters Support, modificado hace 9 años.]

Oh and I forgot to mention, and wanted to point out since it isn't in the BSR /BSR block, make sure you remove the hook from the <or> section:

	<macrodef name="war-macro">
		<attribute name="module.dir" />

		<sequential>
			<set-module-properties module.dir="@{module.dir}" />

			<if>
				<or>
					<antelope:endswith string="${plugin.name}" with="-hook" />
					<antelope:endswith string="${plugin.name}" with="-layouttpl" />
					<antelope:endswith string="${plugin.name}" with="-web" />
				</or>
</if></sequential></macrodef>

So it's the <antelope:endswith string="${plugin.name}" with="-hook" /> line that should be removed from that, so that it will reach the elseif for the "-hook"

[Aarti Dholiya, modificado hace 9 años.]

Thanks for your reply.

Unfortunately we are using EE version & the block of code you have given is not present in the build-common.xml file.

It is present in the 6.2 SDK(CE version).