Custom CSS & Javascript: Search Bars
Newsletter Q4 2019
December 11, 2019
Tips and Tricks: Shortcuts
February 27, 2020Make your portals search savvy.
Search bars are a great way to find products quickly!
An eye-catching and easy to find search bar can improve conversion rates and enhance your user's experience. While the search page on your DocketManager portals is a simple element and can very easily be ignored, we are here to give you options to make it easier to find - and better looking!
An eye-catching and easy to find search bar can improve conversion rates and enhance your user's experience. While the search page on your DocketManager portals is a simple element and can very easily be ignored, we are here to give you options to make it easier to find - and better looking!
Configuring the search bar
Let's start with adding a search bar to the Header HTML of your portal.
This can be found in Settings > Online Configuration > Theme (choose the theme for the portal that you would like this added to) > Customize this Theme > Header HTML.
Copy and paste the following HTML where you would like the search bar to appear. For the Electro Green portal shown above, I chose to add it in the column to the left of the logo.
<input type="text" id="appendUrl" placeholder="Search..."/><a href="PASTE-YOUR-PORTAL-SEARCH-PAGE-LINK-HERE&q=" id="baseUrl"><i class="fas fa-search search-bar"></i></a>
Important: Copy the link to the search page in your portal and paste it between the parenthesis and "&" where instructed in the Javascript.
Now let's add some Javascript to make it functional!
Copy and paste the following code into the Javascript box for the theme. This can be found in Settings > Online Configuration > Theme (choose the theme for the portal that you would like this added to) > Customize this Theme > Javascript.
Now let's add some Javascript to make it functional!
Copy and paste the following code into the Javascript box for the theme. This can be found in Settings > Online Configuration > Theme (choose the theme for the portal that you would like this added to) > Customize this Theme > Javascript.
function dmLoad() {
$('#baseUrl').click( function() {
window.location = $(this).attr('href') + $('#appendUrl').val();
return false;
});
var input = document.getElementById("appendUrl");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("baseUrl").click();
}
});
};
Lastly, let's add some basic styling. Copy and paste the following into the CSS box directly above the Javascript box.
.search-bar {
padding:10px;
background:#ccc;
}
#appendUrl {
width:200px;
height:34px;
}
That's all folks! The search bar now works and functions the same as the bar on the Search page. When you search through the search bar, it will take you to the Search page to see the results so you can remove the Search page from your menu if you'd like.
Design Option 1
This slick search bar expands when clicked.
To use this design, copy and paste the fields below.
HomePage HTML:
To use this design, copy and paste the fields below.
HomePage HTML:
<div id="search-bar" > <form> <input type="search" id="appendUrl" placeholder="Search"> <a href="PASTE-YOUR-PORTAL-SEARCH-PAGE-LINK-HERE&q=" id="baseUrl"></a> </form> </div>
Javascript:
function dmLoad() {
$('#baseUrl').click( function() {
window.location = $(this).attr('href') + $('#appendUrl').val();
return false;
});
var input = document.getElementById("appendUrl");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("baseUrl").click();
}
});
};
CSS:
#search-bar input {
outline: none;
}
#search-bar input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
#search-bar input::-webkit-search-decoration,
#search-bar input::-webkit-search-cancel-button {
display: none;
}
#search-bar input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#search-bar input[type=search]:focus {
width: 200px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
#search-bar input:-moz-placeholder {
color: #999;
}
#search-bar input::-webkit-input-placeholder {
color: #999;
}
Design Option 2
This dark search bar has a glow that pulses when it is clicked.
To use this design, copy and paste the fields below.
HomePage HTML:
To use this design, copy and paste the fields below.
HomePage HTML:
<div id="search-bar"> <form action="" method=""> <input type="search" placeholder="What are you looking for?" id="appendUrl"> <a href="PASTE-YOUR-PORTAL-SEARCH-PAGE-LINK-HERE&q=" id="baseUrl"><button>Search</button></a> </form> </div>
Javascript:
function dmLoad() {
$('#baseUrl').click( function() {
window.location = $(this).attr('href') + $('#appendUrl').val();
return false;
});
var input = document.getElementById("appendUrl");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("baseUrl").click();
}
});
};
CSS:
#search-bar input {
background: #222;
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 0 0 5px;
box-shadow: 0 2px 0 #000;
color: #888;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0;
padding: 0 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}
.ie #search-bar input {
line-height: 40px;
}
#search-bar input::-webkit-input-placeholder {
color: #888;
}
#search-bar input:-moz-placeholder {
color: #888;
}
#search-bar input:focus {
animation: glow 800ms ease-out infinite alternate;
background: #222922;
background: linear-gradient(#333933, #222922);
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
color: #efe;
outline: none;
}
#search-bar input:focus::-webkit-input-placeholder {
color: #efe;
}
#search-bar input:focus:-moz-placeholder {
color: #efe;
}
#search-bar button {
background: #222;
background: linear-gradient(#333, #222);
box-sizing: border-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
float: left;
font-family: 'Cabin', helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}
#search-bar button:hover,
#search-bar button:focus {
background: #292929;
background: linear-gradient(#393939, #292929);
color: #5f5;
outline: none;
}
#search-bar button:active {
background: #292929;
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
}
}
Design Option 3
This fly-out search bar is eye catching yet simple.
To use this design, copy and paste the fields below.
HomePage HTML:
To use this design, copy and paste the fields below.
HomePage HTML:
<div id="search-bar">
<form>
<input id="appendUrl" name="search" type="text" placeholder="What're we looking for ?">
<a href="PASTE-YOUR-PORTAL-SEARCH-PAGE-LINK-HERE&q=" id="baseUrl"><input id="search_submit" value="Rechercher" type="submit"></a>
</form>
</div>
Javascript:
function dmLoad() {
$('#baseUrl').click( function() {
window.location = $(this).attr('href') + $('#appendUrl').val();
return false;
});
var input = document.getElementById("appendUrl");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("baseUrl").click();
}
});
};
CSS:
#search-bar input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
#search-bar input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
#search-bar input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
#search-bar input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
#search-bar input[type="submit"]:hover {
opacity: 0.8;
}
If you have any ideas for portal customizations you'd like to see us tackle or need help implementing one of these search bars, email our support team at support@docketmanager.ca
