University of Dayton Showcase of Styled Sakai Content

The table below shows a variety of different sytled Sakai content.

How to use this stuff

There are unlimited approaches to this. Below are few ways to get started.

  1. Upload this default.css file to your Resources LB-CSS directory. This directory location will get created automatically for you if you upload it using the Settings option in the Sakai Lessons tool.
  2. If you want to add any of the items you see in the left column, you can do so by adding the accompanying code in the right column. To do so, add a Text item in the Sakai Lessons tool, click the Source button in the editor toolbar, paste the code in there, and click save.
    • Buttons in Lessons will instead need to have class names added in the settings.
    • Note that the object might look crazy in the editor but if everything is working right, it will render nicely once you save.
    • Update the text and/or images with your own text
  3. If you want to use any of these items in a Web Content page, paste the code for the corresponding item, and be sure you reference the default.css file.

Assorted Sytled Content Items

Visual Ouput Code

Chat Instructor Insight

These are great for getting students to focus on some text. It also adds a personal hallmark.

  • Instructor speaking

    By using the Planning Guide, you should find that it helps you to stay organized and work more efficiently. This model helps you consider the why, when, where, and for whom multimedia is appropriate.

<h3>Chat Instructor Insight</h3> <p>These are great for getting students to focus on some text. It also adds a personal hallmark.</p> <div class="insight-section"> <ul> <li> <div class="left-insight"><img alt="Instructor speaking" src="https://udayton.edu/directory/udit/img/bergman_leah_275.jpg" /> <p>By using the Planning Guide, you should find that it helps you to stay organized and work more efficiently. This model helps you consider the <em>why, when, where, and for whom</em> multimedia is appropriate.</p> </div> </li> </ul> </div>

Panel Instructor Insight

These are less eye-catching but more professional looking than the Chat Insight.

Professor Allen's Talking Points

Global Perspective from an expert

Ryan Allen Imagine living in a world with no pizza. Take a minute and think about it. It's a pretty disgusting thought, right? Well that is the reality for the people in 14 countries where pizza is not available anywhere. This is unacceptable! Everyone should have the right to eat pizza! For your next assignment I want you to develop a proposal to solve this problem.
Remember that your papers must use APA formatting or I'll give you an 'F'.
<h3>Panel Instructor Insight</h3> <p>These are less eye-catching but more professional looking than the Chat Insight.</p> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-insight-title">Professor Allen&#39;s Talking Points</h3> <p>Global Perspective from an expert</p> </div> <div class="panel-body"><img alt="Ryan Allen" class="panel-insight-speaker" src="https://isidore.udayton.edu/access/content/group/IsidoreShowcase/images/rallen.jpg" /><span class="fa fa-quote-left"></span> Imagine living in a world with no pizza. Take a minute and think about it. It&#39;s a pretty disgusting thought, right? Well that is the reality for the people in 14 countries where pizza is not available anywhere. This is unacceptable! Everyone should have the right to eat pizza! For your next assignment I want you to develop a proposal to solve this problem. <span class="fa fa-quote-right"></span><span></span></div> <div class="panel-body"><em>Remember that your papers must use APA formatting or I&#39;ll give you an &#39;F&#39;.</em></div> </div>

Professor Allen's Talking Points

Global Perspective from an expert

Ryan Allen Imagine living in a world with no pizza. Take a minute and think about it. It's a pretty disgusting thought, right? Well that is the reality for the people in 14 countries where pizza is not available anywhere. This is unacceptable! Everyone should have the right to eat pizza! For your next assignment I want you to develop a proposal to solve this problem.
Remember that your papers must use APA formatting or I'll give you an 'F'.
<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-insight-title">Professor Allen&#39;s Talking Points</h3> <p>Global Perspective from an expert</p> </div> <div class="panel-body"><img alt="Ryan Allen" class="panel-insight-speaker" src="https://isidore.udayton.edu/access/content/group/IsidoreShowcase/images/rallen.jpg" /><span class="fa fa-quote-left"></span> Imagine living in a world with no pizza. Take a minute and think about it. It&#39;s a pretty disgusting thought, right? Well that is the reality for the people in 14 countries where pizza is not available anywhere. This is unacceptable! Everyone should have the right to eat pizza! For your next assignment I want you to develop a proposal to solve this problem. <span class="fa fa-quote-right"></span><span></span></div> <div class="panel-body"><em>Remember that your papers must use APA formatting or I&#39;ll give you an &#39;F&#39;.</em></div> </div>

Instructor Insight Conversation

This allows you to present content conversationally which adds character and empathy to the way you share information. The student voice can be used in a variety of ways.

  • Intructor speaking

    The base ten number system only became popular because we have ten fingers. Ten only has three divisors: 1, 2,  and 5. That's not very good, and basic division results in tons of repeating decimals. Twelve is the smallest number with four divisors, but base 60 would probably be the best. Sixty has 11 divisors and seems fairly easy to use.

  • Student responding

    Wait a minute! SIXTY???! Are you kidding me? No one would be able to understand a base sixty number system. You're crazy!

  • Intructor speaking

    Well, the ancient Babylonian civilization did use base 60, and its use has persisted today. Look at how we tell time. How many minutes are in an hour?

  • Student responding

    Fine. Whatever.

<h3>Instructor Insight Conversation</h3> <p>This allows you to present content conversationally which adds character and empathy to the way you share information. The student voice can be used in a variety of ways.</p> <div class="insight-section"> <ul> <li> <div class="left-insight"><img alt="Intructor speaking" src="https://isidore.udayton.edu/access/content/group/IsidoreShowcase/images/prof_small.jpg" /> <p>The base ten number system only became popular because we have ten fingers. Ten only has three divisors: 1, 2,&nbsp; and 5. That&#39;s not very good, and basic division results in tons of repeating decimals. Twelve is the smallest number with four divisors, but base 60 would probably be the best. Sixty has 11 divisors and seems fairly easy to use.</p> </div> </li> <li> <div class="right-insight"><img alt="Student responding" src="https://isidore.udayton.edu/access/content/group/IsidoreShowcase/images/genericFemale.JPG" /> <p>Wait a minute! SIXTY???! Are you kidding me? No one would be able to understand a base sixty number system. You&#39;re crazy!</p> </div> </li> <li> <div class="left-insight"><img alt="Intructor speaking" src="https://isidore.udayton.edu/access/content/group/IsidoreShowcase/images/prof_smallArgue.jpg" /> <p>Well, the ancient Babylonian civilization did use base 60, and its use has persisted today. Look at how we tell time. How many minutes are in an hour?</p> </div> </li> <li> <div class="right-insight"><img alt="Student responding" src="https://isidore.udayton.edu/access/content/group/IsidoreShowcase/images/genericFemale.JPG" /> <p>Fine. Whatever.</p> </div> </li> </ul> </div>

Study Tip

These are great for suggestions or for emphasizing. It's also a good idea to use these to draw students' attention to things they commonly forget.

 

Study Tip

Get research help from UD Librarians by using the Knowledge Hub.

Peer-reviewed journal articles can be found using the Journal search on the UD Libraries page, and also Google Scholar.

<h3><span class="fa fa-bullhorn"></span> Study Tip</h3> <p>These are great for suggestions or for emphasizing. It&#39;s also a good idea to use these to draw students&#39; attention to things they commonly forget.</p> <p>&nbsp;</p> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="callout-title"><span class="fa fa-pencil-square-o"></span> Study Tip</h3> </div> <div class="panel-body">Get research help from UD Librarians by using the <a href="https://udayton.edu/libraries/help.php" rel="noopener" target="_blank">Knowledge Hub</a>. <p>Peer-reviewed journal articles can be found using the Journal search on the <a href="https://udayton.edu/libraries/index.php" rel="noopener" target="_blank">UD Libraries</a> page, and also <a href="https://scholar.google.com/" rel="noopener" target="_blank">Google Scholar</a>.</p> </div> </div>

 

Study Tip

Get research help from UD Librarians by using the Knowledge Hub.

Peer-reviewed journal articles can be found using the Journal search on the UD Libraries page, and also Google Scholar.

<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="callout-title"><span class="fa fa-pencil-square-o"></span> Study Tip</h3> </div> <div class="panel-body">Get research help from UD Librarians by using the <a href="https://udayton.edu/libraries/help.php" rel="noopener" target="_blank">Knowledge Hub</a>. <p>Peer-reviewed journal articles can be found using the Journal search on the <a href="https://udayton.edu/libraries/index.php" rel="noopener" target="_blank">UD Libraries</a> page, and also <a href="https://scholar.google.com/" rel="noopener" target="_blank">Google Scholar</a>.</p> </div> </div>

 Key Idea

This is a content centric callout that direct your students to focus on particular concept or idea, or it can be used to guide them toward the important idea they should take away from whatever you're having them do.

The essential elements that you need to know here is that people did not, in fact, believe the world was flat in the time of Columbus. They just believed it was smaller than it truly was.

<h3><span class="fa fa-lightbulb-o"></span>&nbsp;Key Idea</h3> <p>This is a content centric callout that direct your students to focus on particular concept or idea, or it can be used to guide them toward the important idea they should take away from whatever you&#39;re having them do.</p> <p class="alert alert-warning"><span class="fa fa-3x fa-lightbulb-o"></span> <strong>The essential elements that you need to know here is that people did not, in fact, believe the world was flat in the time of Columbus. They just believed it was smaller than it truly was.</strong></p>

The essential elements that you need to know here is that people did not, in fact, believe the world was flat in the time of Columbus. They just believed it was smaller than it truly was.

<p class="alert alert-warning"><span class="fa fa-3x fa-exclamation-circle"></span> <strong>The essential elements that you need to know here is that people did not, in fact, believe the world was flat in the time of Columbus. They just believed it was smaller than it truly was.</strong></p>

 Warning

If used appropriately these should really catch your students' attention for the things that are most crucial.

Warning!

Do not attempt to use your sense of smell to differentiate the chemicals that look similar. Doing so will, quite literally, result in the destruction of your brain cells!
<h3><span class="fa fa-exclamation-triangle"></span>&nbsp;Warning</h3> <p>If used appropriately these should really catch your students&#39; attention for the things that are most crucial.</p> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="callout-title"><span class="fa fa-exclamation-triangle"></span> Warning!</h3> </div> <div class="panel-body">Do not attempt to use your sense of smell to differentiate the chemicals that look similar. Doing so will, quite literally, result in the destruction of your brain cells!</div> </div>
Warning! If you fail to cite your sources, you'll receive an automatic 'F'!
<div class="alert alert-danger"><strong>Warning!</strong> If you fail to cite your sources, you&#39;ll receive an automatic &#39;F&#39;!</div>

Marianist Principle

Our Marianist values are what differentiate the University of Dayton from other similar institutions. We recommend including these to help connect your content and your students with this integral element of our culture.

 

Marianist Logo

Marianist Principle

One of the Catholic, Marianist principles that underlies the culture at the University of Dayton is inclusivity.

Even though the law says your website needs to be accessible, we feel making sure all people are included supersedes this because it is the right thing to do.

<h3>Marianist Principle</h3> <p>Our Marianist values are what differentiate the University of Dayton from other similar institutions. We recommend including these to help connect your content and your students with this integral element of our culture.</p> <p>&nbsp;</p> <div class="panel panel-default"> <div class="panel-heading"><img alt="Marianist Logo" class="callout-icon" src="https://isidore.udayton.edu/access/content/public/images/MBA_Logos/marianist.jpeg" /> <h3 class="callout-title">Marianist Principle</h3> </div> <div class="panel-body"> <p>One of the Catholic, Marianist principles that underlies the culture at the University of Dayton is <strong>inclusivity</strong>.</p> <p>Even though the law says your website needs to be accessible, we feel making sure all people are included supersedes this because it is the right thing to do.</p> </div> </div>

Headers

So the background image here would need to be adjusted in the css. You also could tweak it so it could be changed in the html.

Welcome to Program Project Management

<h3><span class="fa fa-picture-o"></span> Headers</h3> <div class="image-stripe-backgroundimg non-semantic-protector"> <h1 class="image-stripe">Welcome to Program Project Management</h1> </div>