需要在Liferay中更改模板样式

时间:2010-01-17 07:32:50

标签: liferay

我想用css改变liferay的外观和感觉。我对liferay很新。任何人都可以给我任何改变的想法。提前致谢

5 个答案:

答案 0 :(得分:3)

一步一步似乎很复杂,但并不是那么糟糕......

1a)下载并解压插件sdk以获取您要使用的liferay版本。所有下载都在sf页http://lportal.sourceforge.net/

1b)确保您拥有最新版本的ant和与您的liferay版本(1.5.x或1.6.x)匹配的JDK版本

2)套件中有几个主要文件夹。切换到“themes”文件夹并以此格式运行创建脚本(在linux或mac上,您需要使.sh文件可执行)

c:\ liferay \ plugins \ themes>创建我的名字“我的主题描述” linux / mac $> ./ create.sh my-name“我的主题描述”

这将在名为my-name-theme的文件夹中创建一个骨架主题,并在其中创建一个名为_diff的文件夹。

在_diff FOLDER中进行任何您想要的修改。 (除了对WEB-INF中属性文件的更改)

一旦你做了更改,就在my-name-theme文件夹中运行“ant compile”,sdk将按照它的步调运行并将.war文件吐出到sdk根目录中的“dist”文件夹。您可以使用插件安装程序

将其上传到站点

或者......如果您将sdk配置为知道开发服务器的位置,则可以从主题文件夹中运行“ant deploy”,并让liferay中的autodeploy magic完成工作。

安装主题后,只需使用“管理页面”工具中的“外观”标签进行分配即可。

提示:对custom.css文件进行大部分更改....让事情易于升级。

提示:如果您为每次更改执行此操作,CSS的开发速度非常慢....因此,如果您正在运行开发服务器,请在指向_diffs / css的head标记结尾之前添加样式标记夹。 HREF = “文件:///...../_diffs/custom.css”。这样,无论你做什么编辑都将被编译到战争的下一版本中,并将覆盖当前安装的版本而无需重新上载。确保在将链接放在实时服务器上之前删除该链接。

liferay.com文档非常好,并且有一个“themer的指南”我现在找不到让我开始的链接。

答案 1 :(得分:1)

我们已经为各个公司做了很多LifeRay自定义,但是你的问题太过模糊,我们无法回答。如果您只想更改一些颜色和字体,那么编辑CSS很好,但是如果您想要彻底更改布局,那么您需要深入研究模板文件并开始使用XHTML。

提供更多细节,我们可能会朝着正确的方向刺激你:D

答案 2 :(得分:1)

对于liferay的IMO主题开发起初可能会非常缓慢。我发现两种不同的方法非常有用。它对我有用,也可能适合你。

  1. 如果您编辑_diff文件夹AFAIK中的文件,则必须部署每个文件 时间二看到变化,这可能是非常令人沮丧的 前端开发人员。 approch可以直接编辑css文件 在tomcat / themename文件夹中。每隔几个小时复制一次更改 在_diff文件夹和部署中左右。在我的情况下,CSS留在 C:\的liferay门户-6.1.0 \ Tomcat的7.0.23 \ web应用\\ CSS \
  2. 此外,如果您知道liferay现在支持 Sass 。所以你写Sass“部署”可能是你最有可能的选择。但我也找到了加快这一过程的方法。安装ruby(如果您在Windows中,在Mac中预先安装)>安装Compass>并创建一个空白罗盘项目。启动“罗盘手表”。在IDE中打开scss文件和已编译的css文件。 “compass watch”将轮询scss文件中的更改并将编译后的输出放入css文件中。您可以在主题文件夹中的css文件中直接复制css输出,也可以直接在chrome / safari中的firebug或web-inspector中复制。
  3. 我发现这些是比每次部署或在firebug / web-inspector上完全开发更快的开发练习。

    此外,如果有人知道更好的方法,特别是只有CSS / JS部署(或者如果没有写Scss那么简单的副本),请告诉我们。

答案 3 :(得分:0)

您可以使用liferay插件sdk制作自定义样式,可在此处找到:http://www.liferay.com/downloads/liferay-portal/additional-files

包含一个主题文件夹,您可以在其中创建新主题。 Liferay在这里生成一个基本主题作为样板,然后您可以自定义并部署到您的liferay安装。

答案 4 :(得分:0)

你可以

mvn archetype:generate

然后选择“liferay-theme-archetype(提供创建Liferay主题的原型。)”etvoilà您准备好自定义主题。

最佳做法建议您仅使用custom.css文件制作所有自定义主题,并且除非绝对必要,否则不要覆盖任何模板。这将使未来的升级变得更加容易,因为您不必手动修改模板以添加对新Liferay功能的支持。

使用

部署新创建的主题

mvn clean package liferay:deploy