歡迎光臨, 訪客. 請先 登入註冊一個帳號.
五月 25, 2017, 07:23:50 下午
19594 文章 在 3864 主題 由 4580 會員
最新註冊會員: aa123aa1
LifeType 中文開發論壇  |  支援  |  安裝與設定  |  关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步 « 上篇主題 下篇主題 »
頁: [1]
作者 主題: 关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步  (閱讀 38269 次)
copper
新手見習
*
文章: 17


檢視個人資料
« 於: 十二月 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要相应改过来。

« 最後編輯時間: 十二月 11, 2005, 03:56:15 下午 由 copper » 已記錄

我们的LifeType应用实例:
http://www.blogyard.net/  博雅空间:博采众长,雅集文字!
FreeBSD+LifeType 1.0.2 beta。
文字空间不限,20M资源空间,上传限制单个文件5M。
欢迎一起共建!
james
LifeType 中文發展團隊
超級會員
*****
文章: 823


哼!!你不說,誰會知道你做過那些修改呢!? (丟滑鼠~~)


檢視個人資料 個人網站
« 回覆文章 #1 於: 十二月 11, 2005, 12:20:55 下午 »

Hi copper:

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

James.
已記錄

記得發問前,先使用搜尋功能找找看有沒相關的解答。
如果找不到,請依照如何在LifeType論壇發問來提問喔。
winman
版主
超級會員
*****
文章: 525


winman


檢視個人資料 個人網站
« 回覆文章 #2 於: 十二月 11, 2005, 12:57:01 下午 »

真是蛮详细的哦,这基本包括了我认为应用中文语言文件后字体大小
需要改的地方,这篇对需要修改字体大小的朋友很有帮助,我比较懒了,
到现在还是用默认的设置,也懒得去改了。  開懷大笑

ps: 能否把标题修改为类似:“关于字体大小和汇总页面的一些修改”,
这样的标题对有需要的朋友应该容易理解,然后我把这篇文置顶咯。  開懷大笑
« 最後編輯時間: 十二月 11, 2005, 01:03:04 下午 由 winman » 已記錄

俗语说:授予鱼,不如授予渔。因此在发问前先搜寻论坛,或许困扰你
的问题,在之前已经有朋友遇到并得到解答了。这样不但提高解决问题
的效率,还能令自己的能力不断加强。加油啊。
zhuzhzh
新手見習
*
文章: 5


檢視個人資料
« 回覆文章 #3 於: 三月 13, 2006, 09:56:56 下午 »

把所有的修改后的文件打成包作为附件附在后面吧
已記錄
bibicall
版主
超級會員
*****
文章: 640


我是豬老大


檢視個人資料 個人網站
« 回覆文章 #4 於: 三月 14, 2006, 12:31:40 上午 »

把所有的修改后的文件打成包作为附件附在后面吧
自己動手樂趣多
已記錄

我的虛擬主機基本資料如下
Operating system: Linux
Apache version: 1.3.37
PHP version: 4.4.4
MySQL version: 4.1.21-standard
AlanZ
新手見習
*
文章: 5


檢視個人資料
« 回覆文章 #5 於: 六月 14, 2006, 07:06:09 下午 »

恩 测试了下 footer中按照LZ的方法加入版权信息之后,在IE下显示完全是居中的,但是在FF中无法正常显示居中
已記錄
markwu
系統管理員
超級會員
*****
文章: 3928


Mark Wu


檢視個人資料 個人網站
« 回覆文章 #6 於: 七月 03, 2006, 02:26:30 下午 »

把 footer 的 <div id="Bottom"> 改成 <div id="Bottom" stylle="text-align: center;"> 試試看。

Mark
已記錄

huaanfen
新手見習
*
文章: 3


檢視個人資料
« 回覆文章 #7 於: 十二月 09, 2006, 04:35:33 下午 »

以前改过一些编 码,N 刚接触这个程序,不错,省了不少事,支持。 吐舌頭
已記錄
erxiao
新手見習
*
文章: 2


檢視個人資料
« 回覆文章 #8 於: 四月 02, 2007, 05:14:49 下午 »

收穫不小哦~!多謝多謝~!
已記錄

wow
新手見習
*
文章: 2


檢視個人資料
« 回覆文章 #9 於: 十一月 16, 2007, 02:05:27 下午 »

感谢楼主的分享!~ 眨眼睛
已記錄

welcome to IGXE, buy wow gold, cheap wow gold
dzhdiv
新手見習
*
文章: 2


檢視個人資料 個人網站
« 回覆文章 #10 於: 二月 29, 2008, 01:45:15 下午 »

原來是這樣呀,謝謝哦
已記錄

wow gold is my best choice
頁: [1]
LifeType 中文開發論壇  |  支援  |  安裝與設定  |  关于字体大小和汇总页面的一些修改-用LifeType做自己的应用网站的第一步 « 上篇主題 下篇主題 »
    前往: