Difference between revisions of "SUNScholar/XMLUI Theme/M2/Customisation"

Latest revision as of 11:31, 26 June 2016

Back to Mirage 2 Theme

It is assumed that the Mirage 2 theme was installed according to: http://wiki.lib.sun.ac.za/index.php/SUNScholar/XMLUI_Theme/M2.
It is also assumed that you installed DSpace according to: http://wiki.lib.sun.ac.za/index.php/SUNScholar/DSpace.
After you have completed your customisation, you will have to rebuild DSpace.

Procedures

Live Webapp Quick Changes

CSS changes

This saves you from having to recompile the whole DSpace webapp just to see what effect a few SASS CSS changes will make.

Type the following:

cd $HOME/webapps/xmlui/themes/Mirage2

compass watch

Now using another login session, you can modify the SASS CSS stylesheets in the styles folders and the main.css file will compile almost instantly.

If you make a serious error, then compass will crash, so you must watch the terminal where compass is running to check for errors and if needed restart compass.

Just remember to make the same changes to the source SASS CSS files, so that your changes will be applied after the next DSpace rebuild:

To synchronise the live webapp CSS styles folder with the source folder, type the following:

rsync -av $HOME/webapps/xmlui/themes/Mirage2/styles/ $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/

XSL changes

After modifying the XSL stylesheets in the live webapp XSL folder, just press refresh in your browser to view the changes. If your browser has caching enabled, try to disable caching while doing development work.

Just remember to make the same changes to the source XSL files, so that your changes will be applied after the next DSpace rebuild:

To synchronise the live webapp XSL stylesheet folder with the source folder, type the following:

rsync -av $HOME/webapps/xmlui/themes/Mirage2/xsl/ $HOME/source/dspace-xmlui-mirage2/src/main/webapp/xsl/

Screenshots

Below are screenshots of our modified Mirage2 theme.

Front Page

View Item

View Community

ORCID Lookup

Simple Submission Form

Help Links

Theme Archive

Below are links to archived themes that can be used as examples.

Reference

http://wiki.duraspace.org/display/DSDOC5x/Mirage+2+Configuration+and+Customization

@@ Line 2: / Line 2: @@
   '''[[SUNScholar/XMLUI_Theme/M2|Back to Mirage 2 Theme]]'''
 </center>
+===Introduction===
+These wiki pages will assist you in customising the Mirage 2 theme that was introduced with DSpace 5.X.
-===Multiple themes===
+Please read the requirements first, to gain an understanding of the "bootstrap" framework, then proceed with the rest of the customisation.
-Any folder you create in:
- /home/dspace/DSpace/dspace/modules/xmlui-mirage2/src/main/webapp/themes
-will be interpreted as a Mirage2 based theme.
-This means that if I create two folders called 'Red' and 'Green' in that directory, and create the file '''styles/_style.scss''' in both folders with the contents
+This [[SUNScholar/Theme#Design_Considerations|customisation is very basic]] and is intended for those who have basic web 2.0 design skills.
+====<font color="red">Please Note:</font>====
+*''It is assumed that the Mirage 2 theme was installed according to: http://wiki.lib.sun.ac.za/index.php/SUNScholar/XMLUI_Theme/M2.''
+*''It is also assumed that you installed DSpace according to: http://wiki.lib.sun.ac.za/index.php/SUNScholar/DSpace.''
+*''After you have completed your customisation, you will have to [[SUNScholar/Rebuild_DSpace|rebuild DSpace]]''.
-<pre>
+===Procedures===
-body {
+#[[SUNScholar/Bootstrap Framework|Requirements]]
-  background-color: red;
+#[[SUNScholar/XMLUI_Theme/Common_Elements|Review Common Elements]]
-}
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Introduction Text|Front Page Text]]
-</pre>
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Palette|Palette (colours)]]
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Typography|Typography (fonts)]]
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Logo|Banner Logo]]
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Institutional Branding|Institutional Branding]]
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Document Structure|Document Structure]]
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Footer Design|Footer Design]]
+#[[SUNScholar/XMLUI_Theme/M2/Customisation/Extra Customisation|Extra Customisation (Optional)]]
-and
+===Live Webapp Quick Changes===
+====CSS changes====
+This saves you from having to recompile the whole DSpace webapp just to see what effect a few SASS CSS changes will make.
-<pre>
+Type the following:
-body {
+ cd $HOME/webapps/xmlui/themes/Mirage2
-  background-color: green;
-}
-</pre>
-respectively and run mvn package -Dmirage2.on=true, two themes will be created called 'Red' and 'Green', with the only difference being the background color of <body>
+ compass watch
+<font color="red">'''Now using another login session, you can modify the SASS CSS stylesheets in the <tt>'''styles'''</tt> folders and the <tt>'''main.css'''</tt> file will compile almost instantly.'''</font>
+If you make a serious error, then compass will crash, so you must watch the terminal where compass is running to check for errors and if needed restart compass.
+''<u>Just remember to make the same changes to the source SASS CSS files, so that your changes will be applied after the next DSpace rebuild:</u>''
+To synchronise the live webapp CSS styles folder with the source folder, type the following:
+ rsync -av $HOME/webapps/xmlui/themes/Mirage2/styles/ $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/styles/
+====XSL changes====
+After modifying the XSL stylesheets in the live webapp XSL folder, just press refresh in your browser to view the changes. If your browser has caching enabled, try to disable caching while doing development work.
+''<u>Just remember to make the same changes to the source XSL files, so that your changes will be applied after the next DSpace rebuild:</u>''
+To synchronise the live webapp XSL stylesheet folder with the source folder, type the following:
+ rsync -av $HOME/webapps/xmlui/themes/Mirage2/xsl/ $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/xsl/
+===Screenshots===
+Below are screenshots of our modified Mirage2 theme.
+====Front Page====
+[[File:M2.png|1000px|border]]
+====View Item====
+[[File:M2-1.png|1000px|border]]
+====View Community====
+[[File:M2-2.png|1000px|border]]
+====ORCID Lookup====
+[[File:M2-3.png|1000px|border]]
+====Simple Submission Form====
+[[File:M2-4.png|1000px|border]]
 ===Help Links===
-*[[SUNScholar/Bootstrap Framework|Read about the bootstrap HTML5 and CSS3 framework]]
+*[http://github.com/DSpace/DSpace/tree/master/dspace-xmlui-mirage2 Read about Mirage 2 theme customisation on github.]
-*[https://github.com/DSpace/DSpace/tree/master/dspace-xmlui-mirage2 Read about Mirage 2 theme customisation on github.]
+*http://gianthatworks.com/entry/bootstrap-for-designers
-*[http://getbootstrap.com/customize/?id=915b32a8cbe419adfa1f Use the custom Maties theme as a bootstrap template.]
+*http://mdo.github.io/code-guide
-*[http://www.lavishbootstrap.com/ Create a custom bootstrap color scheme]
+*https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
+*https://github.com/twbs/bootstrap/blob/master/less/variables.less
+===Theme Archive===
+Below are links to archived themes that can be used as examples.
+*https://github.com/DSpace-Labs/Mirage2-Frozen
+*https://github.com/hamslaai/Mirage2
+*https://github.com/lannguyenbe/Mirage2
+*https://github.com/dbaker3/phw-mirage2
+===Reference===
+*http://wiki.duraspace.org/display/DSDOC5x/Mirage+2+Configuration+and+Customization
+[[Category:Customisation]]

Difference between revisions of "SUNScholar/XMLUI Theme/M2/Customisation"

Latest revision as of 11:31, 26 June 2016

Contents

Introduction

Please Note:

Procedures

Live Webapp Quick Changes

CSS changes

XSL changes

Screenshots

Front Page

View Item

View Community

ORCID Lookup

Simple Submission Form

Help Links

Theme Archive

Reference

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Tools