With the exception of the tabbed-interface examples, we have not provided any library code snippets that include CSS classes created by Instructure because they are no longer supporting it, and it does not work in the mobile app. However, in some cases, using a class does add a nice visual element to content pages that is still understandable in the mobile app, and won't affect the content if it stops working.
This tutorial page demonstrates how to add the Border-Round Canvas class (class="border-round") to visually style accordions, borders, and buttons.
Accordion With Class
This style is using a Canvas class to give the accordions a rounded edge. The example also demonstrates how to adjust the margins and alter the appearance of the cursor.
<h2>Heading Introducing the Content</h2>
<div style="margin: 1.5rem 0;">
<details>
<summary class="border-round" style="display: block; width: 98%; font-size: 140%; line-height: 200%; background: #BE0000; color: #ffffff; border: 1px solid #890000; padding: 0.5rem 0.75rem; cursor: pointer;">Title</summary>
<div style="margin: 1rem;">
<h3>Subheading</h3>
<p>Content here.</p>
</div>
</details>
<details>
<summary class="border-round" style="display: block; width: 98%; font-size: 140%; line-height: 200%; background: #BE0000; color: #ffffff; border: 1px solid #890000; padding: 0.5rem 0.75rem; cursor: pointer;">Title</summary>
<div style="margin: 1rem;">
<h3>Subheading</h3>
<p>Content here.</p>
</div>
</details>
<details>
<summary class="border-round" style="display: block; width: 98%; font-size: 140%; line-height: 200%; background: #BE0000; color: #ffffff; border: 1px solid #890000; padding: 0.5rem 0.75rem; cursor: pointer;">Title</summary>
<div style="margin: 1rem;">
<h3>Subheading</h3>
<p>Content here.</p>
</div>
</details>
</div>
As noted in the sample code, the class, border-round, has been added to the summary tag to create the rounded effect on each accordion tab. The summary tag also includes details about font size (font-size: 140%;), font color (color: #ffffff;) paragraph style (display; block;), background color (background: #1E407C;), border color and thickness (border: 1px solid #001E44;), and pointer style (cursor: pointer;). With the cursor: pointer code included, the cursor will change from an arrow to a hand when you hover your cursor over any of the accordion tabs. All of these details can be altered to align with the visual styling of your course.
In addition to the summary tag elements, div tags have been added to this example in order to add margins within a style code. In this instance the style code adds space on all sides of the accordion tabs as a whole and within each tab to offset the text.
Toggle With Class
Class code can also be added to self-check questions/answers or other basic toggles. In the following example, a border with rounded corners has been added to the answer. This is the same code that was used in the accordion tab example.
<p>Your question</p>
<ol style="list-style-type: lower-alpha;">
<li>Answer 1</li>
<li>Answer 2</li>
<li>Answer 3</li>
<li>Answer 4</li>
</ol>
<details class="border-round" style="border: 1px solid #890000; background: #E2E6E6; font-size: 100%; overflow: auto; width: 30%;">
<summary style="margin-left: 2%;">Self-Check Answer</summary>
<p style="margin-left: 15px; font-size: 100%;">Answer: 3</p>
</details>
Button With Class
Similar to accordions and borders, the class code can be added to buttons. This is a button with the border-round class:
<details style="margin-bottom: 2.5rem;">
<summary class="border-round" style="display: inline-block; background: #ffffff; border: 3px solid #890000; padding: 0.5rem 0.75rem; cursor: pointer;">Additional information</summary>
<p style="margin: 1rem 2.5rem;">Content here.</p>
</details>
<p></p>
Notice the difference between the button with the rounded corners and the button with the square edges.
0 Comments
Add your comment