DSpace header customization

How to change the header image in Dspace JSPUI page/Interface

 1. Prepare a header image and place in Dspace folder

Ex-header.jpg 

ex - cp header.jpg /dspace/webapps/jspui/image
   
2. Hide Dspace brand heading
  Open header-default.jsp file using Terminal. Apply following commands

gedit /dspace/webapps/jspui/layout/header-default.jsp

 
 Replace RED portion for header image setting

/header>
<main id="content" role="main">
<div class="container banner">
    <div class="row">
        <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>
        <div class="col-md-3"><img class="pull-right" src="<%= request.getContextPath() %>/image/logo.gif" alt="DSpace logo" />
        </div>
    </div>
</div>
<br/>
             <%-- Location bar --%>


Replace

<p align="middle" topmargin="0"><img src="/jspui/image/header.jpg" width=1135"></P>


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.