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//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.   

Step 2 - Define logo CSS
Edit the following file: nano $HOME//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//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//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//dspace-xmlui-mirage2/src/main/webapp/images/