cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
craig_levy
New Member

Background Color of Content-Box

Jump to solution

I am using Content Boxes for displaying information. I would like to change the color of the backgrounds of these boxes. However the Backgroundcolor is not working..

Default Code:

<div class="content-box pad-box-mini border border-trbl border-round">
<p>some content here</p>
</div>

Background Color Code:

<div class="content-box pad-box-mini border border-trbl border-round backgroundcolor: #f2f2f2">
<p>some content here</p>
</div>

Any help would be great

1 Solution
Shar
Community Champion

Hi Craig,

You're off to a right start with the div sections and setting the class, but the background color is actually a style.

So your opening div tag should look something like:

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2;">

By the way that #f2f2f2 is a pretty faint shading, it's the shadow that appears in Course Nav when you hover over un-selected course components. And you don't need to specify border-trbl if you are using border-round as by default it encompasses all the corners.

And if you want to distinguish the area might consider adding a colored border around the content box so that users who cannot see the shading will know it's a call-out display.

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2; border: thin solid #ccc">

Good luck,
Cheers - Shar

View solution in original post

13 Replies
kona
Community Coach
Community Coach

 @craig_levy , Welcome to the Community! I'm not sure of the answer to this question, but I've shared it with the https://community.canvaslms.com/groups/designers?sr=search&searchId=5f6cd4c6-295a-46cc-8c18-c9e8b9de...‌ and https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=0269a1a5-c321-4740-b202-...‌ groups in the Community to see if they can help! You might also consider joining these groups so you have access to their resources/information!

kblack
Community Champion

Hi  @craig_levy  Welcome to the worldwide Canvas Community!  The reason for this is because the backgroundcolor property is not accepted in Canvas--as you have already seen.  You should download and save the Canvas HTML whitelist that is linked at the top of this article:  How do I use the HTML view in the Rich Content Editor as an instructor?   There is a good reason for this, overall, for accessibility purposes.  But as you witnessed, anything Canvas will not accept just gets tossed out.  (For the record, you could add a color to the border of the content box if you wanted it to stand out that way.)

Hope this helps a bit!

Shar
Community Champion

Hi Craig,

You're off to a right start with the div sections and setting the class, but the background color is actually a style.

So your opening div tag should look something like:

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2;">

By the way that #f2f2f2 is a pretty faint shading, it's the shadow that appears in Course Nav when you hover over un-selected course components. And you don't need to specify border-trbl if you are using border-round as by default it encompasses all the corners.

And if you want to distinguish the area might consider adding a colored border around the content box so that users who cannot see the shading will know it's a call-out display.

<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #f2f2f2; border: thin solid #ccc">

Good luck,
Cheers - Shar

Is what exactly what i needed. Thank you Shar..

Now I just need my icons to show in my buttons and my world will be golden.

Shar
Community Champion

Icons in show in buttons you say? Smiley Happy Why yes that can be done, but keep in mind both the buttons and the icons will only display in the web browser and not the Canvas mobile apps (for the time being).

<a class="icon-question btn" style="cursor: help;" title="Go ahead and ask!">Need Help</a>

Hehehe ok I was being funny there, but seriously, you can add the icons in with the class along with the button class.

Happy Tuesday,
Cheers - Shar

I know this should work, but I am just getting an empty box. Now my title is actually a link, but that should not make any different unless the class="icon-off" should be with the href tag

<div class="icon-question  btn" role="button">

<a title="W12: Start Page" href="https://aisdblend.instructure.com/courses/83875/pages/w12-start-page" data-api-endpoint="https://aisdblend.instructure.com/api/v1/courses/83875/pages/w12-start-page" data-api-returntype="Page">Week 12</a>

</div>

Shar
Community Champion

Hi  @craig_levy ,

Yes, the class="icon-question btn" should be with the anchor tag:

<a class="icon-question btn" title="Week 12 Start Page" href="https....w12-start-page">Week 12</a>

You probably already have the list of icons, but for anyone else who comes across this thread here is the list of Instructure Icons that can be used as a class: http://instructure.github.io/instructure-icons/ 

And another cool resource is Icons8 with loads, no, tons of free icons! I've also had good success with Get Emoji. Both of these icons would just be added to the link text and not included as a class.

<a class="btn" title="Week 12 Start Page" href="https....w12-start-page">  ️Week 12</a>

Cheers - Shar

Shar
Community Champion

awww the cool map emoji I put in didn't show up. I guess jive stripped that out.

:smileysilly: Shar

kblack
Community Champion

Question for you ishar-uw‌--since I obviously gave wrong advice--shouldn't the background-color have been listed under the Allowed style properties area of that HTML whitelist document referenced?  Is there an allowed CSS styles document somewhere that I am missing?  I remember that some of the older classes used in Canvas such as ic-flash-success and others (which I believe are now deprecated by Instructure??) allowed the use of background colors as part of their style, but I was obviously mistaken with missing background-color.  Apologies for the bad advice on my part  @craig_levy .

It is all good Ken, I actually thought your justification for not allowing it was pretty sound. 

Shar
Community Champion

Hi  @kblack ,

On that Whitelist document it reports:

Allowed Attributes on HTML Elements
all elements allow style, class, id, title, role, lang, dir

So yeah, style can put into anything and make it look fancy or whatever; it only affects how it displays (formatting) so it's not any kind of "Actionable" or code-running feature. I love using the W3schools tutorials for any kind of CSS I think I should be able to do.

The ic-flash-info, ic-flash-warning, ic-flash-success are still working; I use them in div sections because they are automatically centered and have a shadow:

<div class="ic-flash-success">Success: Sample flash notice style.</div>

Cheers - Shar Smiley Happy

kblack
Community Champion

Ah, got it.  Thank you, ishar-uw!  That's what I get for venturing into territory where I know enough to be dangerous but not fully comprehending enough!

kristian_still
New Member

Of use?

<div style="margin: 50px 15% 50px 15%; background-color: #0404b4;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #58D3F7; border: 2px solid #0404B4;">
<p>Your Text...</p>
</div>
</div>

Useful for adding colour and highlighted to text.

#Magpie