Difference between revisions of "SUNScholar/XMLUI Theme/M1/Styling"

From Libopedia
Jump to navigation Jump to search
m
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<center>
 +
'''[[SUNScholar/XMLUI_Theme/M1/Old_Pages|Back to Mirage 1 Modification]]'''
 +
</center>
 +
 
==Modify site CSS styles==
 
==Modify site CSS styles==
  '''Find a good web 2.0 developer to help you with this, this is the core of the repository website styling !!'''
+
  <font color="red">'''Find a good web 2.0 developer to help you with this, this is the core of repository website styling !!'''</font>
  
 
Type the following to access the source folder. Modify the css files to suit yourself.
 
Type the following to access the source folder. Modify the css files to suit yourself.
  cd /home/dspace/dspace-1.8.2-src-release/dspace/modules/xmlui/src/main/webapp/themes/Mytheme/lib/css
+
  cd $HOME/<u>[[SUNScholar/Install_DSpace/S03#Step_3.2|source]]</u>/dspace/modules/xmlui/src/main/webapp/themes/Mytheme/lib/css
 
 
To do quick changes temporary changes, you can modify the style by accessing files in the live folder.
 
  
<font color="red">'''Make sure to copy the files back to the source folder to make the changes permanent.'''</font>
+
To do quick temporary changes, you can modify the style by accessing files in the live folder.
  
  /home/dspace/webapps/xmlui/themes/Mytheme/lib/css
+
  $HOME/webapps/xmlui/themes/Mytheme/lib/css
  
;CSS and HTML help links
+
'''Make sure to copy the files back to the source folder to make the changes permanent.'''
* http://learnlayout.com
 
* http://www.csstutorial.net
 
* http://www.echoecho.com/css.htm
 
* http://htmldog.com
 
* http://htmlhelp.com/reference/css
 
* http://www.fontsquirrel.com
 
* http://validator.w3.org
 
* http://jigsaw.w3.org/css-validator
 
  
==CSS styling of DSpace XMLUI, Tips and Tricks==
+
==CSS Tips and Tricks==
 
===Firefox===
 
===Firefox===
 
Download and install the latest version of Firefox from:
 
Download and install the latest version of Firefox from:
 
  http://www.mozilla.org/en-US/firefox/new/
 
  http://www.mozilla.org/en-US/firefox/new/
=== Determining current style elements used===
+
===Determining current style elements used===
 
Right-click on any part of the website to view the CSS element detail. You can change things in real time per item, in the right hand pane, to see what it will look like.
 
Right-click on any part of the website to view the CSS element detail. You can change things in real time per item, in the right hand pane, to see what it will look like.
 +
 +
Please refer to: http://www.myacpl.org/koha/a-quick-firebug-tip-for-editing-css
  
 
See screenshots below.
 
See screenshots below.
Line 33: Line 29:
  
 
[[File:Css-element-1.png]]
 
[[File:Css-element-1.png]]
 
'''[[SUNScholar/Theme/Modify|Back to Theme Modification]]'''
 

Latest revision as of 20:31, 15 August 2015

Back to Mirage 1 Modification

Modify site CSS styles

Find a good web 2.0 developer to help you with this, this is the core of repository website styling !!

Type the following to access the source folder. Modify the css files to suit yourself.

cd $HOME/source/dspace/modules/xmlui/src/main/webapp/themes/Mytheme/lib/css

To do quick temporary changes, you can modify the style by accessing files in the live folder.

$HOME/webapps/xmlui/themes/Mytheme/lib/css

Make sure to copy the files back to the source folder to make the changes permanent.

CSS Tips and Tricks

Firefox

Download and install the latest version of Firefox from:

http://www.mozilla.org/en-US/firefox/new/

Determining current style elements used

Right-click on any part of the website to view the CSS element detail. You can change things in real time per item, in the right hand pane, to see what it will look like.

Please refer to: http://www.myacpl.org/koha/a-quick-firebug-tip-for-editing-css

See screenshots below.

Css-element.png

Css-element-1.png