这个更新对于CSS高手来说不值一提,但对于控制CSS不太熟练或手懒的朋友会有些帮助。
iPod Theme 在顶部菜单、首页评论数字显示及下载按钮这三处使用了鼠标滑过更换超链背景图,由于制作过程我反复尝试配色,所以超链背景图都分成了两个文件,由于图片并不大,就没有进行合并处理。不过为让背景更换更快捷,我昨天抽空还是把它调整了一下,将不同的背景进行合并,并针对CSS做了小修改,这样鼠标滑过效果不需要再行读取新文件,而是调用背景的不同位置。
◎ 顶部菜单超链背景:
将下面的图片保存并上传到iPod Theme的图片目录中 (…/wp-content/themes/ipod/img/ )

在样式表中找到"#hsub li a"的"background"定义,替换为以下内容:
background:url(img/menua.gif) no-repeat right top;
在样式表中找到"#hsub li a:hover "的"background"定义,替换为以下内容:
background:url(img/menua.gif) no-repeat right bottom;
◎ 首页显示评论数字超链背景:
将下面的图片保存并上传到iPod Theme的图片目录中 (…/wp-content/themes/ipod/img/ )

在样式表中找到".commentbotten a:link, .commentbotten a:visited"的"background"定义,替换为以下内容:
background : url(img/commenta.png) no-repeat top center;
在样式表中找到".commentbotten a:hover, .commentbotten a:active"的"background"定义,替换为以下内容:
background : url(img/commenta.png) no-repeat bottom center;
在样式表中找到"span.commentbotten span"的"background"定义,替换为以下内容:
background : url(img/commenta.png) no-repeat top center;
◎ 下载按钮超链背景:
将下面的图片保存并上传到iPod Theme的图片目录中 (…/wp-content/themes/ipod/img/ )

在样式表中找到".dlp a:link, .dlp a:visited"的"background"定义,替换为以下内容:
background : url(img/dl.png) no-repeat top center;
在样式表中找到".dlp a:hover, .dlp a:active"的"background"定义,替换为以下内容:
background : url(img/dl.png) no-repeat bottom center;
◎ 下载按钮使用方法
<span class="dlp"><a target="_blank" href="url"></a></span>
将其中url替换成下载路径即可。这种方法对于呈现页面好看,对于RSS读者比较麻烦,因为没有任何文字链接显示。不过如果你对iPod Theme中的".hid"定义没有修改,也可以这样做:
<span class="dlp"><a target="_blank" href="url"><span class="hid">Download</span></a></span>
这样在缺失样式表的情况下就会有文字链接呈现出来。不过我想很少人愿意这么用,文字链接或单纯的图片按钮会更简单:
<a target="_blank" href="url"><img src="your ipod theme path/img/dla.gif" /></a>
其中your ipod theme path就是你的ipod theme 路径
Permanent Link | Posted in: Theme | 1,049 Views