How to customize DSpace theme?

Question

I have installed DSpace on my PC. I am using Mirage as a default theme and now I want to customize it for my DSpace. I want to change CSS files (redesign it), but I don't know the steps to properly set my customizations. I can edit my CSS files in [dspace]/webapps/themes/Mirage/lib/css/ folder, but after rebuilding DSpace they will be removed. What is the correct way doing customizations over already installed theme? Should I edit CSS files and add them to [dspace-source]/dspace/modules/src/main/ folder and then rebuild my webapps? I have read official documentation about that, but I couldn't find proper answer to my question.

Answer 1

1. Create a folder for your theme in [dspace-src]/dspace/modules/xmlui/src/main/webapps/theme/[yourTheme]
2. Copy the CSS (or js or xsl) files you wish to modify into that directory - you can find a copy of the source files in [dspace-install] as you have referenced, or you can find them on the project github page
3. Edit your changes
4. Run the maven build in [dspace-src]/dspace: "dspace package" - this command will pull the source files for the theme and overlay your customizations. The results are built into the "target" folder.
5. cd into [dspace-src]/dspace/target/dspace-installer
6. Run "ant update" - this command will take the built files and install them into [dspace-install]
7. Restart tomcat

The following page has some resources that might be useful.

https://wiki.duraspace.org/display/DSDOC5x/XMLUI+Configuration+and+Customization