将新模板softsea的首页MOD进行到底！（4月29日更新，文件包已删除）

jsaren · 发表于 2007-4-12 16:05:42

刚刚发布的版本中包含了名为softsea的风格，令人眼前一亮。
为了更好发挥该模板的优势，对该模板的首页文件作必要的修改是必要的

1、将上方幻灯和头条的调用改成了资讯类型、最新资讯头条。
2、增加论坛友情链接。
3、解决图片区版面错乱。
4、增加网站调查-------Beta2版本已经完善本项。
以上修改文件的位置：templates\softsea\index.html.php

5、用户个人登录口的改进。
修改文件的位置：templates\softsea\css\style.css
登陆口文件为：分享一个适合softsea风格的登录口文件

6、增强头条区的功能。见41楼
原先的头条区域显得单薄，其实也是给我们留下了更多的mod空间，不是吗

7、首页滑动门效果。见46楼
原创CYNB ：简单修改softsea风格为移门效果。
本人进行了一些修正。
8、将热门tag区域换成广告位（以googleadsense为例）见55楼

9、仿澳洲MSN首页的滑动商品展示见65楼

第9项尚未成熟，暂不集成到文件包，大家可以对照着自己修改。
原来的第10项flash图片轮显，经反复比对，还是删掉了，因为官方提供的并不比flash效果差。

首页模版文件中的googleadsense我没有删掉我的代码，目的是方便您的检测和直接套用，请将其中的个人广告帐号直接替换成你的就可以了。
此外，首页登录口我又做了一些改进，将语言的定义放进语言文件里面了。所以下载包里面包括了语言文件。
尽管你可以直接覆盖，但是我还是要建议您先备份好相关文件。

这里提供的版本有两个，一个是utf-8,一个是gbk，不过由于本人使用的是utf-8已经测试，因此，gbk没有测试。请试用的朋友给些反馈。

[ 本帖最后由 jsaren 于 2007-10-16 19:08 编辑 ]

茄子 · 发表于 2007-4-13 16:04:30

支持jsaren做斑竹的举手

eqmz · 发表于 2007-4-13 16:13:55

路过．．．．．．．．．．．．．．．．．

依蕾莎 · 发表于 2007-4-13 19:35:42

我来支持............

jsaren · 发表于 2007-4-14 17:01:30

1、将上方日志幻灯改成资讯类型。
2、将上方头条的调用改成最新资讯头条。

原代码：

<div class="content topcontent">
<div class="mainarea" style="padding-top: 10px;">
<div id="slideimg">
<script type="text/javascript" language="javascript">
<!--
var xsTextBar = 1; //是否显示文字链接，1为显示，0为不显示
var xsPlayBtn = 0; //是否显示播放按钮，1显示，0为不显示
var xsImgSize = new Array(260,217); //幻灯图片的尺寸，格式为“宽度,高度”
var xsImgs = new Array();
var xsImgLinks = new Array();
var xsImgTexts = new Array();
xsImgs[$i] = "$value[a_thumbpath]";
xsImgLinks[$i] = "";
xsImgTexts[$i] = "$value[subject]";
//-->
</script>
<script language="javascript" type="text/javascript" src="{S_URL}/include/js/slide.js"></script>
</div>
<div id="headline">
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
</div>

复制代码

改成：

<div class="content topcontent">
<div class="mainarea" style="padding-top: 10px;">
<div id="slideimg">
<script type="text/javascript" language="javascript">
<!--
var xsTextBar = 1; //是否显示文字链接，1为显示，0为不显示
var xsPlayBtn = 0; //是否显示播放按钮，1显示，0为不显示
var xsImgSize = new Array(260,217); //幻灯图片的尺寸，格式为“宽度,高度”
var xsImgs = new Array();
var xsImgLinks = new Array();
var xsImgTexts = new Array();
xsImgs[$i] = "$value[a_thumbpath]";
xsImgLinks[$i] = "";
xsImgTexts[$i] = "$value[subject]";
//-->
</script>
<script language="javascript" type="text/javascript" src="{S_URL}/include/js/slide.js"></script>
</div>
<div id="headline">
<strong><a href="$value[url]">$value[subject]</a></strong>
<p>$value[message]</p>
</div>

复制代码

jsaren · 发表于 2007-4-14 17:03:30

3、增加论坛友情链接。
在以下两行之间：

复制代码

其实就是在的底下增加：

<div id="menu"><h1 style="color:#1FA9CE"><a style="float:right; padding-right:10px; color:#1FA9CE" href="{B_URL}/pm.php?action=send&uid=1" title="发站内消息给管理员交换链接">交换链接</a>友情链接</h1></div>
<div class="content topcontent">
<div id="friendlink">
<ul class="imglink">
$imglink
</ul>
<ul>
$txtlink
</ul>
</div>
</div>
</div>

复制代码

[ 本帖最后由 jsaren 于 2007-4-14 17:22 编辑 ]

jsaren · 发表于 2007-4-14 17:05:46

4、修正图片展示区版面错乱。
原代码为：

<div id="image" class="tabblock" style="height: 400px; overflow: hidden;">
<a href="#action/image#" class="more">更多图片</a>
<h3 id="imagetabs">
<a id="newimagetab" href="javascript:setTab('image','newimage');" class="tab curtab">最新图片</a>
<a id="hotimagetab" href="javascript:setTab('image','hotimage');" class="tab">热门图片</a>
</h3>
<div id="newimage" class="tabcontent">
<ul class="thumbmsglist thumb2col">
<li style="padding: 5px; width: 205px; w\idth: 195px;">
<p class="thumb"><a href="$value[url]"><img src="$value[image]" alt="$value[subjectall]" title="$value[subjectall]" /></a></p>
<div style="width: 110px;">
<h6><a href="$value[url]">$value[subject]</a></h6>
<p>$value[message]</p>
</div>
</li>
</ul>
</div>
<div id="hotimage" class="tabcontent" style="display: none;">
<ul class="thumbmsglist thumb2col">
<li style="padding: 5px; width: 205px; w\idth: 195px;">
<p class="thumb"><a href="$value[url]"><img src="$value[image]" alt="$value[subjectall]" title="$value[subjectall]" /></a></p>
<div style="width: 110px;">
<h6><a href="$value[url]">$value[subject]</a></h6>
<p>$value[message]</p>
</div>
</li>
</ul>
</div>
</div>

复制代码

改成：

<div id="image" class="tabblock" style="height: 400px; overflow: hidden;">
<a href="#action/image#" class="more">更多图片</a>
<h3 id="imagetabs">
<a id="newimagetab" href="javascript:setTab('image','newimage');" class="tab curtab">最新图片</a>
<a id="hotimagetab" href="javascript:setTab('image','hotimage');" class="tab">热门图片</a>
</h3>
<div id="newimage" class="tabcontent">
<ul class="thumbmsglist thumb2col">
<li style="padding: 5px; width: 205px; w\idth: 195px; height:85px">
<p class="thumb"><a href="$value[url]"><img src="$value[image]" alt="$value[subjectall]" title="$value[subjectall]" /></a></p>
<div style="width: 110px;">
<h6><a href="$value[url]">$value[subject]</a></h6>
<p>$value[message]</p>
</div>
</li>
</ul>
</div>
<div id="hotimage" class="tabcontent" style="display: none;">
<ul class="thumbmsglist thumb2col">
<li style="padding: 5px; width: 205px; w\idth: 195px; height:85px">
<p class="thumb"><a href="$value[url]"><img src="$value[image]" alt="$value[subjectall]" title="$value[subjectall]" /></a></p>
<div style="width: 110px;">
<h6><a href="$value[url]">$value[subject]</a></h6>
<p>$value[message]</p>
</div>
</li>
</ul>
</div>
</div>

复制代码

jsaren · 发表于 2007-4-14 17:06:53

5、增加网站调查。-----本项beta2版本已经完善，比俺这个好，
原代码：

<div class="content" style="margin-bottom: 6px;">
<div class="mainarea">
<div id="announcement">
<a href="#action/announcement#" style="float: right; padding-right: 10px;">更多</a>
<strong>公告:</strong>
暂时没有公告
<a href="$value[url]">$value[subject]</a>
</div>

复制代码

改成：

<div class="content" style="margin-bottom: 6px;">
<div class="mainarea">
<div id="announcement">
<strong>公告:</strong>
暂时没有公告
● <a href="$value[url]">$value[subject]</a>
<a href="#action/announcement#" style="padding-right: 10px;">>>>>更多</a>
<strong>调查:</strong>
暂时没有调查
● <a href="$value[url]">$value[subject]</a>
</div>

复制代码

[ 本帖最后由 jsaren 于 2007-4-19 00:00 编辑 ]

jsaren · 发表于 2007-4-14 17:07:54

增强型登陆口文件见：分享一个适合softsea风格的登录口文件

配合修改：templates\softsea\css\style.css

原文件：

/*用户面板*/
#userpanel { border: solid #E9E9E9; border-width: 0 1px 1px; zoom: 1; overflow: hidden; margin-bottom: 5px; height: 129px; background: url(../images/side_mini_title.gif) no-repeat 0 0; }
/*未登录*/
#userpanel fieldset { border: none; padding: 0 10px; margin: 0; position: relative; }
#userpanel legend { padding-left: 14px; line-height: 26px; margin-bottom: 5px; }
#userpanel input { width: 120px; }
#userpanel p { margin: 0.5em 0; }
#userpanel label { padding-right: 10px; }
#userpanel #dologin { position: absolute; right: 30px; bottom: 50px; width: 64px; height: 32px; border: none; background: #A6D18A url(../images/btn_login.gif); text-indent: -9999px; }
#userpanel form a { line-height: 2em; color: #30A9D4; border-right: 1px solid #F3F3F5; padding-right: 5px; }
/*登录后*/
#userpanel h3 { margin: 0; line-height: 26px; padding-left: 26px; font-size: 1em; font-weight: normal; }
#userpanel ul { margin: 10px 20px 10px 26px; }
#userpanel li { line-height: 2.1em; height: 2.1em; border-bottom: 1px solid #F1F5F6; }
#userpanel li a { padding-left: 10px; margin-right: 45px; background: url(../images/icon_item.gif) no-repeat 0 7px; }

复制代码

改为：

/*用户面板*/
#userpanel { border: solid #E9E9E9; border-width: 0 1px 1px; zoom: 1; overflow: hidden; margin-bottom: 5px; height: 129px; background: url(../images/side_mini_title.gif) no-repeat 0 0; }
/*未登录*/
#userpanel fieldset { border: none; padding: 0 10px; margin: 0; position: relative; }
#userpanel legend { padding-left: 14px; line-height: 26px; }
#userpanel input { width: 80px; }
#userpanel p { margin: 0.5em 0; margin-left: 3em; }
#userpanel label { padding-right: 10px; }
#userpanel #dologin { position: absolute; right: 30px; bottom: 50px; width: 64px; height: 32px; border: none; background: #A6D18A url(../images/btn_login.gif); text-indent: -9999px; }
#userpanel form a { line-height: 2em; color: #30A9D4; border-right: 1px solid #F3F3F5; padding-right: 5px; }
/*登录后*/
#userpanel h3 { margin: 0; line-height: 26px; padding-left: 26px; font-size: 1em; font-weight: normal; }
#userpanel ul { margin: 10px 26px; }
#userpanel li { border-bottom: 1px solid #E9E9E9; }
#userpanel li a { padding-left: 7px; margin-right: 5px; background: url(../images/icon_item.gif) no-repeat 0 7px; }

复制代码

[ 本帖最后由 jsaren 于 2007-4-14 17:21 编辑 ]

bhcgn · 发表于 2007-4-14 17:10:21

支持,我举手了:) :)

		自动登录	找回密码
密码			立即注册

[分享] 将新模板softsea的首页MOD进行到底！（4月29日更新，文件包已删除）

评分