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

From Libopedia
Jump to navigation Jump to search
m
m
 
(7 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
==Body and Navigation Layout==
 
==Body and Navigation Layout==
−
To re-arrange the document structure (swap body and sidebar) of the Mirage 2 theme will require expert web 2.0 design expertise which is beyond the scope of the author of this wiki.
+
To swap the sidebar position, swap the following sections in the <tt>'''page-structural.xsl'''</tt> file.
−
 
+
*Display main container (content)
−
It seems it may be possible by manipulating the loading order of the XSL files or by adding new attributes to the CSS files.
+
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==
 
==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
 +
**/
  
−
<pre>
+
$grid-gutter-width:          30px;
 
$screen-xs:                  480px !default;
 
$screen-xs:                  480px !default;
−
//** Deprecated `$screen-xs-min` as of v3.2.0
 
−
$screen-xs-min:              $screen-xs !default;
 
−
//** Deprecated `$screen-phone` as of v3.0.1
 
−
$screen-phone:              $screen-xs-min !default;
 
−
 
−
// Small screen / tablet
 
−
//** Deprecated `$screen-sm` as of v3.0.1
 
 
$screen-sm:                  768px !default;
 
$screen-sm:                  768px !default;
−
$screen-sm-min:              $screen-sm !default;
 
−
//** Deprecated `$screen-tablet` as of v3.0.1
 
−
$screen-tablet:              $screen-sm-min !default;
 
−
 
−
// Medium screen / desktop
 
−
//** Deprecated `$screen-md` as of v3.0.1
 
 
$screen-md:                  992px !default;
 
$screen-md:                  992px !default;
−
$screen-md-min:              $screen-md !default;
+
$screen-lg:                  1260px !default;
−
//** Deprecated `$screen-desktop` as of v3.0.1
 
−
$screen-desktop:            $screen-md-min !default;
 
−
 
 
−
// Large screen / wide desktop
 
−
//** Deprecated `$screen-lg` as of v3.0.1
 
−
$screen-lg:                  1200px !default;
 
−
$screen-lg-min:              $screen-lg !default;
 
−
//** Deprecated `$screen-lg-desktop` as of v3.0.1
 
−
$screen-lg-desktop:          $screen-lg-min !default;
 
−
 
 
−
// So media queries don't overlap when required, provide a maximum
 
−
$screen-xs-max:              ($screen-sm-min - 1) !default;
 
−
$screen-sm-max:              ($screen-md-min - 1) !default;
 
−
$screen-md-max:              ($screen-lg-min - 1) !default;
 
 
</pre>
 
</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

Retrieved from "http://wiki.lib.sun.ac.za/index.php?title=SUNScholar/XMLUI_Theme/M2/Customisation/Document_Structure&oldid=42762"