Differences

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

--- en:user:gs3_sample_interface_modifications [2020/04/24 10:33] – anupama
+++ en:user:gs3_sample_interface_modifications [2023/03/13 01:46] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 ====== Sample Greenstone3 Interface Modifications ======
@@ Line 177: / Line 180: @@
-====== 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.
@@ Line 189: / Line 192: @@
 . 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>
@@ Line 209: / Line 212: @@
 });
 </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>
 . Unless it already exists, use a text editor to create a file called ''web/sites/localsite/collect/YOUR-COLLECTION/transform/layouts/header.xsl''.
@@ Line 217: / Line 222: @@
   * loads an image of your choice from your collection's ''images'' folder to display in the ''gs_banner'' div element for any users who don't have JavaScript, and
   * refers to the ''custom-script.js'' file you created in step 3 above.
-If your collection didn't have its own ''header.xsl'' file yet, then copy all the following code into your new ''header.xsl'' to achieve this. But if you already created a ''header.xsl'' file in your collection for other purposes, then ensure the 2 crucial sections concerning the styling of ''gs_banner'' and the line loading the ''custom-script.js'' script in the following code are present in your ''header.xsl'' file.
+If your collection didn't have its own ''header.xsl'' file yet, then copy all the following code into your new ''header.xsl'' to achieve this. But if you already created a ''header.xsl'' file in your collection for other purposes, then ensure the 2 crucial sections concerning the css styling of ''gs_banner'' and the line loading the ''custom-script.js'' script in the following code are present in your ''header.xsl'' file.
 <code>
@@ Line 256: / Line 261: @@
 <code>background-image: url(/greenstone3/sites/localsite/collect/YOUR-COLLECTION/images/CL1.jpg);</code>
 For example, if your collection folder is called "albums" and you wanted your image ''CL3.png'' to be the default background image that appears in gs_banner, you'd set the line to: ''background-image: url(/greenstone3/sites/localsite/collect/albums/images/CL3.png);''