Hello,

I'm trying to get real inheritance among different themes.

I believe, from what I have read, that the current situation is that a newly deplyed theme takes from _styled and _unstyled,
then we can edit its files in _diffs folder. I tested that by changing _styled and it works OK. This is partial success.
I have some additional questions about that:

Q1. I know inheritance is set in build.xml. Right now I have _styled in my new theme. Can I put some other theme's name here?
And then what... do I have to prepare the files in tomcat-version\webapps\ROOT\html\themes\folder_name_of_my_new_parent_theme?
I tried that but it doesn't seem to work - I restarted the server, redeployed, etc.

What I want to achieve is:

1. I create a supreme theme, sort of "new styled, unstyled and classic" - you know, top level.
2. I create a new theme with a theme deployed in Eclipse... and change it's build.xml to the theme in point 1.
3. Now my new theme (the child) takes everything from my supreme theme plus I can change things in _diffs.

Is it possible? What are the rules for creating this supreme theme? Where do I put it? In the directory I stated above?
I'm using Eclipse + SDK, Liferay 6.1.

One more:
Q2. Is it possible to override the default new theme source from _styled and _unstyled into custom "supreme" theme?
Supreme = styled, unstyled, classic. E.g. in the end I'd like the source to be "blahblah" stored in the same place as styled and unstyled.

I'll be thankful for any tips.

Thanks,

Milo

Great! Let's start here - there is no theme inheritance in Liferay!

Well, not like what we java developers consider inheritance. Basically for themes you can define the theme's 'parent'. All that does, during build time, is copy that theme's files to the docroot directory, prior to overwriting using the files in the _diffs directory.



Outside it not being inheritance, yes. You can use 'classic' for example, or another local theme project using a form like "../other-theme".



No, it just must be one of Liferay's three or it must be another theme in the SDK's themes folder, and you reference it using "../parent-theme-name" format.



Unnecessary. style's parent is unstyled, and classic's parent is styled. Just declare your theme's parent to be classic, and you're on your way.



And since step 1 you're just using classic as the parent, you don't need a separate theme project, just start working in the first theme project.



You can do that anyway. All themes use a parent definition and use a _diffs folder, and the ant build scripts will ensure the generated war artifact represents a correct merge of the two.

Finally, no you do not want to replace, move, or alter styled, unstyled, or classic. Liferay depends upon these, and there is absolutely no reason to gut them.

Thank you for your response.

There are some misunderstandings between us - I'm thinking more like "Wordpress child theme", maybe "inheritance" is the wrong word here.

I don't want to touch styled, unstyled, classic - no doubt about that.

So as far as I understand, I should do something like this:
1. In Eclipse (+SDK) create a new theme (I will refer to it as theme01). This theme is made from styled and unstyled.
Now I can edit _diffs, can't touch any other, 'original' folders inside my theme (apart from build and lookandfeel xmls, of course).

2. I create another theme (let's say theme02) but this time I edit build.xml and put theme01 as the parent.
Now the question is:
- I think I understand how my theme01 takes from styled and unstyled and how _diffs works. But how does theme02's folders behave? Do they inherit the 'original' folders from theme01 (so going back - > it's all styled and unstyled from the original themes) and just add changes from _diffs inside theme02? What about _diffs in theme01? Are they ignored?

So it's like a channel, right?

styled + unstyled -------->>> copied to a newly made theme "theme01" -------->>> I make changes to _diffs in theme01 -------->>> I create a new theme "theme02" -------->>> it originally takes from styled+unstyled (because it just does in Liferay) -------->>> I make changes to _diffs in theme02.

So it's like this "root" of the theme is being copied all the way from styled and unstyled? And I just edit the themes by manipulating with _diffs folder?
The question: Does theme02 take changes from _diffs in theme01?

What I mean is the following way the CSS is created:
1. css from theme01 (copied previously from styled and unstyled)
2. diffs from theme01 override the above
3. theme02 takes from theme01... and now what - theme02 takes _diffs from theme01? If so, does it take any other folders? Or are the 'original' folders always the same, nothing inherited?

I wrote the same thing like three times - it's just to give you the idea what I mean.
I'm not sure which parts of the files are important when inheriting.
In the above examples - should I not, at any time, change any folders (css, templates, images) which are not in _diffs?

One additional thing:
So ...any theme can be parent and it doesn't have to be in the same folder as styled, unstyled, classic? It's just a matter of giving proper path in build.xml, right?

One more petty thing:
When I have a custom theme and change it, I create "css" folder. Then I put e.g. layout.css. The question is: Does Liferay totally ignore the original layout.css and takes everything from _diffs/css/layout.css (so e.g. If I forget about something, it isn't styled according to my needs)? Or does it replace the exact definitions?
From what I have read, it takes the whole file then, right?
As for custom.css - it takes the individual declarations of css styles, right?
So for whole files between oryginal files and _diffs - it's the whole files.
For _diffs/css/custom.css versus _diffs/css/other-css-files - it's individual styles.
Right?

I find it hard to get this overall image of what is when and where inherited.
Thanks for your help so far, any additional comment will be wonderful : )

A theme can only have 1 parent. So you would have styled as the parent theme for theme01. Since unstyled is the parent of styled, you'll get the effect of "made from styled and unstyled", although since the parent is styled the unstyled is not really considered.



Actually the parent theme in build.xml would be "../theme01". Just trying to be clear...



The build of a theme is always the same: all of the files from the parent theme, and any overrides/additions from _diffs in their place.

So the build of theme01 is "styled" files, but overrides/additions from the theme01 _diffs folder. The result of this is the theme01 build.

Theme02 then becomes the "theme01" build but overrides/additions from the theme02 _diffs folder.



Not quite.

"styled" theme build is "unstyled" build + styled's _diffs folder.

"classic" theme build is "styled" build + classic's _diffs folder.

theme01 theme build is "styled" build + theme01's _diffs folder.

theme02 theme build is "theme01" build + theme02's _diffs folder.



Sort of, but not necessarily. If you start a "theme03" which has "../theme02" as the parent, then the theme03 build is the "theme02" build + theme03's _diffs folder. This is where things get hairy. If you go to theme01's _diffs folder and make some changes, but do not build theme01 or theme02, when you do the build of theme03 it is only based upon the current theme02 build, not the updated one that would be available if you'd done all of the builds.

That's why the use of the word "inheritance" doesn't really apply, because changes in the base do not have to percolate all of the way to the end of the chain.



You have to. If you put changes directly in the docroot folder, when the ant build script runs it first copies files from the parent theme. Thus your changes are overwritten from the parent. The only way to get your changes to apply is to put them in the _diffs folder.



No, theme02 uses the theme01 build. If you've made changes in theme01's _diffs folder but did not complete a build, they have not been merged in yet and therefore would not percolate into theme02 during the build.



Hopefully I've explained the way that theme02 is built; it ignores anything in theme01's _diffs folder, and only uses the theme01 build.



Correct, because they can be overwritten when the build occurs.



It should never be in the same path, nor should it have the same name as styled, unstyled, or classic.



If you put a blank layout.css in the _diffs/css folder, the build of the theme will have a blank layout.css. Liferay will not look to any other layout.css (hence no inheritance again), so the missing layout stuff will cause Liferay to render improperly.



The css/main.css file is the key. If you have a _diffs/css/main.css that does not have any imports (had all of the necessary style definitions right in that file), you can have all of the custom.css or other-css-files you want and they would never be used (because the parent theme doesn't import other css files, so as a child your files wouldn't be imported either).



Just check out the output of the ant build script. You'll see what is going on during a theme build and what is done.

Thank you very much for clearing things out. I still don't remember some of your additional examples but I think I'll manage.

I forgot about ant building the theme - when does it take place?
When I create a new project in Liferay -> theme it shows in Package Explorer... then I have to drag'n'drop it onto my server in Servers. Is this d'n'd "building"?
Or do I have to execute some command?
Because whenever I create a new theme from the scratch, it takes from styled, right? It's created - OK. But then I make changes in _diffs... and well, how to "build" it so that when I create another theme and want to make the previous one a parent - I need to build this new theme too?
I don't know if I'm missing something here with this "building". I only know deploying : ) Can you just add to this to clear this issue?

I will now do my own practical research to prove everything else : )

I owe you, man!

.............................................................................. EDIT .................................................................


OK, I created theme01 and changed something in custom.css in _diffs/css
then created theme02 and edited build.xml and put theme01 as parent (btw. is it theme01 or theme01-theme?)
then I added custom.css in _diffs/css but in theme02, a slight change
theme01 has got red background color of wrapper plus 960px width
theme02 has got no definition of color for wrapper but 1200px width

theme01 - works OK
theme02 - no changes, just 1200px, no red color of background.

What do I do wrong?

I redeployed, refreshed, I even clicked Liferay > SDK > build-client (there are different "build" commands, which one should I use? - I mean in SDK in Eclipse, of course).

: /

If I would have been you, I would have just gone to custom.css of _diffs folder of theme02 and at wrapper class would have just replaced background:none with background: #ff0000; task completed..
The very easy and simplest way to work with themes is make use of firebug tool of firefox, just inspect the element were you need changes at the browser itself and then finally make updates on the particular path folders..
----------------------------EDIT---------------------------
While coming to the case of inheritence, it will reflect the attributes of parent theme..
In your case, goto build.xml of theme02, you will get the below code and do these changes..

<project name="theme02" basedir="." default="deploy">
<import file="../build-common-theme.xml" />

<property name="theme.parent" value="theme01" />
</project>
It should reflect the attributes of parentTheme(theme01)..

I did that, just manipulating custom.css - no luck.
Should I use whole directory names (theme01-theme) or just the root name, "theme01" in the build.xml?

It just doesn't work, it doesn't "combine" styles... I'm not sure I understand ant build - I don't use ant, I use Eclipse SDK so there is just dragging themes onto my server (deploying) plus refreshing the themes. There is build but there are different types of this command.
I'm nearly there but something just doesn't work.

Try for both and check out.. I think so most probably theme01-theme is the right one..

I doesn't work : ( neither theme01 nor theme01-theme
I just added custom.css in theme01 and then added a bit more for the same css definition in custom.css of theme02
- in theme01 the change works, in theme02 it shows only what's in custom.css - it doesn't inherit anything from theme01 : /

I'm in a bit of a stalemate : /

After building theme02 should it have anything copied from theme01, like css styles not inside _diffs but you know, the "original" ones?
Should they be exactly the same as in theme01? How can I observe any change, anything which will prove themes being linked?

The IDE will invoke that when you make changes, but you should do it when you are ready to deploy the theme.



This is one way to build and deploy locally. Personally I prefer to invoke the ant build script and let it handle the builds, but that's just me.



Styled is the default. You just have to edit build.xml to change the parent theme before you really get started. Yes, you should (either by invoking ant or d-n-d deployment) both themes. I used the more generic term of 'build' since there are a couple of different ways to do it, either ant invocation, d-n-d from the IDE, etc.



For theme02, the parent would be "../theme01" (Note you must use the logical path to the parent theme if not styled, unstyled, or classic).



Again, since the parent theme for theme02 is not right, it's missing a lot of theme stuff it could not pull from theme01...

I promise I do what I have read here...


What do you mean by that? You mean my declaration in build.xml? Well... I put ../theme01 and a lot of other combinations - nothing works. Doesn't inherit.

This is the last thing to get it to work - I do everything as stated here - but it doesn't work.


Edit build.xml...but which build.xml? I manipulate it after creating theme01 and theme02. Then I redeploy, F5, drag and drop - everything many times - no luck.