liferayCSS讲解之五 themes/相应风格/css/navigation.css讲解

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

/*----------Mainnavigation----------*/

#navigation{

margin:0.5em;

min-height:2.2em;

overflow:show;

padding-right:1em;

width:93%;

}

这个开始是控制主导航的,他定义了很多主导航样式#navigationul,#navigationli,#navigationlia,这些要配和另外一个文件来看,这个文件也在当前的风格文件夹下面/templates/navigation.vm这个打开一看会找到类似于<liclass="child1">,<liclass="$nav_item_class"id="menu",<liclass="$nav_item_class"id="menu">,这些都定好了class的名字,定义的地方就是在这个CSS里面.

接着看这个CSS文件,从

/*----------DockwithoutJavaScript----------*/

.lfr-dock{

position:absolute;

right:10px;

top:10px;

}

开始定义的是右上角管理菜单的样式即:welcomeadmin这个菜单的样式,这个也要配合当前风格文件夹/dock.vm这个文件来看,打开就会看到class名字定义的地方,具体就不讲了.

/*----------DockwithJavaScript----------*/

.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/removepage----------*/

.js#navigation.enter-page{

background:transparenturl(../images/navigation/bg.png)no-repeat0100%;

padding:0.5em2em0.7em1.5em;

}

开始没有好好看过所以不是很清楚,不过从定义的名字来看应该是登陆后主导航最右边会显示一个增加页面的小LINK,应该是这里用到的CSS,不过这个只在两个liferay的风格样式genesis和classic中才会出现的功能.

最后的几段代码在工作中没有动过,所以不知是那里调用的,不过从字面上还是可以找得到的,有兴趣的朋友可以找一下看看.