留言板

Absolute Newbee Questions concerning Theme Development

thumbnail
Michael Dolphin,修改在11 年前。

Absolute Newbee Questions concerning Theme Development

Junior Member 帖子: 48 加入日期: 13-1-9 最近的帖子
I'm absolute new to Liferay theme creation, and followed the Liferay documentation on theme development here.

Therefore I also created the deep-blue-theme from the tutorial and deployed it to my portal server. I'm using Liferay IDE for development, and a liferay 6.1.1 GA2 tomcat bundle as server.

What I understood from the documentation is that when I create a new theme I can "inherit" from another theme, and only have to apply the differences I want to have from the theme I'm inheriting from. I did everything as shown in the documentation, meaning I had this entry in my build.xml:

<property name="theme.parent" value="_styled" />


When I deploy this theme (without making any other changes to ist) I would expect that a page, where I apply my theme would be shown as it would have been applied the "_styled" theme. Correct? Anyway, a page to witch I apply my "deep-bue" theme is shown completely unstyled in the portal. OK, I don't know how the "_styled" theme would render my page, so I made another try with the "zoe-healthcare" theme from the app-store.

<property name="theme.parent" value="zoe-healthcare" /> ->did new deploy here

Now the page should look as if I would have been assigned the ZOE Healthcare theme directly, right?

Anyway, the page still is completely unformatted.

This is what I see on the console while deploying my theme:


Jan 31, 2013 4:24:28 PM org.apache.catalina.startup.HostConfig deployDescriptor
INFO: Deploying configuration descriptor /home/michael/liferay-portal-6.1.1-ce-ga2/tomcat-7.0.27/conf/Catalina/localhost/deep-blue-theme.xml
Jan 31, 2013 4:24:28 PM org.apache.catalina.startup.HostConfig deployDescriptor
WARNING: A docBase /home/michael/liferay/tomcat-7.0.27/webapps/deep-blue-theme inside the host appBase has been specified, and will be ignored
Jan 31, 2013 4:24:28 PM org.apache.catalina.startup.SetContextPropertiesRule begin
WARNING: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:deep-blue-theme' did not find a matching property.
16:24:28,227 INFO  [pool-2-thread-2][HotDeployImpl:178] Deploying deep-blue-theme from queue
16:24:28,229 INFO  [pool-2-thread-2][PluginPackageUtil:1033] Reading plugin package for deep-blue-theme
Jan 31, 2013 4:24:28 PM org.apache.catalina.core.ApplicationContext log
INFO: Initializing Spring root WebApplicationContext
16:24:28,408 INFO  [pool-2-thread-2][ThemeHotDeployListener:87] Registering themes for deep-blue-theme
16:24:28,517 INFO  [pool-2-thread-2][ThemeHotDeployListener:100] 1 theme for deep-blue-theme is available for use
16:25:25,423 INFO  [com.liferay.portal.plugin.PluginPackageUtil][PluginPackageUtil:1421] Checking for available updates
16:25:25,431 INFO  [com.liferay.portal.plugin.PluginPackageUtil][PluginPackageUtil:1465] Finished checking for available updates in 7 ms



I don't have any idea what that 'did not find a matching property' means, and what goes wrong, so that my page is still shown completely unstyled.

Any help would be gratly appreciated
thumbnail
David H Nebinger,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Liferay Legend 帖子: 14914 加入日期: 06-9-2 最近的帖子
Michael Dolphin:
<property name="theme.parent" value="_styled" />


The _styled theme name is actually an unstyled theme. It just knows about all of the different classes used by the portal, but does not actually apply any styling directly.

<property name="theme.parent" value="zoe-healthcare" /> ->did new deploy here


In changing the parent, you should have first done an "ant clean" to discard any artifacts that might have been pulled in from _styled.

For the theme compile to work, the parent theme must exist as a project in the sdk/themes folder, it cannot just be a theme you have deployed in the bundle.
thumbnail
Michael Dolphin,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Junior Member 帖子: 48 加入日期: 13-1-9 最近的帖子
David H Nebinger:
Michael Dolphin:
For the theme compile to work, the parent theme must exist as a project in the sdk/themes folder, it cannot just be a theme you have deployed in the bundle.


Thank you David, that was surely a missing Link. But I'm still not at the finishline. To have a little bit more control of what happens when I build and deploy my Theme, this time I used the command line instead of the Liferay IDE:

- in the /SDK/themes/ Folder I did a "./create.sh zoe-healthcare "ZOE Healthcare"
- copied everything from the original ZOE Healthcare Theme to /SDK/themes/zoe-healthcare/docroot
- did an "ant clean" in /SDK/themes/deep-blue-theme
- tried an "ant deploy" in /SDK/themes/deep-blue-theme

EDIT:

I changed the build.xml of my deep-blue-theme to:

<property name="theme.parent" value="../zoe-healthcare-theme" />

Now the theme gets compiled and deployed without any Errors or warnings. In Liferay the Thumbnail of my deep-blue-theme shows the Tumbnail from the zoe-healthcare theme. So far so good. But when I assign this theme to a Site the Site is still completely unthemed.
thumbnail
lutz Bremen,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Expert 帖子: 291 加入日期: 11-10-20 最近的帖子
I don't know what u are exactly trying to understand, but if u want to create a theme, you don't need to change the theme parent that theme. I give you a short intro of how i created new themes. I realized this with liferay IDE for Eclipse, because i thnink it's the easiesed way.

- Install Liferay IDE for Eclipse
- Get Plugins SDK
- run a Server
- create new Theme from the IDE Buttons in Eclipse (attention to right SDK ans pathes)
- change in build.xml the theme parent path to "classic"
- create folder "css" in the diffs Folder of the new theme.
- write changes to this diffs/css/custom.css
- deploy Theme
- in portal add the theme to the site via look-and-feel options
- reload page and be happy.

hope this helps a little bit.
Bradley Wood,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

thumbnail
Michael Dolphin,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Junior Member 帖子: 48 加入日期: 13-1-9 最近的帖子
Bradley Wood:
I don't recommend building a new theme with classic as the parent theme. There is some javascript and color schemes that are included in the classic theme that are not necessary for a new theme. I usually build using a _styled parent theme.


That's exactly what I did at the beginning (see my first post at the top of this thread). But wouldn't you normally use a theme as "parent" witch already looks similar to the one you're trying to build? That's why I tried to start with the "ZOE Health Care Theme", just to see if my assumptions are right, that if I create a new theme, just change the parent tag in build.xml, and deploy the new theme to the server, a page where I assign this theme should look as if the original parent-theme would have been applied.

Unfortunately the documentation doesn't mention, that the theme you are using as a parent theme, must be available in "source code form" (.i.e there must be a valid build.xml in it's project folder) inside the Liferay SDK's "themes" folder. After I fetched the "ZOE Healthcare Theme" from the Liferay GIT Reposiztory, and copied it to the SDK's themes Folder, everything worked as expected, after I rebuilt my theme
thumbnail
David H Nebinger,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Liferay Legend 帖子: 14914 加入日期: 06-9-2 最近的帖子
Michael Dolphin:
Bradley Wood:
I don't recommend building a new theme with classic as the parent theme. There is some javascript and color schemes that are included in the classic theme that are not necessary for a new theme. I usually build using a _styled parent theme.


That's exactly what I did at the beginning (see my first post at the top of this thread). But wouldn't you normally use a theme as "parent" witch already looks similar to the one you're trying to build?


Personally I start all of my themes from classic. Styled is, well, not styled. It's way too much work to start from that level, unless of course you're talking about building the next Sesame Street theme.

But for most corp themes, starting from classic is a better foundation than starting from styled.
thumbnail
Jonathan Neal,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Junior Member 帖子: 66 加入日期: 07-8-29 最近的帖子
I'm going to focus on 4 parts of a theme; the HTML, the CSS, the JavaScript, and the images (which are usually the icons and glyphs you'll encounter in portlets).

The _unstyled theme is the base of all themes in Liferay. It includes the basic HTML and images found in any theme, while the Javascript and CSS files are empty placeholders. If you look at them, they're effectively useless.

The _styled theme inherits from the _unstyled theme. However, it also overwrites those meaningless JavaScript and CSS files with populated ones. The CSS in _styled styles only layouts and portlets, which is why the theme seems so bare.

The classic theme inherits from _styled, which itself also inherits from _unstyled. However, it also includes a custom.css file with styles that give the navigation and portlets a specific look and feel. classic, like most themes, does all of this in css/custom.css.

If you create a new theme that inherits from (aka has the parent of) classic (or blue-theme or what have you) but it has its own custom.css, you are effectively creating a theme from _styled. This is because your custom.css files are not merged, but instead, your new custom.css overwrites the one found in the parent theme.

I'd be happy to explain why it all works this way if you want, but it's not logical story. Rather, it's a story of product evolution and legacy. I hope this helps.
thumbnail
David H Nebinger,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Liferay Legend 帖子: 14914 加入日期: 06-9-2 最近的帖子
Jonathan Neal:
The _styled theme inherits from the _unstyled theme. However, it also overwrites those meaningless JavaScript and CSS files with populated ones. The CSS in _styled styles only layouts and portlets, which is why the theme seems so bare.

The classic theme inherits from _styled, which itself also inherits from _unstyled. However, it also includes a custom.css file with styles that give the navigation and portlets a specific look and feel. classic, like most themes, does all of this in css/custom.css.


And that's my whole point. Most themes, especially from a corporate standpoint, are easier to do by tweaking the CSS of the classic theme than having to roll your own from the 'styled' theme (which really isn't styled, as you pointed out).

For example, it's easier to buy an existing house and knock down a wall to get what you want, rather than building a house from scratch. It's easier to customize an existing car to give it the look you want than it is to build one from a basic frame. There are many other real life examples that prove this metaphore out...

Where using classic as a parent doesn't work is when the theme diverges so much from classic. Sesame street, for example, is so different than classic it would have sucked trying to use classic as the parent theme. Styled is probably the best choice for something like that.
Bradley Wood,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

thumbnail
David H Nebinger,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Liferay Legend 帖子: 14914 加入日期: 06-9-2 最近的帖子
Clean and simple, but you have to do all of the theming yourself.

Classic may not be perfect, but it gives you a decent header, footer, and handling for the layouts, plus the navigation menu. For corporate themes, especially for an intranet, this is the minimum starting point. From there it's mostly a matter of affecting color changes, some fonts, etc.

But it is easier to start from classic and undo a little bit than it is to start from "styled" and generate it all yourself.
thumbnail
Hitoshi Ozawa,修改在11 年前。

RE: Absolute Newbee Questions concerning Theme Development

Liferay Legend 帖子: 7942 加入日期: 10-3-24 最近的帖子
If you create a new theme that inherits from (aka has the parent of) classic (or blue-theme or what have you) but it has its own custom.css


It think this is the main point. You're mostly dealing with actual customer site that each has a particular look and feel, while it looks like David is more on building low cost web sites that does not have look and feel that differs too much from the default liferay classic. That is, it's not really having a very different custom.css from classic.
thumbnail
Peter Dimitri,修改在10 年前。

RE: Absolute Newbee Questions concerning Theme Development

Junior Member 帖子: 48 加入日期: 13-1-9 最近的帖子
I left the theme topic alone for a while, and I'm just taking another approach now. But I still have no luck with these themes :-(

I created a brand new theme with the SDK, and made it inherit from the "welcome-theme". So far so good. When I deploy my theme it look exactly like the original welcome-theme. Now I create the _diffs folder in my theme, and add an css folder to it. There I create a custom.css and simply added a background image to the #banner class.

When I now redeploy my theme, the background image shows up in the header of the page, but all other style information have been lost. I get a completely unstyled site, just with my banner-image. I tried it over and over, removed my custom.css and redeployed, just to see if the theme looks again like the welcome-theme, but once I do a single change to the theme, all style information from the parent theme gets lost and won't be recovered, even if I delete all my custom styling from custom.css. (of course I do an "ant clean", "ant deploy" after each try, and developer mode is active in my portal).

Any Ideas what goes wrong here?
thumbnail
Maarten van Heiningen,修改在10 年前。

RE: Absolute Newbee Questions concerning Theme Development

Regular Member 帖子: 174 加入日期: 09-2-5 最近的帖子
Hi Peter,

There could be a couple of things wrong:
- It looks like the build of your theme does not collect the correct default theme files. Can you validate if the files from the inherited theme are correctly placed in your own new theme? Do you use the Liferay IDE or an other development platform?
- What does the log file show when you deploy the theme?
- Also when you active the theme on the site or page and refresh the page does your log file tell anything?
- Is the theme correctly placed in the webapps folder (assuming you use a tomcat bundle)
- Is the theme version you set in the Liferay-Look-and-feel file corresponding with your actual Liferay server version?

Best,
Maarten
thumbnail
David H Nebinger,修改在10 年前。

RE: Absolute Newbee Questions concerning Theme Development

Liferay Legend 帖子: 14914 加入日期: 06-9-2 最近的帖子
What you're doing is replacing the custom.css file from the welcome theme w/ the custom.css file you've created, thus dropping much of the content from the welcome-theme.

What you really should do is copy the main.css from the welcome-theme to your _diffs/css folder. At the end of the file add an @import url(custom-ext.css); line. Put your background override in there, and deploy the theme.

The thing to remember is that exact filename matches from _diffs represent a replacement of the file from the parent theme, not an addition. The steps I outlined will replace the main.css with your version, but since you start w/ a copy of the original, it will have no adverse affects. Adding the custom-ext.css inclusion allows you to put your CSS changes there w/o discarding the rest of the CSS content from the parent theme.
thumbnail
Peter Dimitri,修改在10 年前。

RE: Absolute Newbee Questions concerning Theme Development

Junior Member 帖子: 48 加入日期: 13-1-9 最近的帖子
Thank you very much for your quick replies. David's last answer was the missing hint. I think the documentation is a bit misleading here:

"For custom styles, create a folder named css inside your _diffs folder and place a single file there called custom.css. This is where you would put all of your new styles and all of your overrides of the styles in the parent theme. custom.css is loaded last, and so styles in this file are able to override any styles in the parent theme."

From that I thought that I would only have to enter the styles in my custom.css which should differ from the ones in the parent theme. But in fact any style which is defined in the parent themes css files, which I leave out in my custom.css will be ignored when the theme is used. Now it's clear that not the individual style definitions, but the whole css-files override each other.


Maarten has asked if I see any problems in the logs when I deploy my theme. Yes there is a problem, but at least I don't notice any effects from that. When I deploy my theme the console shows:

"Group or layout set prototype already exists for company liferay.com"

Do I have to worry about that?