en:user:gs3_sample_interface_modifications
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:user:gs3_sample_interface_modifications [2019/10/21 22:29] – [Changing the collection description] kjdon | 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 ====== | ====== Sample Greenstone3 Interface Modifications ====== | ||
Line 177: | Line 180: | ||
+ | ==== 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. | ||
+ | 1. If they don't already exist, create the following subfolders within your collection folder that's located at GS3's '' | ||
+ | * '' | ||
+ | * '' | ||
+ | * '' | ||
+ | 2. In your collection' | ||
+ | 3. Unless it already exists, use a text editor to create a file called '' | ||
+ | a. Paste the following code into it: | ||
+ | < | ||
+ | $(' | ||
+ | |||
+ | // If we're on a classifier page, then header banner image will be the album image for that classifier | ||
+ | if(gs.cgiParams[" | ||
+ | |||
+ | $('# | ||
+ | } else { | ||
+ | // we're not on a classifier page (probably on a document page) | ||
+ | // In that case, the header banner image will be a randomly determined image | ||
+ | |||
+ | var numImages = n; | ||
+ | var randomNumber = Math.floor((Math.random() * numImages) + 1); | ||
+ | $('# | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | </ | ||
+ | b. Adjust the line of code '' | ||
+ | |||
+ | c. If the file extension of all your images is anything other than '' | ||
+ | |||
+ | 4. Unless it already exists, use a text editor to create a file called '' | ||
+ | |||
+ | a. Next ensure this '' | ||
+ | * loads an image of your choice from your collection' | ||
+ | * refers to the '' | ||
+ | If your collection didn't have its own '' | ||
+ | |||
+ | < | ||
+ | <?xml version=" | ||
+ | < | ||
+ | xmlns: | ||
+ | xmlns: | ||
+ | xmlns: | ||
+ | xmlns: | ||
+ | xmlns: | ||
+ | extension-element-prefixes=" | ||
+ | exclude-result-prefixes=" | ||
+ | |||
+ | <!-- This template should be overridden in the collectionConfig.xml file if you want to add extra header content --> | ||
+ | < | ||
+ | |||
+ | <script type=" | ||
+ | |||
+ | < | ||
+ | | ||
+ | #gs_banner { | ||
+ | | ||
+ | padding-top: | ||
+ | } | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | b. In your header.xsl, now adjust the following line to refer to your collection folder' | ||
+ | < | ||
+ | <script type=" | ||
+ | </ | ||
+ | c. Also adjust the following line to refer to your collection folder' | ||
+ | < | ||
+ | For example, if your collection folder is called " | ||
en/user/gs3_sample_interface_modifications.1571696954.txt.gz · Last modified: 2019/10/21 22:29 by kjdon