关于字体大小和汇总页面的一些修改 --用LifeType做自己的应用网站的第一步:
最近,花了一段时间,对LifeType做了一点微小的修改,做了自己的一个应用网站。
因为以前对LifeType不熟悉,所以有些地方摸索得很费劲,下面把自己的体会写一下,有些地方可能走了弯路,希望高手指正!
LifeType的修改记录到目前为至改动过的所有文件
Style\summary.css
Style\admin.css
Style\admin-ff.css
templates\summary\footer.template
templates\summary\index.template
templates\summary\agreement.template
按照自己的网站需求修改LifeTypesummary中部分字体太小的问题上部导航栏字体大小修改通过检查templates\summary\下的文件,发现header.template中说明了相关的div定义:
<div id="menubar">
<div id="menu">
<ul class="menuTop">
<li class="menuOption"><a href="?op=Summary">{$locale->tr("summary")}</a></li>
<li class="menuOption"><a href="?op=RegisterStep0">{$locale->tr("register")}</a></li>
<li class="menuOption"><a href="?op=BlogList">{$locale->tr("blogs")}</a></li>
<li class="menuOption"><a href="?op=UserList">{$locale->tr("users")}</a></li>
</ul>
</div>
</div>
到www/styles中找到summary.css,并找到相关的menu项
#menu li
{
position : relative;
padding : 0;
border-left : 0px solid #B4B4B4;
display : inline;
font-weight : bold;
font-family : verdana, tahoma, sans-serif;
font-size : 1em;
letter-spacing : 0.20em;
text-transform : uppercase;
}
原来的font-size太小,
是0.83em,改为1em就行了。
登录和搜索框中的文字太小在summary.css中找到相关的控制项,属于form中的控制。
/* -------------------------------------------------------------- */
/* Form controls (input, ...) */
/* -------------------------------------------------------------- */
form
{
margin : 0px;
}
fieldset
{
border : 1px solid #DEDEDE;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.95em;
padding-bottom : 0px;
margin : 0px;
}
textarea, input, select
{
background : #FFFFFF;
border : 1px solid #b2b2b2;
color : #000000;
font-family : verdana, tahoma, sans-serif;
font-size : 0.95em;
}
在filedset中,原来的字体太小。该为0.95em即可。
不好的修改方法最初我用这样的修改方法:
Summary.php中,导航条上的字体太小,几乎看不清楚。在\styles\summary.css文件中,把
font : 12px verdana, tahoma, arial, sans-serif;修改为:
font :
14px verdana, tahoma, arial, sans-serif;
但是这样之后,整个版面出现问题,
搜索播客一块沉到底下去了。检查结果是版面因为字体变大而变宽。而原来整个版面的宽带是784,现在改成796就可以了。
#container
{
width : 796px;
text-align : left;
margin-left : auto;
margin-right : auto;
}
尽管这样可以凑合着用,但是自己感觉这个方法很烦琐,容易出现问题。最好不要使用。管理界面中的字体问题管理界面中上部的导航栏的文字大小这个是在admin.css中修改,
和summary.css中的类似。
管理界面中的右侧的导航栏的文字大小太小这个是在admin.css中修改:
/* -------------------------------------------------------------- */
/* Section title and navigation history bar */
/* -------------------------------------------------------------- */
#nav_bar
{
margin-left : auto;
margin-right : auto;
width : 100%;
margin-bottom : 15px;
border-bottom : 1px dotted #DEDEDE;
}
#section_title
{
float : left;
width : 39%;
}
#section_title h2
{
color : #588BCA;
font-weight : bold;
font-family : trebuchet ms, tahoma, sans-serif;
font-size : 1.5em;
letter-spacing : 0.08em;
margin : 0;
padding-left : 4px;
}
#navigation
{
float : right;
width : 60%;
text-align : right;
padding-top : 7px;
font-family : verdana, tahoma, sans-serif;
font-size
0.9em;
letter-spacing : 0.09em;
padding-right : 2px;
}
管理界面中的说明文字太小 .formHelp
{
font-size : 100%;
color : #76797c;
margin : 0 0 0.2em 0;
}
把font-size 90% 改为100%字体就比较好看了。
版权信息把templates\summary\目录中的footer.template中增加相关的版权信息说明
</div>
</div>
<div id="Bottom">
Copyright 2005, <a href="http://www.blogyard.net/">blogyard.net</a>, All rights reserved.<br/>
Powered by <a href="http://www.plogworld.net">pLog/Lifetype</a><br/>
Design by <a href="http://www.bookofstyles.org/">Book of Styles</a><br/>
</div>
</body>
</html>
修改欢迎信息欢迎词的修改是在“templates\summary\index.template”文件中,把:
<div id="maincolumn">
<div id="intro">
<h4>{$locale->tr("summary_welcome")}</h4>
You should place here whatever welcome message you would like your users to see. Or remove
this one completely and rearrange the whole page. Or something :) Take a look at
templates/summary, that is where all template files that make up this page are stored. You are
free to change them in any way you like.
</div>
{include file="summary/recent.template"}
</div>
中间的英文字该成自己喜欢的中文语句,
并且存的时候选择utf8格式(这个在ultraedit中可以选择,其他编辑器中应该也有类似的选项。)
关于CC版权声明如无特别说明,本站内容采用的授权为:
Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
Logo和top_admin.jpg的修改1、Style\summary.css
/* -------------------------------------------------------------- */
/* Common stuff and basic page layout */
/* -------------------------------------------------------------- */
#container
{
width : 786px;
text-align : left;
margin-left : auto;
margin-right : auto;
}
#header
{
height : 130px;
width : 100%;
background : #FFFFFF url("../imgsum/blogyard.jpg") no-repeat right;
padding : 0px;
margin : 0px;
}
这里原来是:
height : 60px;
width : 100%;
background : #FFFFFF url("../imgs/top_admin.jpg") no-repeat right;现在我们把自己的图片放到imgsum目录中,并切替换原来的图片。因为图片的高度和原来的不同,所以高度也要调整一下。
2、 Style\admin.css文件同样修改。
3、 Style\admin-ff.css文件同样修改。这个文件是用于firefox浏览器的也应该修改。
更好的修改方法是:当然这种改法不如不原来的图片top_admin.jpg直接替换掉。当然各个css文件中的height要相应改过来。