LifeType 中文開發論壇

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



主題: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: copper十二月 11, 2005, 11:32:12 上午
关于字体大小和汇总页面的一些修改
  --用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要相应改过来。



主題: Re: 如何用LifeType做自己的应用网站
作者: james十二月 11, 2005, 12:20:55 下午
Hi copper:

真是相當詳盡的一篇心得分享 :-D
期待能再次見到你更多的文章:)

James.


主題: Re: 如何用LifeType做自己的应用网站
作者: winman十二月 11, 2005, 12:57:01 下午
真是蛮详细的哦,这基本包括了我认为应用中文语言文件后字体大小
需要改的地方,这篇对需要修改字体大小的朋友很有帮助,我比较懒了,
到现在还是用默认的设置,也懒得去改了。  :-D

ps: 能否把标题修改为类似:“关于字体大小和汇总页面的一些修改”,
这样的标题对有需要的朋友应该容易理解,然后我把这篇文置顶咯。  :-D


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: zhuzhzh三月 13, 2006, 09:56:56 下午
把所有的修改后的文件打成包作为附件附在后面吧


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: bibicall三月 14, 2006, 12:31:40 上午
把所有的修改后的文件打成包作为附件附在后面吧
自己動手樂趣多


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: AlanZ六月 14, 2006, 07:06:09 下午
恩 测试了下 footer中按照LZ的方法加入版权信息之后,在IE下显示完全是居中的,但是在FF中无法正常显示居中


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: markwu七月 03, 2006, 02:26:30 下午
把 footer 的 <div id="Bottom"> 改成 <div id="Bottom" stylle="text-align: center;"> 試試看。

Mark


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: huaanfen十二月 09, 2006, 04:35:33 下午
以前改过一些编 码,N 刚接触这个程序,不错,省了不少事,支持。 :-P


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: erxiao四月 02, 2007, 05:14:49 下午
收穫不小哦~!多謝多謝~!


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: wow十一月 16, 2007, 02:05:27 下午
感谢楼主的分享!~ ;-)


主題: Re: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步
作者: dzhdiv二月 29, 2008, 01:45:15 下午
原來是這樣呀,謝謝哦