In his blog post Dean runs through how to set up a Google Custom Search page.
This works well on a website with a white background but on one with customised colours the result isn’t as appealing:
(I’ve updated the search to search the Home Depot website so that there are some results to display)
The first step is to add some css specific to this page to override what is being done in main.css for tables
The front matter for the search page is updated to use the specific css:
---
layout: page
title: "Search"
css: "/css/search.css"
---
And search.css contains:
#google-custom-search {
margin-top: 50px;
}
input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button,
.gsc-selected-option-container {
box-sizing: content-box;
line-height: normal;
}
/* --- Tables --- */
table {
padding: 0;
}
table tr {
border-top: 1px solid #ECF3FA;
background-color: #ECF3FA;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) {
background-color: #ECF3FA;
}
table tr th {
font-weight: bold;
border: 1px solid #ECF3FA;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr td {
border: 0px solid #ECF3FA;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :first-child,
table tr td :first-child {
margin-top: 0;
}
table tr th :last-child,
table tr td :last-child {
margin-bottom: 0;
}
The top part was taken from Dean’s search.css
The result is better but not perfect:
The last step is to edit the appearance of the Google Custom Search itself:
After this the end result is much better:
The downside of this method is that if the colour scheme in _config.yaml changes you need to remember to modify both the search.css file and the customisation on the Google side to match.