Rewrite Encore with CSS

(Comments)

Encore only provide limited access to the backend configuration, but you can still come up creative ways to completely revamp how Encore feels and looks. 

Today I will introduce a way to completely rewrite the Encore homepage. We are in the process of migrating from Encore to BiblioCommons. On the day of hard launch for BiblioCommons, we do not want customers be able to use Encore any more. And we want to send a message about our new catalog to all the customers who accidently land on the Encore homepage from bookmarks saved on their computer. 

I came up with a solution to use CSS to hide every last bit of information on Encore home page. And then add new html code and CSS to generate a completely new page (as a matter of fact, you can even create a BiblioCommons search box to replace here the Encore search box is if you so choose to). I also added the countdown redirect method mentioned in the other blog Countdown Redirect for Website

The final facelift looks like this if you are using my code when a user open your Encore homepage:

The redirect to the new website can happen in any of these places:

  1. When user click on the new spelled out webiste;
  2. When user enter a search term and click submit;
  3. When user click "Advanced Search";
  4. If user does not take any action within x seconds you set up in javascript, they will automatically get brought over to the new website.

The CSS code hides whatever is on the Encore homepage and you should insert this code at the end of your custom CSS file in Encore:

#bannertop, #contentColumn, #homepageFooterArea{
display:none; !important
}

The above CSS code is very powerful and it will leave every Encore page completely blank. If you just want the code affect Encore Homepage, then wrap it with tags <style></style> and put it in the HTML section in Encore Admin instead.

The Javascript for the countdown is available in my previous post Countdown Redirect for Website

If you want to keep you library's logo, enter the following html code in the HTML section in Encore Admin (remember to replace the url with your logo image url): 

<div class="encoreLogo">
<a href="http://fishbb.pythonanywhere.com"><img src="http://fishbb.pythonanywhere.com/static/media/uploads/circle.png" alt="DLOU website" width=80px></a>
</div>

If you want to build the BiblioCommons search box in place of the hidden Encore search box, put the following code in in the HTML section in Encore Admin. (Remember to replace the URLs with your own BiblioCore URLs): 

<div class="homepageQueryContainer">

<div class="homepageQuery">

<p class="browseHeader">The library is launching a new library catalog. <p>
<p class="browseHeader">

<div id="searchbox" name="searchbox">
<form action="https://any-sandbox-cms.demo.bibliocommons.com/v2/search" method="get">

<input name="searchType" type="hidden" value="smart">

<span class="searchText customHeader">
<label for="searchString">Search:</label>
</span>
<span class="searchContent">
<div class="searchInput">
<input type="text" name="query" value="" id="query" onfocus="return;" size="40" tabindex="0">
</div>

<div id="advancedSearchLinkAnyComponent">
<div class="advSearch">
<a id="advancedSearchLinkComponent" href="https://any-sandbox-cms.demo.bibliocommons.com/search" >
Advanced Search
</a>
</div>
</div>
</span>
<span class="searchSubmit">
<input type="submit" src="http://cpalo-mt.iii.com/iii/encore/resources/gold/images/go_button.png" id="searchImageSumbitComponent" tabindex="0" alt="Search" width="40" height="40" />

</span>
</form>
</div>

</div>

After that, the magic will happen. The complete code that you can use to insert in the HTML section in Encore Admin is available in GitHub as usual. Enjoy!

Currently unrated

Comments