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

From Libopedia
Jump to navigation Jump to search
m
m
 
(11 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
</center>
 
</center>
  
To re-arrange the document structure of the Mirage 2 theme will require expert web 2.0 design expertise which is beyond the scope of the author of this wiki.
+
==Body and Navigation Layout==
 +
To swap the sidebar position, swap the following sections in the <tt>'''page-structural.xsl'''</tt> file.
 +
*Display main container (content)
 +
https://github.com/DSpace/DSpace/blob/master/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl#L104-L105
 +
*Display options (sidebar)
 +
https://github.com/DSpace/DSpace/blob/master/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl#L111-L112
 +
==Responsive Layouts==
 +
Edit the following file:
 +
  nano $HOME/{{Source}}/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_bootstrap_variables.scss
 +
Go to the bottom of the file and add the following:
 +
<pre>
 +
/**
 +
* Screen sizes CSS
 +
**/
  
It seems it may be possible by manipulating the loading order of the XSL files or adding new attributes to the CSS files.
+
$grid-gutter-width:          30px;
 +
$screen-xs:                  480px !default;
 +
$screen-sm:                  768px !default;
 +
$screen-md:                  992px !default;
 +
$screen-lg:                  1260px !default;
 +
</pre>
 +
''Tip: You can test layouts with the Firefox responsive design view feature: https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View''
 +
[[Category:Customisation]]

Latest revision as of 12:12, 28 May 2016

Back to Mirage 2 Customisation

Body and Navigation Layout

To swap the sidebar position, swap the following sections in the page-structural.xsl file.

  • Display main container (content)
https://github.com/DSpace/DSpace/blob/master/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl#L104-L105
  • Display options (sidebar)
https://github.com/DSpace/DSpace/blob/master/dspace-xmlui-mirage2/src/main/webapp/xsl/core/page-structure.xsl#L111-L112

Responsive Layouts

Edit the following file:

 nano $HOME/source/dspace-xmlui-mirage2/src/main/webapp/styles/classic_mirage_color_scheme/_bootstrap_variables.scss

Go to the bottom of the file and add the following:

/**
* Screen sizes CSS
**/

$grid-gutter-width:          30px;
$screen-xs:                  480px !default;
$screen-sm:                  768px !default;
$screen-md:                  992px !default;
$screen-lg:                  1260px !default;

Tip: You can test layouts with the Firefox responsive design view feature: https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View