[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!

[amanda_b_birket]

Is this April meeting a user group for admins? I am hitting alot of road blocks to customize our canvas catalog to meet our needs and would love to network with others who have accomplished this.

Thanks

Amanda

[jsowalsk]

It is primarily yes, for admins.

[RachelGreene]

Very late to the party, but wanted to chime in and say this was very insightful! Over the past few months we have redesigned our Catalog instance with unique branding down to the course level in some cases. 

https://cpe.clemson.edu/ (main)

https://cpe.clemson.edu/browse/extension (sub1)

https://cpe.clemson.edu/browse/clemsoncpe (sub2)

https://cpe.clemson.edu/browse/extension/horticulture/cultivating-communities (course)

I am however having trouble with the dashboard and was wondering if anyone had insight for adjusting the colors of the buttons there and on the individual course listing pages.. (attached)

[jsowalsk]

Very cool! Do you have a team of developers that are helping you develop the platform or how did you know how to customize everything?

[RachelGreene]

No team, mainly me (Graphic Designer) so that means a lot!

And lots of research, tweaking code and inspiration from the above links, seeing what is possible.  

[jsowalsk]

Well, you did a great job! I give you a ton of credit.

[hechla]

Wow... can you share the code you used for the hover effect on the course listings?

[RachelGreene]

Sure! You can adjust the speed of the transition (ease-in-out) and the enlargement (scale).
CSS:

.product-link:hover {
transition: all .2s ease-in-out;
transform: scale(1.05);
}

[hechla]

@RachelGreene - so, I'm noticing that the ease-out part of the transition effect isn't working. It just "pops" out of the effect. I'm seeing it on your site as well as mine. I've tried playing with it to the nth degree but nothing seems to work. It must be in how Instructure is implementing css.

[RachelGreene]

I see what you mean, it snaps back rather quickly. Try this out:

.product-link:hover {
transform: scale(1.05);
color: #2E1A47
}

.product-link {
transition: transform 0.5s ease;
transform: none;
color: #000000;
}
The product.link targets the element when it's not in the hover state to ease it back to normal scale.

I just updated ours with this and I like how much smoother it is so thank you! (adjust the numbers as desired)

[hechla]

That worked great Rachel. Thanks. I haven't done a lot with transitions in the past. It's an area of CSS I'm very unfamiliar with.

[hechla]

This is an awesome thread and we always like to customize our environments. I've done a little bit in Catalog but so far all of it has been what we've gotten from our implementation consultant. I'm getting some good ideas from this thread and would love to see some more code examples. I'll double check if I have anything that's not already been mentioned. We're not "live" yet with our catalog so I can't share the link yet. 

[hechla]

For those that have added menu links at the top of Catalog, it looks like nobody has been able to figure out how to make that nav menu responsive. I'm working on it but I haven't had any luck yet. But I was wondering if anyone out there has solved that? 

[AmandaJoykin]

Hi,  

We are new to using Catalog and was hoping someone could help advise with how to add an image and text in the header section as what is shown here as an example:  https://wpi.catalog.instructure.com 

I have added some links already using code from github, https://github.com/unsupported/catalog but need advice on how to add some text under the logo and above the search bar area.

Many thanks!

UPDATE:  Located files that helped me work this out here: https://community.canvaslms.com/t5/Canvas-Catalog/How-do-I-add-a-logo-CSS-JavaScript-or-HTML-file-to...

[jsowalsk]

Hi @AmandaJoykin I can put you in touch with WPI to help you with this. Please private message me so I can send you their contact information.

[AmandaJoykin]

Thanks! have sent you a private message.

Amanda

[jsowalsk]

@AmandaJoykin Your welcome. I just replied.