[ARCHIVED] Embed a menu bar file onto multiple pages

[DonAlbin]

I have created weekly "Calendar Pages" for my students.  I would like to embed into each of these pages, onto the top, one single menu bar so that students can quickly click on any date in the menu bar and go to the desired page.  Is there a way to do this so that every page shows the same menu on top?

[kmeeusen · Accepted solution]

Hi @DonAlbin 

If you are familiar with the HTML editor in Canvas pages, this can be done with a bit of HTML coding, and using the "Duplicate Page" function. Essentially you would..........

• Create a new Canvas page. Title the page for the first week.
• Duplicate the page for the appropriate numbers of weeks, titling each duplicate for its appropriate week.How do I duplicate a page in a course?
• Create a row of buttons across the top (see button html code snippets below) with for each week. For easier consistency, I suggest putting the buttons in the cells of a single-row table.
• Link each button to its appropriate page.
• On the page you created the row of buttons, copy the html code for the entire row of buttons. If the buttons are in a table, include the code for the table.
• Open the HTML editor for each subsequent page, and paste the code in and save.
• Add any desired text below each button row - instructions, assignments, etc.
• Place pages where desired, like in each week's module.

Button code snippets

Below are examples of buttons and the code snippets used to create them.The button target code (where it will take you when clicked) is noted by bold red text, the button's visible title is noted in bold blue text and the button length is noted in bold green text.

<p style="text-align: left;"><a class="Button" style="width: 20%;" title="Button -- Normal" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Normal</strong></a></p>

<p style="text-align: left;"><a class="Button Button--primary" style="width: 20%;" title="Button -- Primary" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Primary</strong></a></p>

<p style="text-align: left;"><a class="Button Button--secondary" style="width: 20%;" title="Button -- Secondary" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Secondary</strong></a></p>

<p style="text-align: left;"><a class="Button Button--success" style="width: 20%;" title="Button -- success" href="/courses/1165489/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Success</strong></a></p>

<p style="text-align: left;"><a class="Button Button--warning" style="width: 20%;" title="Button -- warning" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Warning</strong></a></p>

<p style="text-align: left;"><a class="Button Button--danger" style="width: 20%;" title="Button -- danger" href="/courses/1165489/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Danger</strong></a></p>

TIPS

• The key to which type of button is displayed is the following code in the button: <a class="Button Button--danger". The first use of the word "button" creates a button, and the second "button" followed by the dashes and a button type creates a specific button style. So if you have copied the code for the "Button - - Danger" shown above, look at it and decide that the dark red is a bit much, you can simply substitute "Danger" for "Warning" or any other of the styles without having to replace the entire code.
• These buttons are designed for in-course navigation (the "target"). To acquire the URL for the target, first navigate to that page in Canvas, then copy everything in the URL from "/Courses" on. This is what you will paste in the code sections identified in red above.
• In Edit mode on your page, first identify where you want to place the button, and take note of the text above there. then, when you switch to the HTML Editor, you can scroll down to where you see that text, insert your cursor and hit "enter a couple time to drop below that point before pasting in the code. This helps you to both properly place the button, and isolate the code so that you can make revisions.
• Often you will find yourself needing the same button in more than one place in your classroom. Create an unpublished Canvas page (or even a Word document) that you can paste the button's code into for easy access the next time you need it.
• In Edit mode, buttons can be selected and copied, then pasted into  another Canvas location without needing to go into the HTML Editor.
• The title of a button can also be edited directly from the Rich Content Editor, without having to go into the HTML Editor.

How To Use This Code

• Pick the style of button you would like to place into a Canvas page, and select and copy the code snippet below it;
• Navigate to a page of a Canvas Course (or create a new page) where you would like to add the button and click "Edit",
• Click HTML Editor, and scroll down to where you want the button to appear. See my tip above concerning identifying the correct location before opening the HTML Editor.
• Click Enter a couple times to clear a bit of space, and paste the code,
• Replace the button target and visible title,
• Click "Save"

I hope this helps,

Kelley

[kmeeusen · Accepted solution]

Hi @DonAlbin 

If you are familiar with the HTML editor in Canvas pages, this can be done with a bit of HTML coding, and using the "Duplicate Page" function. Essentially you would..........

• Create a new Canvas page. Title the page for the first week.
• Duplicate the page for the appropriate numbers of weeks, titling each duplicate for its appropriate week.How do I duplicate a page in a course?
• Create a row of buttons across the top (see button html code snippets below) with for each week. For easier consistency, I suggest putting the buttons in the cells of a single-row table.
• Link each button to its appropriate page.
• On the page you created the row of buttons, copy the html code for the entire row of buttons. If the buttons are in a table, include the code for the table.
• Open the HTML editor for each subsequent page, and paste the code in and save.
• Add any desired text below each button row - instructions, assignments, etc.
• Place pages where desired, like in each week's module.

Button code snippets

Below are examples of buttons and the code snippets used to create them.The button target code (where it will take you when clicked) is noted by bold red text, the button's visible title is noted in bold blue text and the button length is noted in bold green text.

<p style="text-align: left;"><a class="Button" style="width: 20%;" title="Button -- Normal" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Normal</strong></a></p>

<p style="text-align: left;"><a class="Button Button--primary" style="width: 20%;" title="Button -- Primary" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Primary</strong></a></p>

<p style="text-align: left;"><a class="Button Button--secondary" style="width: 20%;" title="Button -- Secondary" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Secondary</strong></a></p>

<p style="text-align: left;"><a class="Button Button--success" style="width: 20%;" title="Button -- success" href="/courses/1165489/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Success</strong></a></p>

<p style="text-align: left;"><a class="Button Button--warning" style="width: 20%;" title="Button -- warning" href="$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Warning</strong></a></p>

<p style="text-align: left;"><a class="Button Button--danger" style="width: 20%;" title="Button -- danger" href="/courses/1165489/pages/add-a-navigation-button-to-a-page" target="_blank" data-api-endpoint="https://cptc.instructure.com/api/v1$WIKI_REFERENCE$/pages/add-a-navigation-button-to-a-page" data-api-returntype="Page"><strong>Button -- Danger</strong></a></p>

TIPS

• The key to which type of button is displayed is the following code in the button: <a class="Button Button--danger". The first use of the word "button" creates a button, and the second "button" followed by the dashes and a button type creates a specific button style. So if you have copied the code for the "Button - - Danger" shown above, look at it and decide that the dark red is a bit much, you can simply substitute "Danger" for "Warning" or any other of the styles without having to replace the entire code.
• These buttons are designed for in-course navigation (the "target"). To acquire the URL for the target, first navigate to that page in Canvas, then copy everything in the URL from "/Courses" on. This is what you will paste in the code sections identified in red above.
• In Edit mode on your page, first identify where you want to place the button, and take note of the text above there. then, when you switch to the HTML Editor, you can scroll down to where you see that text, insert your cursor and hit "enter a couple time to drop below that point before pasting in the code. This helps you to both properly place the button, and isolate the code so that you can make revisions.
• Often you will find yourself needing the same button in more than one place in your classroom. Create an unpublished Canvas page (or even a Word document) that you can paste the button's code into for easy access the next time you need it.
• In Edit mode, buttons can be selected and copied, then pasted into  another Canvas location without needing to go into the HTML Editor.
• The title of a button can also be edited directly from the Rich Content Editor, without having to go into the HTML Editor.

How To Use This Code

• Pick the style of button you would like to place into a Canvas page, and select and copy the code snippet below it;
• Navigate to a page of a Canvas Course (or create a new page) where you would like to add the button and click "Edit",
• Click HTML Editor, and scroll down to where you want the button to appear. See my tip above concerning identifying the correct location before opening the HTML Editor.
• Click Enter a couple times to clear a bit of space, and paste the code,
• Replace the button target and visible title,
• Click "Save"

I hope this helps,

Kelley

[DonAlbin]

Thank you for the thoughtful response.  Sadly, it doesn't really help, as I already know how to do all of this, and have done all of this.

Here's the issue:  I want to have the code for the menu bar exist in only one place.  Then I want to use some sort of an #Include statement so that it appears on every page.  That way, when I modify the menu bar, the new version appears on every page.  Is this possible in Canvas?

[James · Accepted solution]

@DonAlbin 

There are ways.

The Canvas-preferred way is to host the the page on an external site that has SSL support (https, not http) and then use the embed feature to embed it in an iframe. The problem with this is that you probably want it to look like it belongs in Canvas and content in an iframe is sandboxed (for security purposes) and cannot see the styling applied to the parent. That means that you would need to do all of the styling yourself. You can also add any JavaScript that you want here.

There may be a way to embed the content within Canvas. To do this, you create an HTML file and upload it into your course Files. Then you embed that page in an iframe at the top of each page. For example, I was able to go the course Files, find the file I wanted to include, and then right click and copy the location. It had something like .../files/123456/download?download_frd=1. You need to remove the ?download_frd from the src for the iframe. This still suffers from the iframe sandboxing, so you will want to include the CSS within that file to make your buttons look right.

The second way is a hack. There was a big discussion about it and it has security implications if you intend to use JavaScript.

[DonAlbin]

Thank you.  Clearly this will be difficult.  I appreciate your helpful response.

[DonAlbin]

Actually, I got this to work using your second method.  Right now, I am creating the table of links in Microsoft Word and saving it as an HTML file.  Then, I'm uploading to my Canvas files.  Then I'm adding an iframe to include this file onto multiple pages.

I had to add the following code to the beginning of my HTML file so as to force all links from the iframe to open in the parent window:

<head><base href="https://myschool.instructure.com/courses/mycoursenumber/" target="_PARENT"></head>

Your help is greatly appreciated.

[KOliveras]

@DonAlbin I do something similar in that I want "quick navigation" available on many different pages while avoiding the pain of having to modify each and every file should I change one link. 

I didn't like the iFrame solution because of sizing/layout issues.  My ultimate solution involved using the Python wrapper for the Canvas API and Jinja2 to automate this process for me.  I've included the links to resources that helped me get going with this.  I'm happy to share a specific example and workflow if you're interested.  Just let me know (it will take me a little bit of time to document and get it into a "sharable state"). 

Getting Started Links:

• Python Wrapper: https://canvasapi.readthedocs.io/en/stable/course-ref.html
• Blog about using the Canvas API: https://benjaminjchapman.wordpress.com/2018/02/21/experimenting-with-templating-canvas-courses/
• Canvas API Documentation: https://canvas.instructure.com/doc/api/index.html

[James]

@KOliveras 

Thanks for sharing those resources.

I do a lot of templating myself (using Node or PHP) but it's very customized to my situation and not a general solution I could share. One of the things I did was to go through the bottom of every page and add links to all of the sections in that chapter and then to the top page for all of the chapters. Once I had all that working and my content updated, I decided I didn't like it and used the code to remove all of it. Another part has links to all the calculus videos for each section. Those are in a spreadsheet and I pull the information from the spreadsheet to automatically populate the pages with the relevant videos for that section. Yes, I know I could have created all of those by hand, but I hate repetitive clicking.

[KOliveras]

@James I'm there with you on the repetitive clicking.  When I get a new course prep, I really hate all of the clicking to build out the modules and and pages.  So I scaffold the everything in a spreadsheet, and then use the API to automatically build it all out.  I'm definitely not a skilled or proficient coder/developer, but just getting this little python routine in place has increased the life-expectency of my mouse at least 10-fold! 😄

[DonAlbin]

This sounds like a great solution.  It's a little much for me right now, but I had been concerned about iframe sizing.  I'll see how it goes, and then try your solution if I'm unsatisfied.

Thank you for your help.