css - 使用外部 CSS 样式表自定义 Google CSE 的外观

Question

我使用 Google 网站管理员工具为我的网站创建了一个搜索引擎。现在我想自定义 CSE 给出的结果格式。Google 让我可以下载整个 CSS 文件，但是当我将它附加到我的 PHP 文档的 head 部分时，什么也没有发生——自定义样式不起作用。

当我将 Google 的样式放在 body 标签中时，一切正常，但问题是这种方式不符合万维网联盟的规则，而且如果我插入这样的代码，我的代码会变得非常“脏”和不整洁我页面正文中的一长段 CSS 代码。

如何让我的外部样式表更改搜索引擎的默认外观？

Answer 1

Simply provide additional parameter "nocss: true" when loading Google Custom Search, to prevent Google from loading any css for search, so you can define all gcse-, gs- etc. css classes yourself without interference.

nocss: A boolean that tells the API whether to load any style sheets typically associated with its controls. If you don't intend to use the default CSS, you can reduce the load time by setting this to true. The default setting is false.

https://developers.google.com/loader/#DetailedDocumentation

Code:

google.load('search', '1', { 
    callback: OnGoogleSearchLoad,
    language : 'en',
    nocss: true,
    style : src="http://example.com/assets/css/gcse.css"
});

Result (no css, except site default rules) :

Example css file for GCS:

.gsc-tabsAreaInvisible,
.gsc-resultsHeader,
.gsc-branding,
.gcsc-branding,
.gsc-url-top,
.gs-watermark,
.gsc-thumbnail-inside,
.gsc-url-bottom {
    display: none;
}

.gsc-result {
    padding: 20px 0;
    border-bottom: 1px solid #E1E1E1;
}


.gs-image-box {
    width: 140px;
    height: 80px;
    overflow: hidden;
}

img.gs-image {
    min-height: 80px;
}

td.gsc-table-cell-thumbnail {
    vertical-align: top;
    padding: 0;
    width: 140px;
    display: block!important;
}

td.gsc-table-cell-snippet-close {
    vertical-align: top;
    padding: 0;
    padding-left: 20px;
}

.gsc-wrapper {
    font-size: 16px;
    line-height: 20px;
}

.gsc-control-cse a {
    color: #202020;
    font-family: HelveticaNeueLTPro-Cn, Helvetica, Arial, sans-serif;
}

.gs-snippet {
    color: #777;
    margin-top: 10px;
}

b {
    font-weight: normal;
}
.gsc-cursor {
    width: 100%;
    height: 20px;
    text-align: center;
}

.gsc-cursor-page {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
    margin: 20px 0;
}


form.gsc-search-box {
    background: #d9dadd;
    border: 20px solid #d9dadd; 
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */    
}

table.gsc-search-box {
    width: 100%;
}

td.gsc-search-button {
    vertical-align: middle;
    padding-left: 20px;
} 

td.gsc-input {
    vertical-align: top;
    width: 100%;
}

input.gsc-input {
    margin:0;
    width: 99%;
}

Result (with custom styles):

Answer 2

您是否能够确定外部 CSS 样式表是否可用于自定义 Google 搜索框？

这就是我今天所做的，它在 W3C 验证器中验证：

查看此链接： 带有 Google 自定义搜索和外部样式表的主页。

如果您查看源代码，您可以看到我从他们的“获取代码”页面上的链接下载了 Google 自定义搜索的“源 CSS”。然后我将它上传到我网站的服务器（根据我的喜好更改 CSS 之后）。

然后我从“获取代码”页面中取出代码的脚本部分并将它们粘贴到主页的 HTML 中，并更改了短语：

google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});

对此：

  google.load('search', '1', {language : 'en', style : src="http://hoodexc.com/css/google-search.css"});

如果知道java脚本的人可以告诉我一个更好的方法（仅仅因为这是有效的并不意味着它是最好的方法）请告诉我。

Answer 3

我要感谢 Gniewomir 和 Kris。

我正在使用 V1 代码在我的 wordpress 博客上安装两页布局的谷歌自定义搜索。对于搜索框，我<div id="cse-search-form">Loading</div>在标题中粘贴了一个文本小部件和脚本的其余部分。

我改变了这部分

google.load('search', '1', {language: 'en', style: google.loader.themes.GREENSKY});

至

google.load('search', '1', {language: 'en', nocss:true, style:"http://www.domain-name/wp-content/themes/theme-name/css/gcse.css"});

同时，我下载了 GREENSKY.css 并将其保存为“gcse.css”，然后上传到我的服务器。

通过 GTMETRIX 运行它，HTTP 重定向上的警告消失了。