Re-positioning the Search Bar

Depending on your use of the LMS, you might want to choose to move the Search bar to a different location.  The default location of the search bar is on its own line, centered on the page below the Information / Header Bar. Perhaps, you would like the search bar to appear on the Information / Header bar.

Default location:

Default

Let’s take a look at the moving the search bar to the header.

First, you must be logged in as an administrator.

Click on the ‘Login’ link in next to the Home Icon Icon.

Enter your Admin credentials.

AdminLogin

Next, Click on the gear icon, find Customize and click on Javascript.

We can enter custom javascript on this page to make changes to the way the LMS builds out along with other custom functions of the page.

Enter this code:

iv.$(“[source=playbill]”).hide();
iv.when(“home.header.load”).then(function($, response) {
     var mar = $(“[source=marquee]”).find(“div.iv-pull-left”);
     var pb = $(“[source=playbill]”).find(“input”);
     mar.append(pb.show());
});

Click ‘Save’ and refresh the Page, you will see the Search bar now displays in the Header Bar.

 LeftSearch

We can make changes to this code to move the search bar to the right side.

iv.$(“[source=playbill]”).hide();
iv.when(“home.header.load”).then(function($, response) {
     var mar = $(“[source=marquee]”).find(“div.iv-pull-right“);
     var pb = $(“[source=playbill]”).find(“input”);
     mar.append(pb.show());
});

RightSearch

Or:

iv.$(“[source=playbill]”).hide();
iv.when(“home.header.load”).then(function($, response) {
     var mar = $(“[source=marquee]”).find(“div.iv-pull-left”);
     var pb = $(“[source=playbill]”).find(“input”);
     mar.Prepend(pb.show());
});

PreRightSearch