站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
Gallery:我是如何将slider外观主题嵌入到我的网站中的
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
== slider外观主题的修改 == 在此我是不会对CSS或HTML做讲解的,这些都可以在书本中学到。我发现必须修改css来解决此绝对定位问题。所以我在同目录下做了一个'local'目录并将theme.css复制其中。在css文件的顶部你可以看到问题所在。它将图片区定位在了评论的左顶角处。那么如果我对其做修改让顶部不为0而是50 px呢?好像有点效果。图片区被下移了50 px,接着导航条就能在顶部看到了。 ==== 水平导航条 ==== 在继续之前,我需要对导航条做个解释,因为某些人可能不了解。就我迄今所作操作得到的结果看来,导航条看起来不太美观。其实它根本不是一个水平的导航条,而是一个突兀的列表样式。我并不打算娓娓道来如何将竖直列表转为一个水平导航条。因为这可以在网上找到。它使用的是CSS,而我将其风格信息由站点CSS文件复制到外观主题CSS文件。你可以在[http://wa.ter.net/docs/gallery/theme1css.php 此]看一下结果theme.css。有了这个CSS文件,我的导航条就在顶部了,但gallery其余部分看起来还是如老版普通的silder外观主题一样。 ==== 调整色彩 ==== 接着我想到必须修改slider外观主题的色彩来配合我自己的色彩。这意味着要贼此修改CSS信息。我需要将所有'背景色'的元素修改为自己的背景色。这里是结果 [http://wa.ter.net/docs/gallery/theme2css.php theme.css文件]。查看color #282828。现在开始入眼了。 ==== 解决布局问题 ==== 还没有完全结束呢。首先我想做更多的细小视觉上的修改,但更重要的是,布局方面还存在bug。在IE中,目前的CSS无法正确运作,可以看出图片现在被缩略图条所覆盖,这无疑是由图片显示区下移50px所导致的。还有在我的页面向gallery外观主题页面转换时会看到导航条呈现出不佳的跳转现象。在我自己的页面中我需要利用一些CSS小技巧来避免此类事故的发生。我需要将这些变通手段用于theme.css文件上。 要修复IE中不当覆盖的问题,光是修改CSS还是不够的。slider外观主题广泛使用Javascript,针对其所在的JS我们还需解决另一问题。它会计算图片区域的尺寸,而我们将图片区域下移了50px,因此会导致计算上的误差。被修改的slider.js可在[http://wa.ter.net/docs/gallery/slider.php 此]进行查看。修改位于186行左右。我还做的修改是在右侧添加一个永久性的滚动条,这可以解决导航条跳转的问题。可能还有更好的解决办法,这里给出的仅仅是我的方法。 if (!getstr && !document.slide) return; var w = data_iw[image_index], h = data_ih[image_index], aw = image_area.offsetWidth, ah = image_area.offsetHeight, a=0; <font color="green">ah = ah - 6; aw = aw - 6; if(app_is_ie) { ah = ah - 80; }</font> if (w > aw || h > ah) { if ((a = h/w) < ah/aw) { w = aw; h = Math.round(aw*a); 这没效果。经修改的javascript没有被执行。我很快发现我还需要修改模板目录下的header.tpl。将其复制到本地dir并使其由本地dir载入slider.js。这是我的[http://wa.ter.net/docs/gallery/header.php header.tpl]。我还需要在theme.tpl中做另一小修改,因为其中有一行隐藏了滚动条,而我希望该滚动条可以遏制屏幕的跳转。但此方法的使用与否取决于你。我对相应语句做了批注: {*body.gallery { overflow: hidden; }*} ==== 额外的修改 ==== 我们还没有完成呢。我还想要更多的视觉效果修改。我会一一道来的。 * 首先我希望图片周围有边界。这可以通过CSS来达成。在theme.css 文件的顶部某处加入下面的语句。 div#image img { border: 3px solid #ffffff; } * 我希望gallery的明朝位于导航条的左侧。这就意味着要修改theme.tpl,也就是导航条添加之处。我加入了以下语句行。如果你是管理员的话,它还会添加一个下拉框。请别忘了清除模板缓存:) <div id="portfolioname"> {if !empty($theme.item.title)} {$theme.item.title|markup} {if $user.isRegisteredUser} {g->block type="core.ItemLinks"} {/if} {/if} </div> * 修改了CSS文件中的一些字体属性。这并非很重要的。 * 我不想让普通读者看到维护菜单的扳手图标。所以我修改了slider.tpl,这样一来只有管理员可以看到。参见[http://wa.ter.net/docs/gallery/slidertpl.php slider.tpl]。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)