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-FAMIL
Y:
Arial,
Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A:hover {
FONT-WEIGHT:
normal;
FONT-SIZE:
12px;
COLOR:
#c90000;
FONT-FAMIL
Y:
Arial,
Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A {
FONT-WEIGHT:
normal;
FONT-SIZE:
12px;
COLOR:
#000000;
FONT-FAMIL
Y:
Arial,
Helvetica, sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI A:visited {
FONT-WEIGHT:
normal;
FONT-SIZE:
12px;
COLOR:
#000000;
FONT-FAMIL
Y:
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-FAMIL
Y: 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-FAMIL
Y: Arial, Helvetica,
sans-serif; TEXT-DECORATION: none
}
.portlet-boundary.portlet-boundary_71_LI.selected A {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #113981; FONT-FAMIL
Y: 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-FAMIL
Y: 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
中才会出现的功能
.
最后的几段代码在工作中没有动过
,
所以不知是那里调用的
,
不过从字面上还是可以找得到的
,
有兴趣的朋友可以找一下看看
.