SUNScholar/XMLUI Theme/M2/Customisation/Logo

Back to Mirage 2 Customisation

Introduction

This wiki page has instructions on how to replace the default DSpace logo.

Please see: http://www.lynda.com/Logo-Design-training-tutorials/1329-0.html for logo design.

It is not the intention of this wiki page to teach logo design.

Step 1 - Define logo reference

Edit the following file:

nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl

Go to line 340 and modify the logo reference. At Stellenbosch we use logo.png as the logo reference.

See example below.

                        <a href="{$context-path}/" class="navbar-brand">
                            <img src="{$theme-path}/images/logo.png" />
                        </a>

Step 2 - Define logo CSS

Edit the following file:

nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/shared/_dspace-bootstrap-tweaks.scss

Go to line 16 and modify height and width. At Stellenbosch we use 1000px width and 100px height.

To make the image responsive, change img to img-responsive. See: http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

See example below.

header .navbar-brand img-responsive{
    height: 100px;
    width:  1000px;
}

Step 3 - Define header CSS

Edit the following file:

nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/shared/_dspace-bootstrap-tweaks.scss

Add the following, above the section in the step above.

header .navbar-default {
    margin-top: -10px;
}

Step 4 - Define trail CSS

Edit the following file:

nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/shared/_dspace-bootstrap-tweaks.scss

Add the following, below the section in the step above.

.trail-wrapper {
  background-color: #ccc;
  border-bottom: 1px solid #ddd;
}

Step 5 - Upload logo

Now upload your custom logo to the following folder:

$HOME/source/dspace-xmlui-mirage2/src/main/webapp/images/