Customizing the 404 widget

If you're familiar with CSS, you can use it to change the appearance of the 404 widget on your custom 404 page. To change the appearance of your widget, add the following code to your custom 404 page:
   <style type="text/css">
    /* Widget content container */
   #goog-wm { }

    /* Heading for "Closest match"
   #goog-wm h3.closest-match { }

    /* "Closest match" link
   #goog-wm h3.closest-match a { }

    /* Heading for "Other things" */
   #goog-wm h3.other-things { }

    /* "Other things" list item */
   #goog-wm ul li { }

    /* Site search box */
   #goog-wm { display: list-item; }
Then edit the CSS to change the element you want. For example, the code below specifies:
  • The width, padding, border, and background color for the 404 widget container (#goog-wm).
  • The color of the Closest match text, its border and padding, font size, and margin (#goog-wm h3.closest-match).
  • The color of the Other things heading (#goog-wm h3.other-things).
  • The presence of the Google site search box. In the sample below, the value display:none turns the Google site search box off (#goog-wm The site search box is visible by default; add this value only if you don't want the site search box to appear (the search box is visible by default).
#goog-wm {
  width: 800px;
  padding: 1em;
  border: 3px solid #aebd63;
  background-color: white;

#goog-wm h3.closest-match {
  color: #8f2831;
  border-bottom: 3px dashed #aebd63;
  padding-bottom: 0.5em;;
  font-size: 170%;
  margin: 0;

#goog-wm h3.closest-match a { }
#goog-wm h3.other-things {

  color: #8f2831;
#goog-wm ul li { }
#goog-wm {
  display: none;
Was this article helpful?