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

I'm a faculty who is not scared of div tags... However, I find html editing in Canvas to be unexpectedly frustrating sometimes.

Last semester, I tried several ways of showing a background image with text on top, including using a div, and the process was just borked no matter how I tried to do it. I tried again this semester and found that if you use background-image: url() and insert a url ~without~ single quotes, Canvas will add the single quotes around the url for you. After saving the page, the image will show up just as it should. However... if you go back to edit the html and save the page again, Canvas will strip out the entire background-image: url() code (without warning you).

I know I ought to use divs for for this sort of thing... but glitches like this do not make it easy.

Tables on the other hand... just work as you expect them to.

Highlighted

Jake, I have some of those employees at my school as well. Smiley Wink

In either instance, creating the table or div version of this, I assume you are including place-holder text. As long as users are careful replacing that text, they will easily edit the contents without disturbing the divs, or even knowing they are there. Good luck!

0 Kudos
Highlighted

Thanks for passing on the suggestion Aaron.

The intent is to build a template that can be shared with anyone, that will allow for text editing while retaining some branding look & feel.  >90% of our audience, if I would mention <div> tags, would walk out the door. 

The only info going into this table would be the course name, instructor name or something along those lines - pieces of information that are readily accessible at other places on the page.

Thanks.

Highlighted

Success!  Thank you!264086_snip_20180110151642.png

0 Kudos
Highlighted

These look very nice, but accessibility guidelines suggest to *not* use a table for layout purposes. Try building just using <div> tags instead. Here's some info about the accessibility issue: WebAIM: Creating Accessible Tables - Layout Tables

Highlighted

Here is the HTML code. The table rows have an embedded style attached. 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr style="background-color: #fff; font-family: 'Avenir LT Std 45 Book', Arial, Calibri;">
<td><img src="https://lakeland.instructure.com/courses/790163/files/58610248/preview" alt="lakeland-logo.png" data-api-endpoint="https://lakeland.instructure.com/api/v1/courses/790163/files/58610248" data-api-returntype="File" /></td>
</tr>
<tr style="background-color: #000; font-family: 'Avenir LT Std 45 Book', Arial, Calibri; color: #fff; text-align: right; font-weight: bold; font-size: medium;">
<td>SEMESTER YEAR</td>
</tr>
<tr style="background-color: #be2227; font-family: 'Avenir LT Std 45 Book', Arial, Calibri; color: #fff; text-align: right; font-weight: bold; font-size: medium;">
<td>TEM-101-123</td>
</tr>
</tbody>
</table>
Highlighted

Hello Ellen and snugent‌ - I love this 1 column table idea you've shared.

Would it be possible to get a screenshot of the HTML for the table?  I played around with it myself but didn't get the same nice results that you have. (Probably b/c I don't know what I'm doing.)

My main two questions were:

How do you get the cells to hold their formatting (text size, background color, text color) when the text is editted?

How do you get the background color to fill the full cell?

Thank you x3!!!

0 Kudos
Highlighted
Community Member

1) I like the code banners - they are attractive, and easy to edit with the options inside canvas.

2) I agree on not editing images. Some of us have little experience with such software. Many of us are quite familiar with it, but our favorite software/the software we know best may be at home and not on the school computer (which may only have the default paint for windows). That means you have to come back to the image editing when you get home. I would rather being able to do it at once and mark out that task...

Just my thoughts...

Highlighted
Community Member

Thank you for sharing, snugent! That banner has a nice, clean look and I'm now stealing your idea and running - who knows how many I'll create before I land on the "perfect" one? I'm very new to Canvas, so it's great to see from you how simple it is to create something like this in the html editor that faculty can edit easily with just the rich text editor. Especially with the single column, this seems about as indestructible as any templated banner I might be able to create.

Several sample page banners created using tables

Highlighted

Awesome! Thanks, Kelley! Sometimes the px to % thing evades my memory. I also realized this morning that the banner images display fine in the Canvas app. See screenshot. Screenshot of Canvas app displaying banner image file.