User Tools

Site Tools


en:user:gs3_sample_interface_modifications

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Next revisionBoth sides next revision
en:user:gs3_sample_interface_modifications [2020/04/24 10:33] anupamaen:user:gs3_sample_interface_modifications [2020/04/24 10:35] anupama
Line 177: Line 177:
  
  
-====== Changing the header background on classifier and document pages ======+==== Changing the header background on classifier and document pages =====
 Getting the gs_banner background in the header to change based on the browsing classifier page loaded, or at random for each document page loaded, can be achieved by a combination of XSL and javascript at the collection level. Getting the gs_banner background in the header to change based on the browsing classifier page loaded, or at random for each document page loaded, can be achieved by a combination of XSL and javascript at the collection level.
  
Line 189: Line 189:
 3. Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/script/custom-script.js''. 3. Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/script/custom-script.js''.
  
-  - Paste the following code into it:+a. Paste the following code into it:
  
 <code> <code>
Line 209: Line 209:
 }); });
 </code> </code>
-  - Adjust the line of code ''var numImages = n;'' above to replace //n// with the number suffix of the last of your images in your collection's ''images'' folder, which you determined in step 2.\\ For example, if you had 5 images in your collection's ''images'' folder, which would be named CL1.png to CL5.png, then the line of code would become ''var numImages = 5;''+ 
-  If the file extension of all your images is anything other than ''.jpg'', then change the __2 uses__ of ''.jpg'' in the above JavaScript code to your images' file extension instead. For example, if your images all have a ''.png'' extension, then the 2 affected lines of code would become\\ <code>$('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/'+gs.cgiParams["cl"]+'.png")');</code><code>$('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/CL'+randomNumber+'.png")');</code>+b. Adjust the line of code ''var numImages = n;'' above to replace //n// with the number suffix of the last of your images in your collection's ''images'' folder, which you determined in step 2.\\ For example, if you had 5 images in your collection's ''images'' folder, which would be named CL1.png to CL5.png, then the line of code would become ''var numImages = 5;''
 + 
 +c. If the file extension of all your images is anything other than ''.jpg'', then change the __2 uses__ of ''.jpg'' in the above JavaScript code to your images' file extension instead. For example, if your images all have a ''.png'' extension, then the 2 affected lines of code would become\\ <code>$('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/'+gs.cgiParams["cl"]+'.png")');</code><code>$('#gs_banner').css('background-image', 'url("/greenstone3/sites/localsite/collect/'+gs.cgiParams["c"]+'/images/CL'+randomNumber+'.png")');</code>
  
 4. Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/transform/layouts/header.xsl''. 4. Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/transform/layouts/header.xsl''.
en/user/gs3_sample_interface_modifications.txt · Last modified: 2023/03/13 01:46 by 127.0.0.1