webSIGHTdesigns - Web Design, Web Development, Web Hosting

How to Create Your Own Chrome New Tab Page

Posted on Saturday, November 23rd, 2013 at 1:15 pm
by webSIGHTdesigns

This tutorial outlines how to create your own New Tab page in the Chrome web browser, by creating a static HTML file and installing a small Chrome extension.

Demo »

Discontent with the latest updates to the New Tab page in the Google Chrome browser, we set out to create a static HTML document that looks like the old New Tab page which we could then use as our start page. Creating the start page was straightforward enough, but we found that even though we set our HTML document's URL as the start page in the Chrome browser's settings, we only saw our custom start page show up on the first New Tab page shown after each restart. However, the New Tab Redirect! extension fixes this issue.

Here's the HTML markup, with inline CSS:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html id="bg" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html id="bg" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html id="bg" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html id="bg" class="no-js"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<title>New Tab</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			html, body {
				width: 100%;
				height: 100%;
				margin: 0;
			}
			body {
				font-family: Helvetica, Tahoma, Arial, sans-serif;
				text-align: center;
			}
			img{
				display: block;
				margin: 0 auto;
			}
			#container {
				width: 90%;
				margin: 0 auto -8em;
				height: 100%;
				display: table;
			}
			.row {
				float: left;
				clear: both;
				margin: 8em auto 0;
			}
			.row .icon {
				float: left;
				clear: none;
				padding: 1em 1.5em;
			}
			@media (max-width: 391px) {
				#container {
					width: 180px;
				}
			}
			@media (min-width: 392px) {
				#container {
					width: 360px;
				}
			}
			@media (min-width: 587px) {
				#container {
					width: 540px;
				}
			}
			@media (min-width: 978px) {
				#container {
					width: 720px;
				}
			}
			@media (min-width: 1080px) {
				#container {
					width: 900px;
				}
			}
			@media (min-width: 1440px) {
				#container {
					width: 1080px;
				}
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div class="row">
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
				<div class="icon">
					<a href="http://www.websightdesigns.com/"><img src="img/start-icons/websightdesigns.png" alt=""></a>
				</div>
			</div>
		</div>
	</body>
</html>

As you can see, we've included break points using media queries to ensure the group of icons is always centered in the page. Just adjust the width of your browser window to see this in effect. We've included twelve icons linking to our website, just for an example, but you can set up any amount of icons according to your own needs. Then just post this HTML document and it's images at a URL somewhere and use that URL when configuring the New Tab Redirect! extension. To retain the focus in the URL bar you can specify a local file using file://path/to/start.html as the URL.

Please Sign In

Please sign in to post a comment.

Web Development

View details »

Web Hosting

View details »

Our Portfolio

View portfolio »

WebSight Designs webSIGHTdesigns preferred email webSIGHTdesigns United States United States