[ARCHIVED] Does your institution customize your Canvas Catalog?

[jsowalsk]

Good morning everyone,

I am just wondering who customized their Catalog such as by:

• Adding dropdown menus
• Personalized footer
• Course Card
• Shopping Cart
• Etc.

Would love for you to share Catalog URL and explain how it has been customized.

Thank you in advance,

Jessica

[jwelchans · Accepted solution]

We are just setting up our Catalog this semester but are interested in customization.

We are migrating our training courses from another platform and are looking for ways to hang on to our aspects of gamification, leaderboards, and branding.

Eager to see what gets shared here!

[jwelchans · Accepted solution]

We are just setting up our Catalog this semester but are interested in customization.

We are migrating our training courses from another platform and are looking for ways to hang on to our aspects of gamification, leaderboards, and branding.

Eager to see what gets shared here!

[jsowalsk]

We have gotten most of our customization from  @jazemlya ‌ at Indiana University! Thanks, Justin!

[lftapper]

hi Jessica,

I was admiring both IU and Maryland's CSS customizations since we got access to our Catalog instance earlier this week. So I was pretty lucky to stumble across this post today because I am having a hard time getting the header working properly (with the 2 different colors for logo area and subtitle). Any suggestions from you or  @jazemlya ? This is what ours looks like now: https://wpi.catalog.instructure.com 

Thanks so much!

Lindsey

[jsowalsk]

I am always willing to help another person from MA (born and raised). I will message you with my email.

[jsowalsk]

I sent you an email.

[KathyPalm]

We're newbies to Catalog customisation, but looking to do something like your setup Lindsey with linking to different sub-catalogs from the front page. Does anyone have any tips on that? Any input greatly appreciated!! 

[kathy_harris]

I would love to learn more about how to customize, too!! I love the idea of sharing links to your Catalog. Please share your links so I can see what you have done.

Here is what we have done at USU Extension.

We haven't customized, really, just added branding. I want to do more.

[dljoyork]

Kathy,

I just came across your post and looked at your site.  Here is ours:  learn.extension.okstate.edu

I haven't met any others so far who are using Canvas Catalog for extension courses.  It would be great to talk more.

Joan

[michelle_steven]

Have organizations been able to add a shopping cart? That's been one of our top wish list items at USU Extension!

[jsowalsk]

Ours is University of Maryland College Park Catalog.

[michelle_steven]

I need to make an account and play around with it. So, your students can register for multiple courses add them to the shopping cart and pay for them all at once?  @kathy_harris ‌ have you had a chance to play with this yet to see if it's what we are looking for?

[jsowalsk]

I would suggest making a note of this on the feature survey. However, I know that this is on the list since other institutions suggested it. 

[jsowalsk]

Unfortunately, we haven't.

[bernstlc]

Boston College (Boston College Catalog) has customized the center "feature-region" between the header and the search/refine bar, but not much else in production.

In Beta (Boston College Catalog BETA) I played around with a couple of subtle customizations. One was making the top-left header logo always link to our main Catalog page. If you use domained subcatalogs (which we have to for our various payment storefronts), this logo defaults to the subcatalog URL. So a student who browses into one of our Nursing courses cannot click out to the main Catalog again.

We also added an "Accessibility" link to the "Course Catalog | Terms of Use | Privacy Policy" list on the Catalog footer.

Happy to share the JavaScript if anyone is curious.

[sfarris1]

Hi Leigh, 

I love that you put "New Users" above the registration fields in Catalog. Would you mind sharing your script for this?

Thanks so much!

[rsasso]

Hi Leigh,

Was wondering if you'd be willing to share the code you used to add the "Accessibility" link in the Catalog footer?

Thanks in advance,

Rosie

[hechla]

Can you share the code you used to add the Accessibility link to the footer? Please?

[RachelGreene]

Hi! I can help. This JavaScript code will add a link after "Privacy Policy":) Just add your link in place of "link".

$(document).ready(function() {
$('.piped-list').append('<li><a href="link">Accessibility</a></li>');
}); 

[bernstlc]

On the subject of customization, has any attempted to change the text of the built-in "Categories" dropdown? We at Boston College are interested in using this feature to display our list of subcatalogs (we probably won't be using course-specific tags) and would like the dropdown button to read "Select Catalog" or something like that, since "Categories" is a bit too vague.

I am able to target and rename the similar-looking "Refine" button with the custom JavaScript below, but the same code targeting the "Categories" button seems to have no effect. Any ideas?

$("#search-refine-button--refine > div > div.search-refine-button__text").text("Filter/Sort");

$("#search-refine-button--categories > div > div.search-refine-button__text").text("Select Catalog");

[trinaadams]

Thanks for posting! We are continuing to look for ways to customize our subcatalogs for various clients. We are a land grant university with research and extension opportunities. Our users do not recognize our non-credit education efforts when they are visually tied to the parent catalog of the for-credit learning opportunities.   @bernstlc ‌ catalog user sub catalogs custom 

[dljoyork]

We are also interested in adding a Categories dropdown where we would list our subcatalogs.  I'd also like to remove the default Refine dropdown, as those search options do not work well for us.  All of our courses are paid, have certificates, and are continuously open.

We did just add a banner, yay!  OSU Extension

[jsowalsk]

 @jazemlya ‌/ expand.iu.edu created a dropdown that we use -- maybe reach out to them?

[hechla]

That's so strange that it doesn't work for Categories. I just tried it on my catalog and I tried tweaking a few things but I couldn't get it to work either. 😞

[RachelGreene]

Hi! After much trial and error and searching for an answer for our catalog- I have found a solution (or at least a workaround) using CSS that hides 'Categories', and adds new text after: 

/* Hide 'Categories' text */
#search-refine-button--categories .search-refine-button__text {
visibility: hidden; /* Hide the original text */
}

/* Replace 'Categories' text*/
#search-refine-button--categories .search-refine-button__text::after {
content: "Topics";
visibility: visible;
}

I say workaround as the button remains the width of all the words (as Categories is hidden, not removed). If you have an outline or any additional styling on those buttons, keep that in mind. It works for us and what we wanted to accomplish: cpe.clemson.edu/browse/extension 

 

[fosterl]

Have any of you smart people tried to change the "Enroll" button text to something else? For example, when you go to a course in Catalog there's a button that says "$15 Enroll" like this:

We'd love to change this for some courses to "$15 Register", either in a subcatalog on per course. Any ideas?

Thanks!

[jsowalsk]

We would love to know about this too. We have not customized this.

[gpiazza]

Where are you storing your images for the custom banner script?  Amazon S3?  Azure?  Do you suggest a different solution?

Thanks!

[jsowalsk]

We are hosting them on AWS.

[dljoyork]

Here are our Catalogs:  https://osuextension.catalog.instructure.com/ and https://osuextension.catalog.instructure.com/browse/internal

We added headers using JS.   Now I would really like to remove the Refine button.  Its search categories are not relevant to our courses.  Has anyone been able to remove it?

Thanks,

Joan

[jsowalsk]

Unfortunately, we have not been able too.

[woodwardtw · Accepted solution]

You could do this in the custom javascript area. It should remove the button from view. 

$("#search-refine-button--refine").addClass('hidden');

[dljoyork]

Awesome Woodwardtw, it works!  Thank you so much!

[mando-fr]

Hi!!

this is really great. i have one question, is theres a place when i can see some java code used to modify?

i think it can help to get ideas and implement them.

[jsowalsk]

Unfortunately, no. You would have to keep a log outside of Catalog for this.

[hechla]

Or you could keep it all in the Catalog customizations just commented out.

[bromanski]

Has anyone successfully made a "Help" button on the Catalog landing page, similar to the Canvas "Help" button?  It would be very helpful if we could have a Request For Information Form on this page like a website.

[jsowalsk]

We have only successfully added this information to the footer on the landing page.

[dljoyork]

Has anyone been able to customize the user defined fields in the registration form?  We'd like to use a dropdown with options.  Right now it's a "text" question and people are putting in all kinds of things.  Can this be done with custom JS?  We need better data!

[jsowalsk]

Unfortunately, no. Feel free to add this to the agenda for our April meeting.