How to add underlines to links in Google Search again

Martin Brinkmann
Mar 15, 2014
Updated • Mar 15, 2014
Google
|
10

google search old design

Google rolled out a change to its search engine that removed all underlines from links. I also have the impression that headlines are bigger than before and take up too much space.

I do not really mind that underlines have been removed, and speaking out against it would almost be foolish on my part, considering that we do not use underlines here on the site as well.

But underlines do serve a purpose, and some users may want them on a high profile site such as Google Search, considering that it displays a lot of links on each results page.

So, it helps to distinguish between results visually, which may be especially important for visually impaired users and if the display you are using is not the best.

The following guide explains how you can get underlines back when you use Google Search, and how you can change the font size of the headlines as well.

Preparations

You do need the Stylish extension for this. It is available for various web browsers including Firefox, Google Chrome, Opera and Safari.

I use Firefox, and the explanation on how to modify Google's search results page is done using the browser. Stylish may work slightly different if you use another browser, so keep that in mind.

Action

google-old-search

  • Go to http://www.google.com/ or a localized version of search.
  • On Firefox, a Stylish icon is displayed in the interface.
  • Click on it, and select Write new style --> for www.google.com.
  • A new style window opens up. Add a name to it, e.g. Google Search.
  • Copy the following lines of code to the end of it.

#tads a, #tadsb a, #res a, #rhs a, #taw a {
text-decoration: underline !important;
}

#res h3 {
font-size: 16px !important;
}

  • Click on Save and reload the Google Search page you are on.

If everything turned out fine, you should now see underlines in Google Search again. I have reduced the size of headlines by 2px from 18px to 16px. You can change that to another value if you like, for instance to make the headlines even bigger than they are, or smaller.

How I did it

find style

It is actually pretty easy, provided that you know a bit of CSS. When you are on the Google Search page, hit the F12 key on your keyboard to bring up the Firefox Developer Tools.

Now click on the "Pick an element from this page" icon in the main bar near the right end of it. This turns your mouse cursor into a selector. Move it over the element that you want to change, in this case the heading of a search result and the link of it.

Styles are now displayed, and all that is left to be done is to modify it. This can be very simple, for instance by changing the pixel size of the font, as you would only have to type a different number, or a bit more complicated, if you have to add your own code to the stylesheet or remove existing code.

All changes are automatically displayed on the site in question, so that you can verify each step of the way. Once you have the code, you paste it into the Stylish style and save it.

Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. Nathan G said on March 23, 2014 at 6:24 pm
    Reply

    Its okay that Google removed the underline but this guide is really interesting.

  2. Richard said on March 16, 2014 at 8:39 pm
    Reply

    Why use Google at all? I use DuckDuckGo.com and receive excellient results.

  3. Oxa said on March 16, 2014 at 2:13 am
    Reply

    Greasemonkey has a lot of scripts to adjust the formatting of Google results. It’ll probably have one for this before too long. Personally, the lack of underlines is fine with me.

    1. Martin Brinkmann said on March 16, 2014 at 9:41 am
      Reply

      I do not mind the lack of underlines either, but dislike the larger headings.

  4. Albert said on March 15, 2014 at 8:40 pm
    Reply

    I’m glad to see so many solutions, thanks! Here’s what I did:
    I installed this addon https://addons.mozilla.org/en-US/firefox/addon/add-to-search-bar/ and added the Google search engine from
    this link https://www.google.com/search?q=google

  5. Anon said on March 15, 2014 at 7:44 pm
    Reply

    I thought I’d broken Firefox cos it rendered the old way in IE.

    I like Google without Javascript. Give it a go.

  6. Boris said on March 15, 2014 at 6:25 pm
    Reply

    I use this script that does the same thing.

    http://userscripts.org/scripts/show/409199

    1. Ficho said on March 16, 2014 at 12:27 pm
      Reply

      Thanks.

  7. Pants said on March 15, 2014 at 11:38 am
    Reply

    I have used Google Search Dark+ (http://userstyles.org/styles/50108/google-search-dark-google-palette), Google DarkBlue (http://userstyles.org/styles/45830/nightblue-google-2k14-by-a3canton) and my own Google Misc (all Stylish scripts, misc being my own tweaks for various google things – some all, some news, some images) along with GoogleMonkeyR ( greasemonkey – https://userscripts.org/scripts/show/9310 <– script breaks on latest google changes but there is an edit – read the forums ) to have dual columns, numbered, auto pagination – zero ads, zero sponsored, zero wasted space, zero dmca/spelling/whatever messages – just sweet plain old nice widescreen suage of results – not to mention no click-tracking.

    The first thing I did was change the font back to 16 – nice to see you did that too Martin. God only knows why google can't dynamically assign font sizes per device – we all get it .. giant fonts, gargantuan headlines, and massive pictures under the headline .. yes, the world has mobile phones .. *sigh*

    btw – I use do all my editing in FF – butu i just copy my stylish.sqlite from there to Palemoon, Tor profile directories. I think i have tweaked about 70 sites for easier readilibity – some complex with complete color changes, others minimalist with minor changes.

    1. Pants said on March 15, 2014 at 1:06 pm
      Reply

      Oh yeah .. if you want it to work on any google search domain

      @-moz-document
      url-prefix(“https://www.google”),
      url-prefix(“http://www.google”),
      url-prefix(“https://news.google”),
      url-prefix(“http://news.google”),
      url-prefix(“https://encrypted.google”)

      not sure on that last one, but i obviously needed at some stage – now it will work on .com, .de, .co.uk. Since I don’t use much else google-wise, I’m not 100% sure if it would affect any other google services – most scripts seem to pretty much use the above or parts of it or you could use http://www.google.*/search?

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.