2007年7月14日星期六

如何修正博客搜索框页面元素的搜索结果颜色,以符合博客色彩搭配

以我的叶落尘天为例,因为是使用的黑色背景,所以默认添加此搜索框页面元素的话,搜索结果里的简要会是黑字,和黑色背景融为一体,根本看不清楚....更别提丑陋的链接颜色等等了...

下面给大家提供一个简单的修改方法:
首先,添加完搜索框页面元素后,切换到模板选项的修改HTML子项目,给代码框右上角的扩展窗口小部件模板前的小方框打上勾。

接着找到你刚刚添加的搜索框页面元素代码,即类似下面这样的代码:>b:widget id='CustomSearch1' locked='false' title='搜索此博客' type='CustomSearch'<
>b:includable id='main'<
>!-- only display title if it's non-empty --<
>b:if cond='data:title != ""'<
>h2 class='title'<>data:title/<>/h2<
>/b:if<

>div class='widget-content' style='width:95%'<
>div expr:id='data:widget.instanceId + "_form"'<
>span class='cse-status'<>data:loadingMsg/<>/span<
>/div<
>/div<

>!-- override gsearch.css --<
>style type='text/css'<
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:>data:linkColor/<;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:>data:visitedLinkColor/<;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color:>data:dateColor/<;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color:>data:urlColor/<;
}

#uds-searchControl .gsc-results {
border-color:>data:borderColor/<;
}

#uds-searchControl .gsc-tabhActive {
border-color:>data:borderColor/<;
border-top-color:>data:activeBorderColor/<;
background-color:>data:backgroundColor/<;
color:>data:textColor/<;
}

#uds-searchControl .gsc-tabhInactive {
border-color:>data:borderColor/<;
background-color:transparent;
color:>data:linkColor/<;
}
>/style<

>b:include name='quickedit'/<
>/b:includable<
>/b:widget<

注意 >style type='text/css'<和 >/style<之间部分的代码即是我们要修改的CSS部分,能够定义搜索结果框的样式颜色,我们这里只讨论颜色。

即只需要修改每一项后面的color:*******;部分即可。

上面代码第一个color:>data:linkColor/<;代表的是搜索结果的标题部分,如我的叶落尘天即修改为color:#ACFFFF;,#ACFFFF在CSS里代表青蓝色。具体各种颜色请大家自己找方便的CSS颜色调配器测试。我个人用的一款比较简易的:http://ggoovv.googlepages.com/CSS-Designer.htm

第二个color:>data:visitedLinkColor/<;是选择的要搜索类的标题如THIS BLOG的颜色。

第三个color:>data:dateColor/<;是搜索结果的日期的颜色。

第四个color:>data:urlColor/<;是定义搜索结果的相关页面链接的颜色,例如我的叶落尘天用的深绿色,改成了color:#00C45B;

第五个border-color:>data:borderColor/<;是定义搜索结果下边框的颜色,例如我的叶落尘天用的银灰色,即改成 border-color:#b0b0b0;

第六个代码块有四个颜色代码:
#uds-searchControl .gsc-tabhActive {
border-color:>data:borderColor/<;
border-top-color:>data:activeBorderColor/<;
background-color:>data:backgroundColor/<;
color:>data:textColor/<;
}

从上至下分别代表你选中的搜索类结果的边框颜色,边框顶部的加重色,边框背景色,搜索大类的文字颜色。这里的搜索类是指添加模块时可以选择的搜索本博客this blog,博客链接Linked From Here等的选项颜色定义。

第七块颜色跟第六块相反,是定义你没有选中的搜索类结果的颜色。

对了,上面七块代码似乎唯独没有定义搜索结果里简要片段文字的颜色,像我叶落尘天那样不就一片黑了吗?也太丑了吧?

别慌,还有第八块可以添加的代码如下:

#uds-searchControl .gs-result .gs-snippet {
color:#f2f2f2;
}

修改color:#f2f2f2;,把#f2f2f2代表的灰白色改成你想要的任意颜色吧~~~

2 评论:

Little m 说...

好奇一下,你这了贴代码是怎么作的?
...
我在自己那边折腾了那边都搞不好

Unknown 说...

我也主张博客社交

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆