问题关于浏览器滚动条的颜色代码!

开始
上一页
1
下一页
末尾

忧伤b小调
话题作者
离线
COM_KUNENA_SAMPLEDATA_RANK4

2008年11月15日 17:38 #1 作者：忧伤b小调

忧伤b小调 创建了话题： 关于浏览器滚动条的颜色代码!

<style type="text/css">
body {
scrollbar-face-color: #5A0002;
scrollbar-shadow-color: #720000;
scrollbar-highlight-color: #351B16;
scrollbar-3dlight-color: #5A0002;
scrollbar-darkshadow-color: #5A0002; 
scrollbar-track-color: #351B16;
scrollbar-arrow-color: #FFFFFF;
}
</style>

一般插入上面代码即可改变IE浏览器的滚动条的颜色.

可是把这段代码加入进模板的CSS文件里,但是在IE下,依然显示无效.

其实我在奇怪,好象joomla做的站点,浏览器的滚动条的颜色都是无法改变的.

改变浏览器的滚动条颜色,对网站美工确实很有大大的帮助.

高手来解决下.

谢谢.

真实打造华人最大暗黑艺术网站： www.cnhell.com 采用joomla! 2.5 搭建

请登录或者注册一个会员帐号来参与讨论

remember113
离线
COM_KUNENA_SAMPLEDATA_RANK1

2008年11月15日 21:36 #2 作者： remember113

remember113 回复了话题： Re: 关于浏览器滚动条的颜色代码!

你把
scrollbar-face-color: #5A0002;
scrollbar-shadow-color: #720000;
scrollbar-highlight-color: #351B16;
scrollbar-3dlight-color: #5A0002;
scrollbar-darkshadow-color: #5A0002;
scrollbar-track-color: #351B16;
scrollbar-arrow-color: #FFFFFF;
这段代码放到css的html里面就可以了，IE6.0的就这么改了，在FF下是无效的。

例如joomla的默认模板css里：
html {
height: 100%;
margin-bottom: 1px;
scrollbar-face-color: #5A0002;
scrollbar-shadow-color: #720000;
scrollbar-highlight-color: #351B16;
scrollbar-3dlight-color: #5A0002;
scrollbar-darkshadow-color: #5A0002;
scrollbar-track-color: #351B16;
scrollbar-arrow-color: #FFFFFF;

}
具体数值对应的啥，网上有，具体我也忘了

请登录或者注册一个会员帐号来参与讨论

Joomla之门
离线
COM_KUNENA_SAMPLEDATA_RANK_ADMIN
Joomla是最好的建站CMS！

2008年11月15日 21:46 #3 作者： Joomla之门

Joomla之门 回复了话题： Re: 关于浏览器滚动条的颜色代码!

这是个有意思的话题。

我刚才用记事本写了一个简单的 test.html ，在 head 部分插入了楼上所给的代码，在 IE 8.0 浏览器中测试，滚动条的颜色确实变了。

但是，我把这段代码写入到 Joomla! 1.5.7 的 template.css 中，或者直接插入到模板的 index.php 文件 head 部分，都没有效果。

刚才搜索了一下，发现这个问题有好多人竟然讨论过了！

在官方论坛有一个话题： Change the Appearance of a Scroll Bar?

我从该话题的讨论中发现了解决办法：将楼上提供的 CSS 代码的 body 换成 HTML，然后插入到 Joomla! 当前模板的 template.css 文件中（如果该 CSS 文件中有针对 html {} 的定义，就直接插入样式代码）。经过测试，已经成功了！

我是在 Joomla! 1.5.7 默认的 rhuk_milkyway 模板上测试的。打开该模板的 template.css 文件，可以看到开头第 5 行就是如下代码：

html {
  height: 100%;
  margin-bottom: 1px;
}

添加新代码后变成：

html {
  height: 100%;
  margin-bottom: 1px;
  scrollbar-face-color: #5A0002;
  scrollbar-shadow-color: #720000;
  scrollbar-highlight-color: #351B16;
  scrollbar-3dlight-color: #5A0002;
  scrollbar-darkshadow-color: #5A0002;
  scrollbar-track-color: #351B16;
  scrollbar-arrow-color: #FFFFFF;
}

保存文件，刷新前台，就会发现浏览器滚动条的颜色变了。

注意：这个效果只在 IE 浏览器有效。在 FireFox3 和 Chrome 浏览器上测试都无效。

PS：我在写这个帖子的时候，竟然有人已经回答了相同的答案。很好！

付费下载 Joomla 3 扩展汉化版：我要付费支持 Joomla 之门！

请登录或者注册一个会员帐号来参与讨论