cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Page Banners - HTML or PNG file?

I am working on some training courses and am using banner images for each individual item in a module (i.e. Pages, Discussions, Quizzes, etc.). I am wondering if the best approach for adding banners to a template course that might be used by many instructors is with image files or should this be something done in the HTML editor? One good thing about doing it in the HTML is that then the banner text can be editable by the user through the RCE. The problem with that is that the user may try to add too much text and make the banner look weird. Also, a benefit of using image files is that it's easier for individuals to customize their banners as most people are more familiar with using photo editing software than they are with manipulating HTML code. Thoughts? Here is an example of the banner image file that I'm using. I edit the text in Photoshop and export the PNG files. 

Screenshot of Canvas page with banner image.

32 Replies
Highlighted

Hi kylecage

Yes, yes there is. Open the HTML Editor, and change the width of the image from pixels to percentages. For example, instead of "width=600px", change to "width=100%". Then that banner will size to 100% of the available screen size.

I hope this helps,

Kelley

Highlighted

Hi Jian,

Is there a way to make these banner image files responsive somehow? Mine are not - see screencast attached.

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

Highlighted

Great use of tables, snugent !

Since it is only one column, it is also accessible.

Kelley

Highlighted
Lamplighter II

I created a page template for instructors. The header is linear table (just one column with three rows). The first row holds the college's logo with alt text. The second and third rows are editable text that instructors can change the text easily without switching to HTML view. I edited the code so the background colors display our official colors and text color is adjusted for optional contrast. Yea it isn't exactly how you should use tables but since the table is linear with no additional columns it should accessible. 

example header

Highlighted

They really are nice! And any ID worth his salt is too busy to be above taking advantage of ready-made content.

I've got to work up some better examples, and visit our PR department for some negotiating.

Kelley

Highlighted

kelley.meeusen@cptc.edu, I didn't make those. Found them at (HE) Designing and Teaching for Impact in Online Courses - Canvas Network | Free online courses | MO.... I just saved them. They look really nice. Smiley Happy

Su

Highlighted

kylecage, here is one example of my banners.

Banner

Su

Highlighted

Now those are nice, jsu1@utk.edu

You have a much better PR department, or perhaps they are less hands-on!

KLM

Highlighted

kylecage

Check out the set of banners in this course: Designing and Teaching for Impact in Online Courses.

Banner

Banner

Banner

The course packet is downloadable through Canvas Commons. (Search for "Designing and Teaching for Impact in Online Courses")

Su

Highlighted

Kyle:

Don't blame me, our PR department determined the look, I just converted to HTML..........

HTML for Front Page Banner:

<table style="background-color: #502d7f; border-color: #502d7f; width: 100%; height: 220px;" cellspacing="4" cellpadding="4">
<tbody>
<tr style="text-align: center;">
<td style="width: 30%; padding: 10px;"><img src="https://cptc.instructure.com/courses/1416280/files/75356490/download" alt="cptc-logo-white.png" width="199" height="85" data-api-endpoint="https://cptc.instructure.com/api/v1/courses/1416280/files/75356490" data-api-returntype="File" /></td>
<td style="width: 40%; padding: 10px;">
<p style="text-align: center;"><span style="font-size: 24pt; color: #bed600;">CPTC Professional Development Series</span></p>
<p> </p>
<p style="text-align: center;"><span style="font-size: 24pt; color: #bed600;">Accessibility 101: Principles of Inclusive Design<br /></span></p>
</td>
<td style="width: 30%; padding: 10px;"><img src="https://cptc.instructure.com/courses/1416280/files/75356489/download" alt="Disability_Icon_grid.png" data-api-endpoint="https://cptc.instructure.com/api/v1/courses/1416280/files/75356489" data-api-returntype="File" /></td>
</tr>
</tbody>
</table>

Oops, missed a couple lines of code on the first copy/paste.............. Good now.

Kelley