Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Absolute Newbee Questions concerning Theme Development Peter Dimitri January 31, 2013 8:46 AM
RE: Absolute Newbee Questions concerning Theme Development David H Nebinger January 31, 2013 8:52 AM
RE: Absolute Newbee Questions concerning Theme Development Peter Dimitri February 1, 2013 1:21 AM
RE: Absolute Newbee Questions concerning Theme Development lutz Bremen February 4, 2013 3:54 AM
RE: Absolute Newbee Questions concerning Theme Development Bradley Wood February 4, 2013 9:22 AM
RE: Absolute Newbee Questions concerning Theme Development Peter Dimitri February 5, 2013 8:18 AM
RE: Absolute Newbee Questions concerning Theme Development Bradley Wood February 5, 2013 8:29 AM
RE: Absolute Newbee Questions concerning Theme Development David H Nebinger February 5, 2013 10:35 AM
RE: Absolute Newbee Questions concerning Theme Development Jonathan Neal February 5, 2013 2:28 PM
RE: Absolute Newbee Questions concerning Theme Development David H Nebinger February 5, 2013 3:10 PM
RE: Absolute Newbee Questions concerning Theme Development Bradley Wood February 5, 2013 3:24 PM
RE: Absolute Newbee Questions concerning Theme Development David H Nebinger February 5, 2013 5:30 PM
RE: Absolute Newbee Questions concerning Theme Development Hitoshi Ozawa February 5, 2013 6:39 PM
RE: Absolute Newbee Questions concerning Theme Development Peter Dimitri April 15, 2013 7:13 AM
RE: Absolute Newbee Questions concerning Theme Development Maarten van Heiningen April 15, 2013 7:23 AM
RE: Absolute Newbee Questions concerning Theme Development David H Nebinger April 15, 2013 7:27 AM
RE: Absolute Newbee Questions concerning Theme Development Peter Dimitri April 16, 2013 12:53 AM
RE: Absolute Newbee Questions concerning Theme Development Bradley Wood April 16, 2013 9:05 AM
Peter Dimitri
Absolute Newbee Questions concerning Theme Development
January 31, 2013 8:46 AM
Answer

Peter Dimitri

Rank: Junior Member

Posts: 35

Join Date: January 9, 2013

Recent Posts

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:

 1
 2Jan 31, 2013 4:24:28 PM org.apache.catalina.startup.HostConfig deployDescriptor
 3INFO: Deploying configuration descriptor /home/michael/liferay-portal-6.1.1-ce-ga2/tomcat-7.0.27/conf/Catalina/localhost/deep-blue-theme.xml
 4Jan 31, 2013 4:24:28 PM org.apache.catalina.startup.HostConfig deployDescriptor
 5WARNING: A docBase /home/michael/liferay/tomcat-7.0.27/webapps/deep-blue-theme inside the host appBase has been specified, and will be ignored
 6Jan 31, 2013 4:24:28 PM org.apache.catalina.startup.SetContextPropertiesRule begin
 7WARNING: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:deep-blue-theme' did not find a matching property.
 816:24:28,227 INFO  [pool-2-thread-2][HotDeployImpl:178] Deploying deep-blue-theme from queue
 916:24:28,229 INFO  [pool-2-thread-2][PluginPackageUtil:1033] Reading plugin package for deep-blue-theme
10Jan 31, 2013 4:24:28 PM org.apache.catalina.core.ApplicationContext log
11INFO: Initializing Spring root WebApplicationContext
1216:24:28,408 INFO  [pool-2-thread-2][ThemeHotDeployListener:87] Registering themes for deep-blue-theme
1316:24:28,517 INFO  [pool-2-thread-2][ThemeHotDeployListener:100] 1 theme for deep-blue-theme is available for use
1416:25:25,423 INFO  [com.liferay.portal.plugin.PluginPackageUtil][PluginPackageUtil:1421] Checking for available updates
1516: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
David H Nebinger
RE: Absolute Newbee Questions concerning Theme Development
January 31, 2013 8:52 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6424

Join Date: September 1, 2006

Recent Posts

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.
Peter Dimitri
RE: Absolute Newbee Questions concerning Theme Development
February 1, 2013 1:21 AM
Answer

Peter Dimitri

Rank: Junior Member

Posts: 35

Join Date: January 9, 2013

Recent Posts

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.
lutz Bremen
RE: Absolute Newbee Questions concerning Theme Development
February 4, 2013 3:54 AM
Answer

lutz Bremen

Rank: Expert

Posts: 296

Join Date: October 20, 2011

Recent Posts

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.
Anonymous
RE: Absolute Newbee Questions concerning Theme Development
February 4, 2013 9:22 AM
Answer

Anonymous

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.
Peter Dimitri
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 8:18 AM
Answer

Peter Dimitri

Rank: Junior Member

Posts: 35

Join Date: January 9, 2013

Recent Posts

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
Anonymous
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 8:29 AM
Answer

Anonymous

Actually if you have the zoe theme deployed in your plugins sdk you can add as the parent theme = "../zoe-healthcare-theme"

here is a blog post that explains it better.

http://www.liferay.com/web/olaf.kock/blog/-/blogs/theme-development%3A-choosing-your-parent
David H Nebinger
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 10:35 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6424

Join Date: September 1, 2006

Recent Posts

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.
Jonathan Neal
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 2:28 PM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

Recent Posts

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.
David H Nebinger
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 3:10 PM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6424

Join Date: September 1, 2006

Recent Posts

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.
Anonymous
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 3:24 PM
Answer

Anonymous

But why have additional files in your theme that are not being used, and down the road you'd have to reset certain styles by using classic as a parent.

By using _styled the theme is able to be clean and simple
David H Nebinger
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 5:30 PM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6424

Join Date: September 1, 2006

Recent Posts

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.
Hitoshi Ozawa
RE: Absolute Newbee Questions concerning Theme Development
February 5, 2013 6:39 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7990

Join Date: March 23, 2010

Recent Posts

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.
Peter Dimitri
RE: Absolute Newbee Questions concerning Theme Development
April 15, 2013 7:13 AM
Answer

Peter Dimitri

Rank: Junior Member

Posts: 35

Join Date: January 9, 2013

Recent Posts

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?
Maarten van Heiningen
RE: Absolute Newbee Questions concerning Theme Development
April 15, 2013 7:23 AM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 172

Join Date: February 5, 2009

Recent Posts

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
David H Nebinger
RE: Absolute Newbee Questions concerning Theme Development
April 15, 2013 7:27 AM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6424

Join Date: September 1, 2006

Recent Posts

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.
Peter Dimitri
RE: Absolute Newbee Questions concerning Theme Development
April 16, 2013 12:53 AM
Answer

Peter Dimitri

Rank: Junior Member

Posts: 35

Join Date: January 9, 2013

Recent Posts

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?
Anonymous
RE: Absolute Newbee Questions concerning Theme Development
April 16, 2013 9:05 AM
Answer

Anonymous

Those instructions implied that the person is making a new custom theme, not one that has classic or welcome-theme as its parent.