Add The Happy Dictionary to your website

Search The Happy Dictionary widget: light

 

This search box will automatically resize to fit your website and has no background colour (shown here on light grey as an example only) – it will work well on any light-coloured background.

HTML

Copy and paste the below code where you’d like the widget to appear on your site.

<div class="searchHDBox">
<div>
<img src="https://thehappydictionary.com/wp-content/uploads/2018/05/search-the-happy-dictionary.png" alt="Search the Happy Dictionary" />

<form action="https://thehappydictionary.com/" type="get"><input type="text" id="s" name="s" class="hdInput" placeholder="Search for a word ..."><input type="submit" value="GO" class="hdSubmit"></form>

</div>
</div>

CSS

Copy this styling information into your CSS – if you use WordPress, you might like to use a CSS plugin to store this code.

.searchHDBox {
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
}
.searchHDBox div {
	padding: 10px;
}
.searchHDBox img {
	width: 100%;
	margin: 15px 0;
}
.searchHDBox form {
	text-align: center;
	margin: 0 auto;
}
.searchHDBox .hdInput, .searchHDBox .hdSubmit {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-family: serif;
	letter-spacing: 1.2px;
	padding: 3px;
	font-size: 14px;
}
.searchHDBox .hdInput {
	background-color: #FFF;
	color: #CCC;
	border: 1px solid #ff7a00;
	width: 86%;
	height: 30px;
}
.searchHDBox .hdSubmit {
	background-color: #0a5a82;
	color: #FFF;
	border: 0;
	margin-left: 2%;
	padding: 10px;
	width: 10%;
}

Search The Happy Dictionary widget: dark

 

This search box will automatically resize to fit your website and has no background colour (shown here on black as an example only) – it will work well on any dark-coloured background.

HTML

Copy and paste the below code where you’d like the widget to appear on your site.

<div class="searchHDBoxDark">
<div>
<img src="https://thehappydictionary.com/wp-content/uploads/2018/05/search-the-happy-dictionary-dark.png" alt="Search the Happy Dictionary" />

<form action="https://thehappydictionary.com/" type="get"><input type="text" id="s" name="s" class="hdInput" placeholder="Search for a word ..."><input type="submit" value="GO" class="hdSubmit"></form>

</div>
</div>

CSS

Copy this styling information into your CSS – if you use WordPress, you might like to use a CSS plugin to store this code.

.searchHDBoxDark {
	max-width: 500px;
	margin: 0 auto;
	width: 100%;
}
.searchHDBoxDark div {
	padding: 10px;
}
.searchHDBoxDark img {
	width: 100%;
	margin: 15px 0;
}
.searchHDBoxDark form {
	text-align: center;
	margin: 0 auto;
}
.searchHDBoxDark .hdInput, .searchHDBoxDark .hdSubmit {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
	font-family: serif;
	letter-spacing: 1.2px;
	padding: 3px;
	font-size: 14px;
}
.searchHDBoxDark .hdInput {
	background-color: #FFF;
	color: #CCC;
	border: 1px solid #ff7a00;
	width: 86%;
	height: 30px;
}
.searchHDBoxDark .hdSubmit {
	background-color: #0a5a82;
	color: #FFF;
	border: 0;
	margin-left: 2%;
	padding: 10px;
	width: 10%;
}