Place customised header on JSPUI interface

Prepare a header image and place in Dspace folder

e.g. cp header.png /opt/tomcat/webapps/jspui/image

Hide Dspace brand heading
Open header-default.jsp file using Terminal. Apply following commands,

sudo su
leafpad /opt/tomcat/webapps/jspui/layout/header-default.jsp

Find following lines (Line No. 150-153),

<div class="col-md-9 brand">
        <h1><fmt:message key="jsp.layout.header-default.brand.heading" /></h1>
        <fmt:message key="jsp.layout.header-default.brand.description" />
</div>

 Comment the lines using following syntax;

<%--

  --%>

Comment the portion of lines,

<%--        <div class="col-md-9 brand">
        <h1><fmt:message key="jsp.layout.header-default.brand.heading" /></h1>
        <fmt:message key="jsp.layout.header-default.brand.description" />
  </div> --%>

Find following line, Line Number 154 (Approximate).

<div class="col-md-3"><img class="pull-right" src="<%= request.getContextPath() %>/image/logo.gif" alt="DSpace logo" />

Add header image name and width and height to 100%

<div class="col-md-3"><img class="pull-right" src="<%= request.getContextPath() %>/image/header.png" width="100%" height="100%" alt="DSpace logo" />

Save and close the file.

Open following file,

leafpad /opt/tomcat/webapps/jspui/static/css/bootstrap/bootstrap.min.css

Change the width to 100℅ under .col-md-3
Save and close the file.

Minimize the gap between banner image and breadcrumb 

sudo su
leafpad /opt/tomcat/webapps/jspui/static/css/bootstrap/dspace-theme.css

Find the below line;

.banner img {background-color: #FFFFFF;padding:15px;margin:20px;} 

Replace with following line;

.banner img {background-color: #FFFFFF;padding:0 0 10px;}

Save and close the file.


Open jspui interface and refresh the page and see the new header.

Information courtesy
Ali Raza