列印本頁 - 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步

关于字体大小和汇总页面的一些修改
--用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

按照自己的网站需求修改LifeType

summary中部分字体太小的问题
上部导航栏字体大小修改
通过检查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要相应改过来。

LifeType 中文開發論壇

支援 => 安裝與設定 => 主題作者是: copper 於十二月 11, 2005, 11:32:12 上午

LifeType 中文開發論壇

支援 => 安裝與設定 => 主題作者是: copper 於 十二月 11, 2005, 11:32:12 上午

支援 => 安裝與設定 => 主題作者是: copper 於十二月 11, 2005, 11:32:12 上午