Document usage of this Theme

[laceysanderson]

This issue will contain documentation for how to install, configure and customize this theme for your site.

[laceysanderson]

How to extend this theme for your own site

Note: These instructions show you how to create your own customized copy of this theme. The recommended approach for Drupal is to make a subtheme and place your custom code in there. However, this process is harder to explain to new Drupal users and has some snags that new Drupal users often get stuck on. Creating a custom copy is just as effective as a subtheme though it can be harder to incorporate updates from the original theme.

1. Download the Lexus Zymphonies Theme and unpack it in your /var/www/html/sites/all/themes directory.
2. Click on Fork at the top of this repository to create your own copy of the theme. This allows you to save your history of changes and provide credit to the original theme.
3. On your fork of this theme (look at the URL and make sure your github name is in it), click the "Code" button to get the link to clone your copy. Then in your /var/www/html/sites/all/themes directory use git clone [url you copied] to download the code with history.
4. Enable both the Lexus Zymphonies and Divseek Canada Themes by going to your website Admin > Appearance. The DivSeek Canada theme should be the default.

Change the Top Menu

The top menu on all pages can be configured through the Drupal Menu UI. On your website, go to Admin > Structure > Menu: the "Main menu" contains the links in the top menu on the site. By going to list links you can see all that are available. You can use the "Add link" to add items to this menu. To trigger the drop-down menu style, nest an item under another and then edit the parent and enable "Show as expanded"

Slideshow on Front Page (OPTIONAL)

In the screenshot for this theme you see a sunflower picture under the menu. This is actually a slideshow! When you first enable the theme you will not see a slideshow because it first needs to be installed and configured. *This is optional!

There is a great tutorial for the Lexus Zymphonies theme for installing and populating the slideshow. These instructions apply to this theme as well as that functionality is inherited. Here is the tutorial: https://www.zymphonies.com/blog/nivo-slider-installation

NOTE: We tested with Nivo Slider library 3.2 in your sites/all/libraries directory and the Drupal Nivo Slider 7.x-1.12 in your sites/all/modules directory. You need both.

Blue Descriptive sections under the slideshow (OPTIONAL)

Create blocks in Admin > Structure > Blocks with the content you want and place them in the top widget sections (one block per section). Here is a tutorial for how to create blocks using the UI in Drupal 7: https://www.inmotionhosting.com/support/edu/drupal/create-block/. The following is an example of the block content to get the same styling we have used:

<div class="content">
<p><i class="fas fa-seedling fa-3x fa-inverse"></i></p>
<h2>Organized by Breeders</h2>
<p>Resulting from a Genome Canada Emerging Issues grant led by breeders, the purpose has always been to support breeders as they continue to integrate public data into their breeding programs.</p>
<p><a href="about-us#breeders">Read more</a></p>
</div>

The <i class="fas fa-seedling fa-3x fa-inverse"></i> describes a FontAwesome icon (in this case a seedling). You can search for your own icons on FontAwesome and switch this out for any of the 8K+ free options. The fa-inverse class switches it to be an inverted version of the icon.