需要在Liferay中更改模板样式

需要在Liferay中更改模板样式,liferay,Liferay,我想使用css更改liferay的外观。我对liferay很陌生。有没有人能告诉我做这些改变的想法。提前感谢我们为多家公司进行了大量LifeRay定制,但您的问题太模糊,我们无法回答。如果您只是想更改一些颜色和字体,那么编辑CSS是可以的,但是如果您想完全更改布局,那么您需要深入研究模板文件并开始使用XHTML 提供更多详细信息,我们可能会为您指明正确的方向:D您可以使用liferay插件sdk创建自定义样式,可以在以下位置找到: 其中包含一个主题文件夹,您可以在其中创建新主题。Liferay在

我想使用css更改liferay的外观。我对liferay很陌生。有没有人能告诉我做这些改变的想法。提前感谢

我们为多家公司进行了大量LifeRay定制,但您的问题太模糊,我们无法回答。如果您只是想更改一些颜色和字体,那么编辑CSS是可以的,但是如果您想完全更改布局,那么您需要深入研究模板文件并开始使用XHTML


提供更多详细信息,我们可能会为您指明正确的方向:D

您可以使用liferay插件sdk创建自定义样式,可以在以下位置找到:


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

一步一步似乎很复杂,但并没有那么糟糕

1a)下载并解压缩您想要使用的liferay版本的插件sdk。所有下载都在sf页面上

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 theme的文件夹中创建一个骨架主题,并在其中创建一个名为_diff的文件夹

在_diff文件夹中进行所需的任何修改。(对WEB-INF中属性文件的更改除外)

一旦您做了更改,请从my name主题文件夹中运行“ant compile”,sdk将运行它的速度,并向sdk根目录中的“dist”文件夹输出一个.war文件。您可以使用插件安装程序将其上载到站点

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

安装主题后,只需使用“管理页面”工具中的“外观”选项卡分配主题

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

提示:如果你对每一个变化都这样做,那么CSS的开发速度会非常慢。。。。因此,如果您正在运行dev服务器,请在指向您的_diff/css文件夹的head标记末尾之前添加一个样式标记。href=”file:///...../_diffs/custom.css". 这样,您所做的任何编辑都将编译到war的下一个版本中,并将覆盖当前安装的版本,而无需重新加载。在将链接放到实时服务器上之前,请确保将其删除

liferay.com的文档非常棒,而且有一个“themer's guide”(themer's guide),我现在找不到它的链接,这让我开始学习。

你可以

mvn archetype:generate
然后选择“liferay主题原型(提供创建liferay主题的原型)。”等等,您已经准备好自定义主题了

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

使用部署新创建的主题


mvn清洁包liferay:deploy

IMO主题开发liferay一开始可能非常缓慢。我发现两种不同的方法非常有用。这对我有用,也许对你也有用

  • 如果您在_difffolder AFAIK中编辑文件,则必须部署每个 第二次看到的变化,这可能是相当令人沮丧的 前端开发人员。可以直接编辑css文件 在tomcat/themename文件夹中。每隔两小时复制一次更改的文件 或者在_diff文件夹中进行部署。在我的例子中,CSS保持不变 C:\liferay-portal-6.1.0\tomcat-7.0.23\webapps\\css\
  • 另外,如果您知道liferay现在支持Sass。因此,如果您正在编写Sass,“部署”可能是您最可能的选择。但我也找到了一种加速这一过程的方法。安装(如果您在windows中,请在Mac中预装)>安装>并创建一个空白的compass项目。启动“指南针手表”。在IDE中同时打开scss文件和已编译的css文件。“compass watch”将轮询scss文件中的更改,并将编译后的输出放入css文件中。您可以随时将css输出复制到主题文件夹中的css文件中,或直接复制到chrome/safari中的firebug或web inspector中
  • 我发现,与每次部署或完全在firebug/web inspector上开发相比,这些都是更快的开发实践

    另外,如果有人知道更好的方法,特别是像只部署CSS/JS(或者如果没有编写SCS,就简单复制),请告诉我们