Archive of Our Own ^beta

Chapter Text

Have you ever wanted to expose you favourite character's (quite frankly embarrassing) Google search history?

Wait no more!

Here's a simple guide to include a Google search history to your story! It comes in different flavours (auto-complete suggestions, recent history, related to recent searches and trending searches) for extra variety!

Auto-Complete Google Search Suggestions

Recent History

Related to Recent Searches

Trending Searches

Chapter Text

Google Logo

A simple one! Here we set the formatting for the Google logo by setting its height and centering it on the page.

  #workskin .google-logo {
  display: block;
  height: 92px;
  margin: 0 auto;
}

Google Search container

The .google-search container is a table containing 2 rows: the search bar (.search-box) and the search suggestions (.suggestions-box). First, we set the formatting for the wrapper table:

  #workskin .google-search {
  font-family: arial, sans-serif;
  font-size: 16px;
  border-collapse: separate;
  border-spacing: 0px 8px;
  margin-top: 6px;
}

#workskin .google-search td {
  padding: 0;
}

The font family and size will be inherited by all the elements inside the .google-search table.

Search Bar

The div element with the .search-box class contains the text in the search bar (.search-text) and the vertical bar (.vertical-divider) that is used to separate the delete and voice search icons when both are present. Here's the formatting we use to mimic the real Google search bar:

  #workskin .search-box {
  position: relative;
  background: #fff;
  height: 44px;
  width: 100%;
  max-width: 584px;
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 1px 6px #20212447;
}

The text in the search bar is contained in .search-text which has this formatting:

  #workskin .search-text {
  border: none;
  outline: none;
  display: table-cell;
  word-wrap: break-word;
  vertical-align: middle;
  color: #000;
  height: 28px;
  width: 100%;
  padding: 0 45px;
}

Using the ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. This means that there is less to do when setting up your HTML code since the majority of the work is done in the work skin (yay!) and also that if a user chooses to turn off the work skin, the formatting of the work will still be nice and readable (double yay!).

This snippet is used to insert the magnifying glass icon before the search bar text:

  #workskin .search-text::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/61/61088.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 15px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 14px;
  width: 14px;
  opacity: 0.35;
}

Here we use the ::before pseudo-element to insert some empty text before .search-text and set the background to the search icon (magnifying glass). Using the position: absolute; and left: 15px; properties, we set its horizontal position while the top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); properties are used to center the icon vertically.

In Google (the real one), when you type in some text into the search bar, a delete icon appears to clear the text as well as a vertical bar separating the delete and voice search icons. When there is no text in the search bar, this delete button doesn't appear. To copy this behaviour, you can add another class to the .vertical-divider div: .filled or .empty.
When the div has the .filled class, the vertical bar and the delete icon will appear. When the div has the .empty class, only the voice search icon will be displayed.

Here is the code for the vertical bar:

  #workskin .vertical-divider.filled {
  border-left: 1px solid #dadce0;
  display: table-cell;
  padding-right: 52px;
}

#workskin .vertical-divider.empty {
  border-left: none;
  display: table-cell;
  padding-right: 52px;
}

If the vertical divider has the .filled class, the delete icon will be added before the divider:

  #workskin .vertical-divider.filled::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/61/61155.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 69px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 14px;
  width: 14px;
  opacity: 0.55;
}

The voice search icon appears regardless of if the search bar has text or not, and is added by this code snippet:

  #workskin .vertical-divider::after {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/3128/3128290.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 16px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 24px;
  width: 24px;
}

Search Suggestions

After the search bar, you will find the search suggestions (here .suggestions-box) which has this formatting:

  #workskin .suggestions-box {
  position: relative;
  top: -8px;
  overflow: hidden;
  background: #fff;
  max-width: 584px;
  min-width: 300px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 8px;
  padding: 0 0 4px 0;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 6px #20212447;
}

Between the search bar and the search suggestions, we have a horizontal line defined by this code snippet:

  #workskin .horizontal-divider {
  border-top: 1px solid #e8eaed;
  margin: 0 20px 0 14px;
  padding-bottom: 4px;
}

Sometimes, you will want to add a title before the suggested searches. This applies for 'Related to recent searches' and 'Trending searches'. Here's the formatting for the title:

  #workskin .suggestions-title {
  color: #70757a;
  font-size: 14px;
  margin-left: 16px;
  padding: 8px 0;
  line-height: 16px;
}

Next, we set the formatting for the suggested search items:

  #workskin .suggestions-text {
  color: #212121;
  word-break: break-word;
  padding-right: 8px;
}

#workskin .suggestions-text ul {
  margin: 0 auto;
  padding-bottom: 8px;
}

#workskin .suggestions-text li {
  margin: 0;
  padding: 6px 0 6px 30px;
  list-style: none;
  margin-inline-start: 0;
}

Just like in the search bar section, we'll add a search icon before each suggested search:

  #workskin .suggestions-text li::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/61/61088.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 15px;
  height: 14px;
  width: 14px;
  opacity: 0.35;
}

You can also use a clock icon instead if you want to show a recent search history. Simply add the class .history to each list element li.

  #workskin .suggestions-text li.history::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/3114/3114812.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 15px;
  height: 14px;
  width: 14px;
  opacity: 0.35;
}

If you want to show trending searches, add the .trending class instead:

  #workskin .suggestions-text li.trending::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/6797/6797554.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 14px;
  height: 16px;
  width: 16px;
  opacity: 0.35;
}

Buttons

Under the search suggestions, we add the 'Google Search' and 'I'm Feeling Lucky' buttons. They both have this formatting:

  #workskin .button-box {
  height: 70px;
}

#workskin .button {
  display: inline-block;
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
}

To finish it off, here's the formatting for the 'Report inappropriate predictions' button:

  #workskin .report {
  color: #70757a;
  float: right;
  font-size: 8pt;
  font-style: italic;
  position: absolute;
  right: 16px;
  padding: 0 5px;
  margin-top: -13px;
}

Chapter Text

  #workskin .google-logo {
  display: block;
  height: 92px;
  margin: 0 auto;
}

#workskin .google-search {
  font-family: arial, sans-serif;
  font-size: 16px;
  border-collapse: separate;
  border-spacing: 0px 8px;
  margin-top: 6px;
}

#workskin .google-search td {
  padding: 0;
}

#workskin .search-box {
  position: relative;
  background: #fff;
  height: 44px;
  width: 100%;
  max-width: 584px;
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 1px 6px #20212447;
}

#workskin .search-text {
  border: none;
  outline: none;
  display: table-cell;
  word-wrap: break-word;
  vertical-align: middle;
  color: #000;
  height: 28px;
  width: 100%;
  padding: 0 45px;
}

#workskin .search-text::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/61/61088.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 15px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 14px;
  width: 14px;
  opacity: 0.35;
}

#workskin .vertical-divider.filled {
  border-left: 1px solid #dadce0;
  display: table-cell;
  padding-right: 52px;
}

#workskin .vertical-divider.empty {
  border-left: none;
  display: table-cell;
  padding-right: 52px;
}

#workskin .vertical-divider.filled::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/61/61155.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 69px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 14px;
  width: 14px;
  opacity: 0.55;
}

#workskin .vertical-divider::after {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/3128/3128290.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 16px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 24px;
  width: 24px;
}

#workskin .suggestions-box {
  position: relative;
  top: -8px;
  overflow: hidden;
  background: #fff;
  max-width: 584px;
  min-width: 300px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 8px;
  padding: 0 0 4px 0;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 6px #20212447;
}

#workskin .horizontal-divider {
  border-top: 1px solid #e8eaed;
  margin: 0 20px 0 14px;
  padding-bottom: 4px;
}

#workskin .suggestions-title {
  color: #70757a;
  font-size: 14px;
  margin-left: 16px;
  padding: 8px 0;
  line-height: 16px;
}

#workskin .suggestions-text {
  color: #212121;
  word-break: break-word;
  padding-right: 8px;
}

#workskin .suggestions-text ul {
  margin: 0 auto;
  padding-bottom: 8px;
}

#workskin .suggestions-text li {
  margin: 0;
  padding: 6px 0 6px 30px;
  list-style: none;
  margin-inline-start: 0;
}

#workskin .suggestions-text li::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/61/61088.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 15px;
  height: 14px;
  width: 14px;
  opacity: 0.35;
}

#workskin .suggestions-text li.history::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/3114/3114812.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 15px;
  height: 14px;
  width: 14px;
  opacity: 0.35;
}

#workskin .suggestions-text li.trending::before {
  content: '';
  background-image: url(https://cdn-icons-png.flaticon.com/512/6797/6797554.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 14px;
  height: 16px;
  width: 16px;
  opacity: 0.35;
}

#workskin .button-box {
  height: 70px;
}

#workskin .button {
  display: inline-block;
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  color: #3c4043;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  height: 36px;
  line-height: 36px;
}

#workskin .report {
  color: #70757a;
  float: right;
  font-size: 8pt;
  font-style: italic;
  position: absolute;
  right: 16px;
  padding: 0 5px;
  margin-top: -13px;
}

Chapter Text

Google Logo

First, we add the Google logo using this HTML code snippet:

  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="google-logo">

Google Search container

The search bar and suggestions box are contained in a table with the class .google-search. This table contains 2 rows: .search-box and .suggestions-box:

  <table class="google-search">
  <tr>
    <td>
      <div class="search-box">[###]</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="suggestions-box">[###]</div>
    </td>
  </tr>
</table>

Search Bar

The .search-box div contains 2 elements: .search-text and .vertical-divider:

  <div class="search-box">
  <div class="search-text">I am extremely</div>
  <div class="vertical-divider filled"></div>
</div>

If you want the delete icon to appear in the search bar, add the .filled class to the vertical-divider:

  <div class="vertical-divider filled"></div>

If you don't want the delete icon to appear in the search bar, add the .empty class to the vertical-divider instead:

  <div class="vertical-divider empty"></div>

Search Suggestions container

The .suggestions-box div contains 4 elements: a horizontal divider, the suggested search items, the button box and the report button.

  <div class="suggestions-box">
  <div class="horizontal-divider"></div>
  <div class="suggestions-text">[###]</div>
  <div class="button-box">[###]</div>
  <div class="report">Report inappropriate predictions</div>
</div>

If you want to add a title before the suggestions (like "Trending searches" or "Related to recent searches"), you can add a div element between the horizontal divider and the suggested search items:

  <div class="suggestions-box">
  <div class="horizontal-divider"></div>
  <div class="suggestions-title">Trending searches</div>
  <div class="suggestions-text">[###]</div>
  <div class="button-box">[###]</div>
  <div class="report">Report inappropriate predictions</div>
</div>

Inside the .suggestions-text element, we have an unordered list ul with several list items li:

  <div class="suggestions-text">
  <ul>
    <li>I am extremely <b>bored</b></li>
    <li>I am extremely <b>tired</b></li>
    <li>I am extremely <b>hungry</b></li>
    <li>I am extremely <b>irritable</b></li>
    <li>I am extremely <b>sorry</b></li>
    <li>I am extremely <b>apologize</b></li>
    <li>I am extremely <b>awkward</b></li>
  </ul>
</div>

To mimic Google's auto-complete suggestions, use the bold tag (<b></b>) for the suggested text.

If you want to display a search history (with a clock icon beofre the suggestion), simply add the class .history to each li element:

  <li class="history">how to hypnotize yourself to forget crush</li>

If you want to display trending searches (with a trending up icon before the suggestion), simply add the class .trending to each li element:

  <li class="trending">how to get free coffee forever</li>

Buttons

Google search usually comes with 2 buttons: "Google Search" and "I'm Feeling Lucky". This is the HTML code to add them to the suggestion box:

  <div class="button-box">
  <center>
    <div class="button">Google Search</div>
    <div class="button">I'm Feeling Lucky</div>
  </center>
</div>

Chapter Text

Auto-Complete Google Search Suggestions

  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="google-logo">

<table class="google-search">
  <tr>
    <td>
      <div class="search-box">
        <div class="search-text">I am extremely</div>
        <div class="vertical-divider filled"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="suggestions-box">
        <div class="horizontal-divider"></div>
        <div class="suggestions-text">
          <ul>
            <li>I am extremely <b>bored</b></li>
            <li>I am extremely <b>tired</b></li>
            <li>I am extremely <b>hungry</b></li>
            <li>I am extremely <b>irritable</b></li>
            <li>I am extremely <b>sorry</b></li>
            <li>I am extremely <b>apologize</b></li>
            <li>I am extremely <b>awkward</b></li>
          </ul>
        </div>
        <div class="button-box">
          <center>
            <div class="button">Google Search</div>
            <div class="button">I'm Feeling Lucky</div>
          </center>
        </div>
        <div class="report">Report inappropriate predictions</div>
      </div>
    </td>
  </tr>
</table>

Recent History

  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="google-logo">

<table class="google-search">
  <tr>
    <td>
      <div class="search-box">
        <div class="search-text"></div>
        <div class="vertical-divider empty"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="suggestions-box">
        <div class="horizontal-divider"></div>
        <div class="suggestions-text">
          <ul>
            <li class="history">how to hypnotize yourself to forget crush</li>
            <li class="history">date ideas that aren't awkward</li>
            <li class="history">first date ideas</li>
            <li class="history">crush help</li>
            <li class="history">what do when crush</li>
            <li class="history">how do you know if you have a crush</li>
            <li class="history">feeling butterflies</li>
            <li class="history">stomach ache</li>
          </ul>
        </div>
        <div class="button-box">
          <center>
            <div class="button">Google Search</div>
            <div class="button">I'm Feeling Lucky</div>
          </center>
        </div>
        <div class="report">Report inappropriate predictions</div>
      </div>
    </td>
  </tr>
</table>

Related to Recent Searches

  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="google-logo">

<table class="google-search">
  <tr>
    <td>
      <div class="search-box">
        <div class="search-text"></div>
        <div class="vertical-divider empty"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="suggestions-box">
        <div class="horizontal-divider"></div>
        <div class="suggestions-title">Related to recent searches</div>
        <div class="suggestions-text">
          <ul>
            <li>no wrap css</li>
            <li>overflow hidden</li>
            <li>css prevent line break</li>
            <li>white-space css</li>
            <li>white-space no-wrap</li>
          </ul>
        </div>
        <div class="button-box">
          <center>
            <div class="button">Google Search</div>
            <div class="button">I'm Feeling Lucky</div>
          </center>
        </div>
        <div class="report">Report inappropriate predictions</div>
      </div>
    </td>
  </tr>
</table>

Trending Searches

  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="google-logo">

<table class="google-search">
  <tr>
    <td>
      <div class="search-box">
        <div class="search-text"></div>
        <div class="vertical-divider empty"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="suggestions-box">
        <div class="horizontal-divider"></div>
        <div class="suggestions-title">Trending searches</div>
        <div class="suggestions-text">
          <ul>
            <li class="trending">MCU</li>
            <li class="trending">new movies this year</li>
            <li class="trending">best comic books</li>
            <li class="trending">how to get free coffee forever</li>
            <li class="trending">jupiter close to earth photos</li>
            <li class="trending">new imagine dragons album</li>
          </ul>
        </div>
        <div class="button-box">
          <center>
            <div class="button">Google Search</div>
            <div class="button">I'm Feeling Lucky</div>
          </center>
        </div>
        <div class="report">Report inappropriate predictions</div>
      </div>
    </td>
  </tr>
</table>