Liferay 中 CSS的作用域

lyn1984

Liferay 中 CSS的作用域

liferay中CSS的调整是一件很麻烦的事,首先我们要知道liferay的CSS在那几个地方可以写,每个地方的CSS是控制那些的,写那些CSS合适.不管在那里写CSS都要注意浏览器兼容问题.

第一个可以写CSS的地方就是模板里面,关于模板的代码和新建设置,我前面的文章讲过,大家可以参照以前的.我们一般不建义大家这样做因为模板本身就是为 了通用的,这样做大大降低了他的通用性,可以把定义成class="xxx",然后把"xxx"定义在外面,这样不同的页面可以定义自已需要的样式.模板 里的CSS作用范围当然就是调用该模板的所有文章.
   
第二个可以写CSS的地方是在页面设置里面,look and feel里面有个CSS,这个里面可以写CSS,这里的CSS作用范围就是本页面,我们一般把整个页面需要遵守的样式就写在这里比如:行高,字大小之类. 这里要注意语法<--代码-->,曾经试过,在这之外多写了一个"CSS"结果样式效果不出来了.
   
第三个可以写CSS的地方就是每一个portlet的"外观与风格",这个是用的最多的,外观与风格,可以设置一些边框,背景色,边距,在最后一个选项" 先进称呼"(中文状态下),点击"新增一个CSS规则为这个portlet"然后会在框内出现portlet 的ID,这个ID是此PORTLET的唯一标识,例如:#p_p_id_56_INSTANCE_TDxN_{},这样就可以在里面写上你需要的CSS样 式,这里的作用范围仅此portlet.
   
第四个可以写CSS的地方是本地WEB文件,webapps\ROOT\html\themes下面有很多的风格,至于如何自定义风格在前面的文章我讲 过,\CSS文件夹下面有十个CSS文件,这些用到最多的是custom.css,layout.css,这里的文件是关系着整个网站的样式的,所以改之 前要三思而后行,当然了首要条件是在页面设置里选择的是对应风格,要不然改的一切都是白搭.

portlet外观与风格CSS

今天讲一下portlet外观与风格里面的CSS编写,每个portlet都可以定义他的CSS,当增加一个portlet时,我们该如何下手,以导航为 例,因为导航是比较复杂的也是比较常用的portlet,增加导航后,保存静态面在本地,因为有很多portlet用到了JQUERY技术,如果直接击右 键根本看不到相应导航的代码,所以下到本地可以看到他的表态代码,可以发现导航用的是ul li 来定义的,这样就可以来定义他的样式,如下代码:

/* CSS Document */



.ie6 .portlet-boundary.portlet-boundary_71_ LI {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px; }
.ie6 .portlet-boundary.portlet-boundary_71_ LI.selected {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px;}

.portlet-boundary.portlet-boundary_71_ LI {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px; }
.portlet-boundary.portlet-boundary_71_
LI.selected {
list-style:none;
background:url(/html/themes/cdc_stock/images/custom/left_3.gif) no-repeat;
padding:3px 0px 8px 15px;}

.portlet-boundary.portlet-boundary_71_LI A:link {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A:hover {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #c90000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A:visited {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A:link {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A:hover {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #c90000; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A:visited {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}


再如日志文章可以看到用的是table 并且第一列ID:col1,第二列ID:col2,并且单行和双行的ID也是不同的,这样就可以定义不同的样式,其实liferay的portlet基本 上都是这样定义的,这也就方便了我们来定义他的CSS,建义大家在开发portlet的时候也能这样来做,方便以后的样式定义.当然了,调试这些样式也是 一个及其痛苦的过程.

themes/相应风格/css/layout.css讲解

在每个风格文件夹下面都有一个CSS文件,里面都会有十个CSS文件,今天讲一个简单点的layout.css,其实看名字也知道这个文件是用来定义本风格的布局的样式的,如何自定义布局在我前面的文章有,这里就不讲了.
/* ---------- Column widths ---------- */

.lfr-column.dragging {
height: 100px;
min-height: 100px;
}
.lfr-column.ten {
width: 10%;
}
这些定义了一些宽度,这些在layout/custom/***.tpl文件里可以看到
<td class="lfr-column fifty" id="column-2" valign="top">
   $processor.processColumn("column-2")
</td>
之类的,就是定义这些宽度的,
/* ----------index  1-3-1 ---------- */
.lfr-column1{
width: 241px;
height:auto;
background-image:url();
background-repeat:repeat-x;
padding:0px 40px 40px 5px;
}这些就是定义1-3-1布局里面的,可以打开1-3-1.tpl找到调用的地方
<td class="lfr-column1" id="column-2" valign="top">
$processor.processColumn("column-2")
</td>
这里定义了他的宽,背景,padding值,当然了你可以根据你的需要加一些更多的东西,高度一定要是自动的,当然如果你能保证你的网页高度全相 同也可以定死.这里说个题外话,如果布局写义的较复杂的话,在页面拖放portlet经常发生拖不过去的情况,很难找到正确的位置,我们可以先把高度定 200,这样就很轻松的把portlet拖放进去了,然后再把height=auto;这是一个小技巧.
   
layout.css这个文件最主要的就是这些,看注解就能发现他还定义了后多的布局的样式.

themes/相应风格/css/forms.css讲解

这个CSS文件是用来控制表单内元素的样式的,这个用的不是很多,里面最常要改的应该就是
input[type="text"], input[type="password"], input[type="file"],input[type="submit"], input[type="button"], input[type="reset"], select, textarea, .textarea{
background: #fff;
border: 1px solid #aaa;
border-left-color: #777;
border-top-color: #777;
font:12px 'Tahoma','Lucida Sans Unicode','Lucida Grande','Lucida',Arial,Verdana,sans-serif;
padding: 0;
width:73px;
}
这个一下子就把经常用到的元素全给定义了,特别是他的宽度,第一次用liferay的时候可能会发现在text ,textarea不管你怎么定义他的宽度都没有变化就是因为他在这里一下子全定义死了,所以只要把text,textarea拿出来重新定义一下就可以了.

themes/相应风格/css/navigation.css讲解

这个CSS是来控制导航的,我不是美工,CSS不是很好,只能找到在那个地方改,而要改成什么样子还是要找CSS强人来写.废话不多说下面讲代码:
/* ---------- Main navigation ---------- */

#navigation {
margin:0.5em;
min-height: 2.2em;
overflow: show;
padding-right: 1em;
width: 93%;
}
这个开始是控制主导航的,他定义了很多主导航样式#navigation ul,#navigation li,#navigation li a,这些要配和另外一个文件来看,这个文件也在当前的风格文件夹下面/templates/navigation.vm这个打开一看会找到类似 于<li class="child1">,<li class="$nav_item_class" id="menu",<li class="$nav_item_class" id="menu">,这些都定好了class的名字,定义的地方就是在这个CSS里面.

接着看这个CSS文件,从
/* ---------- Dock without JavaScript ---------- */

.lfr-dock {
position: absolute;
right: 10px;
top: 10px;
}
开始定义的是右上角管理菜单的样式即:welcome admin这个菜单的样式,这个也要配合当前风格文件夹/dock.vm这个文件来看,打开就会看到class名字定义的地方,具体就不讲了.
/* ---------- Dock with JavaScript ---------- */

.js .lfr-dock.interactive-mode {
float: right;
min-width: 150px;
position: relative;
right: 10px;
top: 10px;
}这个开始也是定义右上角管理菜单的样式的,前面加了一个js我不是很清楚是什么意思,但是后面的lfr-dock.interactive- mode 这个是在dock.vm里面是可以找得到的,从他的注释来看是定义javascript动作时CSS样式的,因为必竟不是搞CSSR ,所以不知道理解的正确不?如果有朋友知道请留言告知一下,不胜感激.
后面从
/* ---------- Add/sort/remove page ---------- */

.js #navigation .enter-page {
background: transparent url(../images/navigation/bg.png) no-repeat 0 100%;
padding: 0.5em 2em 0.7em 1.5em;
}
开始没有好好看过所以不是很清楚,不过从定义的名字来看应该是登陆后主导航最右边会显示一个增加页面的小LINK,应该是这里用到的CSS,不过这个只在两个liferay的风格样式genesis和classic中才会出现的功能.
最后的几段代码在工作中没有动过,所以不知是那里调用的,不过从字面上还是可以找得到的,有兴趣的朋友可以找一下看看.