How to customize the marketplace theme [free] from my Liferay IDE

[Thilak Bhaskar, modifié il y a 8 années.]

I have downloaded the free market place theme and would like to modify for my needs.

For ex: The profi-business theme [.lpkg] file contains 3 files with it and when i imported the .war file and deployed after changing few images. the original look and feel is not being displayed.

Thanks in Advance.

[Brendan Johan Lee, modifié il y a 8 années.]

First of all, you generally are much better off getting a hold of the source of the theme, making the changes, and building from scratch unless you are doing very minor changes to the theme.

Also, images are located several different places within a theme. Have a look at the "Anatomy of a theme project" section on this page: https://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/creating-liferay-themes-liferay-portal-6-2-dev-guide-09-en and note the _diffs folder, and the point of it.

Finally, if you go for making minor changes to the theme directly rather than building it from scratch, the "proper" way of doing this is extending the war, rather than manually changing the war. See https://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/creating-plugins-to-extend-plugins-liferay-portal-6-2-dev-guide-03-en

[David H Nebinger, modifié il y a 8 années.]

Actually it is much easier than this...

If you deploy the marketplace theme to the same location your SDK/maven profile points to, you can use that theme as the parent theme for your theme. Follow the regular practice of where to put your overrides (_diffs for SDK, src/main/webapp for maven) and you can build a brand new theme with that marketplace theme as the parent.

The good news about this process is that you don't have to push the marketplace theme to production, you're just using it as a parent in your theme build. Your theme artifact will actually be the complete merged theme (the parent theme plus your overrides) so it is good to go.

[Thilak Bhaskar, modifié il y a 8 années.]

I am using Liferay developer studio to build the new theme and use the market plece theme as a parent theme. Is there any specific steps we need to take to copy the market place source as a parent theme - Where do we select the marketplace theme as a parent theme.

[David H Nebinger, modifié il y a 8 années.]

Ant or maven?

[Johann Daberger, modifié il y a 8 années.]

Hello David,

I am also interested in this process. I have the bizray theme installed from marketplace. I created a new theme project. I changed the build.xml file (as theme.parent I added "../bizray-theme").

I use liferay SDK (eclipse, ant).

But when I deploy (even when I save build.xml) I get:

[Console output redirected to file:/Users/johann/Programmieren/java/.metadata/.plugins/com.liferay.ide.sdk.core/sdk.log]
Buildfile: /Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/themes/bizray-child-theme/build.xml
deploy:

BUILD FAILED
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common.xml:2880: The following error occurred while executing this line:
: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common.xml:1363: The following error occurred while executing this line:
: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common.xml:2617: The following error occurred while executing this line:
: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common.xml:607: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common.xml:1287: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common.xml:1164: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common-ivy.xml:213: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common-ivy.xml:142: The following error occurred while executing this line:
/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common-ivy.xml:153: /Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/themes/bizray-theme/build.xml doesn't exist

Total time: 3 seconds

Not a surprise: the bizray theme is not in liferay-plugins-sdk-6.2/themes directory.

Do you know what I am doing wrong?

Any help appreciated! Big thanks in advance!

[Andrew Jardine, modifié il y a 8 années.]

I would try creating a new theme, and then taking the assets from the deploy bizray-theme (on the app server) and placing them into the newly created local bizray-theme project. Then the path will resolve and a build.xml will exist.

[Johann Daberger, modifié il y a 8 années.]

Hi Andrew, thank you very much for your reply!

But to be honest, I am not sure if I understand you correctly. Did you mean taking all the folders which are in the tomcat/webapps/bizray folder and put them in the _diff folder of my created theme? If so then I would not need to change the theme.parent attribute in the build.xml file, right?

Will try this now and will report the results here...

[Andrew Jardine, modifié il y a 8 années.]

Ji Johan,

Well, I don't know what the parent theme for the bizray theme is, but assuming that perhaps it is _styled, then yeah. Except, rather than put them in the _diffs folder, put it right in the root of the project... where they would go when you build it. You're not actually CHANGING the theme, you just want the assets to be present so that you can reference them from your own. So yeah, from TOMCAT_HOME/webapps/bizray copy the css, js, templates, images folder to you SDK_HOME/themes/bizray-theme folder.

[David H Nebinger, modifié il y a 8 années.]

Andrew Jardine:

Except, rather than put them in the _diffs folder, put it right in the root of the project... where they would go when you build it. You're not actually CHANGING the theme, you just want the assets to be present so that you can reference them from your own. So yeah, from TOMCAT_HOME/webapps/bizray copy the css, js, templates, images folder to you SDK_HOME/themes/bizray-theme folder.

Well, except that when Liferay is building the theme it will overlay with assets from the parent theme. So your overrides need to be in _diffs or they'll be discarded.

[David H Nebinger, modifié il y a 8 années.]

Johann Daberger:

Not a surprise: the bizray theme is not in liferay-plugins-sdk-6.2/themes directory.

It doesn't need to be in the themes directory, but the "../bizray-theme" as the parent is what is causing it to look there.

As long as your SDK properties point to your local bundle and you have deployed the theme successfully in that bundle, you should just be able to set the parent theme to simply "bizray-theme" and not "../bizray-theme".

[Johann Daberger, modifié il y a 8 années.]

Hi David,

thanks for trying to help! And yes: my SDK is pointing to my local liferay bundle. I created other portlets and deployed them, so this should be correct.

What I did with bizray theme was downloading a lpkg file and make a hot deploy. So the theme was working - at least from my understanding!

But I get a similar error when I set the parent theme to "bizray-theme" instead of "../bizray-theme":

/Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/build-common-ivy.xml:153: /Users/johann/Programmieren/java/liferay-plugins-sdk-6.2/themes/bizray-child-theme/bizray-theme/build.xml doesn't exist

So it is still looking in the plugins-sdk themes folder...

[David H Nebinger, modifié il y a 8 années.]

Yeah, looks like it is checking the current directory (child theme dir) for the bizray folder...

Basically the stanza you're getting stuck at comes from themes/build-common-theme.xml:

<isset property="theme.parent" />
<then>
	<ant dir="${theme.parent}" target="compile" inheritAll="false" />

	<copy todir="docroot" overwrite="true" preservelastmodified="true">
		<fileset dir="${theme.parent}/docroot" excludes="**/.sass-cache/**,_diffs/**,WEB-INF/*.properties,WEB-INF/*.xml" />
	</copy>
</then>

When using a custom theme, it treats the parent theme as an actual project and attempts a build on it before copying in assets.

So you would need to create a bizray theme in the themes folder. The key will be to expand the bizray theme that you downloaded into the docroot/_diffs folder. When the build occurs in this project, the _diffs overlays would replace everything from the whatever you set it's parent to and the generated result would be the bizray theme.

Then switch back to your "../bizray-theme" parent and your theme should build fine...

[Andrew Jardine, modifié il y a 8 années.]

Ah I see. Right -- I wasn't thinking about the fact that the _styled parent theme assets would be copied down into the bizray-theme. My bad, you are correct, as usual, David ... _diffs.

Or you could just switch to maven and free yourself from the shackles of strict directory structures!

[David H Nebinger, modifié il y a 8 années.]

Or wait and use Gradle for LR7 development...

[Andrew Jardine, modifié il y a 8 années.]

Careful David... someone might think that you have some inside scoop on when that blessed day would arrive ;)

[David H Nebinger, modifié il y a 8 années.]

Betas have been out for awhile - I recommend everyone use them. The more bug reports that are created now, the more stable the result will be.