{"id":3968,"date":"2020-07-29T16:04:38","date_gmt":"2020-07-29T16:04:38","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=3968"},"modified":"2020-10-28T20:42:01","modified_gmt":"2020-10-28T20:42:01","slug":"how-to-create-a-clio-course-module-part-2","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2020\/07\/29\/how-to-create-a-clio-course-module-part-2\/","title":{"rendered":"How to Create a CLIO Course Module &#8211; Part 2"},"content":{"rendered":"<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/06\/html-V2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3519\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/06\/html-V2.png\" alt=\"\" width=\"91\" height=\"25\" \/><\/a><\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/banner-full-v5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4123\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/banner-full-v5-1024x341.png\" alt=\"\" width=\"640\" height=\"213\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/banner-full-v5-1024x341.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/banner-full-v5-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/banner-full-v5-768x256.png 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>In this second part of CLIO training you will be doing more advanced stylings using CSS classes and HTML code snippets.<\/p>\n<h1>Part 1: Getting Familiar with the basics of the Chrome Inspect Tool<\/h1>\n<p>These set of instructions will be utilizing Chrome as the default browser. The logic should apply to other browsers as well, however the interface might look a little different, therefore using Chrome is recommended.<\/p>\n<ol>\n<li>Navigate to one of your CLIO activity page.<\/li>\n<li>Right click any where on the page &gt; Inspect.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.03.44-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3970\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.03.44-AM-1024x538.png\" alt=\"\" width=\"640\" height=\"336\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.03.44-AM-1024x538.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.03.44-AM-300x158.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.03.44-AM-768x404.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.03.44-AM.png 1860w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Your browser should look something like this.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.08.05-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3973\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.08.05-AM-1024x537.png\" alt=\"\" width=\"640\" height=\"336\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.08.05-AM-1024x537.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.08.05-AM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.08.05-AM-768x403.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.08.05-AM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a>\n<ul>\n<li>If you&#8217;re on Safari, right click anywhere on the page &gt; Inspect Element.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.06.59-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3972\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.06.59-AM-1024x575.png\" alt=\"\" width=\"640\" height=\"359\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.06.59-AM-1024x575.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.06.59-AM-300x168.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.06.59-AM-768x431.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.06.59-AM.png 1814w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Your browser should look something like this. Notice how the HTML elements tree looks the same as the one in Chrome, but the window pops up at the bottom.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.09.07-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3974\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.09.07-AM-1024x574.png\" alt=\"\" width=\"640\" height=\"359\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.09.07-AM-1024x574.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.09.07-AM-300x168.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.09.07-AM-768x430.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.09.07-AM.png 1815w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>If you&#8217;re on Firefox, right click anywhere on the page &gt; Inspect Element.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.41.00-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3975\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.41.00-AM-1024x571.png\" alt=\"\" width=\"640\" height=\"357\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.41.00-AM-1024x571.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.41.00-AM-300x167.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.41.00-AM-768x428.png 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>You should see something like this.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.42.19-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3976\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.42.19-AM-1024x571.png\" alt=\"\" width=\"640\" height=\"357\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.42.19-AM-1024x571.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.42.19-AM-300x167.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.42.19-AM-768x428.png 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Explore around a little bit with this Inspect Element interface. It is a lot of information and it is not necessary that you understand everything on this interface, but here are some main things to notice.\n<ul>\n<li>Hovering on a line of code will prompt the browser to highlight the element that is being selected. For example, when hovering on an &#8220;&lt;md-content&gt;&#8221;, we can see that the card is being highlighted. Therefore, in order to modify the stylings of the card, we can modify the md-content element in our CSS.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.44.16-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3977\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.44.16-AM-1024x537.png\" alt=\"\" width=\"640\" height=\"336\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.44.16-AM-1024x537.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.44.16-AM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.44.16-AM-768x403.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.44.16-AM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Another way of modifying the stylings of an element is by using class names, like we&#8217;ve been doing with card headers. Here you&#8217;ll notice that this div element has a class of &#8220;card-header&#8221;, and hovering on it highlights the black card header we&#8217;ve designed.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.47.22-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3978\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.47.22-AM-1024x536.png\" alt=\"\" width=\"640\" height=\"335\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.47.22-AM-1024x536.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.47.22-AM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.47.22-AM-768x402.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-11.47.22-AM.png 1860w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>In short, if you&#8217;d like to style any elements but you don&#8217;t how know to point to it, you can utilize this tool to help you identify it&#8217;s class name or element type.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h1>Part 2: CSS &#8220;Housekeeping&#8221; practices<\/h1>\n<p>Here are some CSS practices to keep your code organized, readable, and reusable.<\/p>\n<h2>Comments<\/h2>\n<p>Comments in your CSS code will not affect the code itself. In other words, the comments you made in CSS will not be rendered on the browser. Comments are just for you to organize your code, so use it as you need it.<\/p>\n<p>To insert a comment, follow this syntax:<\/p>\n<pre>\/* some comment here *\/<\/pre>\n<p>So, for example:<\/p>\n<pre>\/* starting CSS code for card headers *\/\n.card-header {\n  background: #626c66;\n}\n\/* ending CSS code for card headers *\/<\/pre>\n<h2>Declaring global colors<\/h2>\n<p>Do you find it a little annoying having to recopied the hex codes for your colors every time? Now you can declare your color palette from the beginning and just use it as you go<\/p>\n<pre>:root {\n  --dark: #252422;\n  --light: #fffcf2;\n  --beige: #ccc5b9;\n  --green: #626c66;\n}<\/pre>\n<p>Then, whenever you want to use it, simply follow this syntax:<\/p>\n<pre>[some-attribute]: var(--color-name);<\/pre>\n<p>For example:<\/p>\n<pre>.card-header {\n  background: var(--dark);\n}<\/pre>\n<p>Declare this at the beginning of your CSS stylesheet so you can reference to it anytime.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.03.25-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3982\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.03.25-PM-1024x136.png\" alt=\"\" width=\"640\" height=\"85\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.03.25-PM-1024x136.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.03.25-PM-300x40.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.03.25-PM-768x102.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.03.25-PM.png 1345w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<h1>Part 3: More CSS Fun Stuff!<\/h1>\n<h2>Changing the background of the module<\/h2>\n<ol>\n<li>Let&#8217;s first try changing the background color\n<ul>\n<li>Navigate to the Course CSS stylesheet.<\/li>\n<li>To modify the background, we&#8217;d need to modify two things: the &#8220;content-container&#8221; class and the &#8220;md-content&#8221; element.<\/li>\n<li>\n<pre>.content-container {\n  background: var(--green);\n}\n\nmd-content {\n  background: inherit;\n}<\/pre>\n<\/li>\n<li>Notice that the &#8220;md-content&#8221; doesn&#8217;t have a period in front of it. This is because we&#8217;re modifying the\u00a0<strong>element\u00a0<\/strong>md-content, not the class name md-content. You can read more about CSS selectors\u00a0<a href=\"https:\/\/www.w3schools.com\/css\/css_selectors.asp\">here<\/a>.<\/li>\n<li>The &#8220;inherit&#8221; keyword means that the &#8220;md-content&#8221; will have the same background properties as it&#8217;s parent, which is the class &#8220;content-container&#8221; in this case.<\/li>\n<li>Check for your result.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.05.34-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3983\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.05.34-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.05.34-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.05.34-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.05.34-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.05.34-PM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Let&#8217;s try making the background an image rather than a solid color.\n<ul>\n<li>First, upload the image. Click &#8220;Insert\/Edit Image&#8221; on any card editor.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.08.39-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3984\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.08.39-PM-1024x344.png\" alt=\"\" width=\"640\" height=\"215\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.08.39-PM-1024x344.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.08.39-PM-300x101.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.08.39-PM-768x258.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.08.39-PM.png 1514w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Choose an image for your background, then copy this entire link.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.10.19-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3985\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.10.19-PM-1024x579.png\" alt=\"\" width=\"640\" height=\"362\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.10.19-PM-1024x579.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.10.19-PM-300x170.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.10.19-PM-768x434.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.10.19-PM.png 1214w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Click &#8220;Cancel&#8221;. This is because we don&#8217;t want to actually insert the image into this card. This image has been uploaded to this link when you input it into &#8220;Source&#8221;. Don&#8217;t lose this link. Copy and save it somewhere so you can access it, otherwise you will have to upload it again.<\/li>\n<li>Navigate to the Course CSS stylesheet.<\/li>\n<li>Make these changes to the class &#8220;content-container&#8221;. Comment out the old color and give it a new background.<\/li>\n<li>\n<pre>.content-container {\n  \/* background: var(--green); *\/\n  background: url(\"https:\/\/minio.la.utexas.edu\/\n  clio-prod\/module_1407\/\n  vSLTtt2Zt32WQ99rWhopLFxDnMM7ZbvpJdQRdqpI.png\");\n}<\/pre>\n<\/li>\n<li><strong>Note:\u00a0<\/strong>the link above is broken up into many lines for the purposes of viewing on this KB post, but please keep the link on one line in CLIO.<\/li>\n<li>Let&#8217;s view the changes.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.16.42-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3986\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.16.42-PM-1024x508.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.16.42-PM-1024x508.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.16.42-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.16.42-PM-768x381.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.16.42-PM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li><strong>Note:\u00a0<\/strong>you may want to manipulate your background image a little bit. When the browser exceeds the image dimensions, it will repeat the image in a grid form. Something like this.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.22.07-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3988\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.22.07-PM-1024x507.png\" alt=\"\" width=\"640\" height=\"317\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.22.07-PM-1024x507.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.22.07-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.22.07-PM-768x380.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.22.07-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\nThe background used (with the mandala) is designed so that the width is 1920 px (maximum browser size), and the height it 1080 px, however the two mandalas that got cut off are aligned perfectly so that they look like one when repeated.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/background.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3990\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/background-1024x576.png\" alt=\"\" width=\"640\" height=\"360\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/background-1024x576.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/background-300x169.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/background-768x432.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/background.png 1920w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\n<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.24.53-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3991\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.24.53-PM-1024x509.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.24.53-PM-1024x509.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.24.53-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.24.53-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.24.53-PM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\nAnother quick fix for this problem is to fix the positioning of the background image even when the user is scrolling. Here&#8217;s the CSS to achieve that effect.<\/li>\n<li>\n<pre>.content-container { \n  \/* background: var(--green); *\/ \n  background: url(\"https:\/\/minio.la.utexas.edu\/ \n  clio-prod\/module_1407\/ \n  vSLTtt2Zt32WQ99rWhopLFxDnMM7ZbvpJdQRdqpI.png\"); \n  background-attachment: fixed; \/* fixed position *\/\n}<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>Formatting Image Figures and Figure Captions<\/h2>\n<p>Let&#8217;s format this image figure.<\/p>\n<ol>\n<li>An inspection reveals that this image belongs to the element &#8220;figure&#8221; and has two classes, &#8220;image&#8221; and &#8220;align-center&#8221;.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.29.23-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3993\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.29.23-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.29.23-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.29.23-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.29.23-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.29.23-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Override the default formatting for this image with this code, modifying the class &#8220;image&#8221;.<\/li>\n<li>\n<pre>.image {\n  background #ffffff !important;\n  border: 0px !important; \/* remove the border frame *\/\n}<\/pre>\n<\/li>\n<li><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.43.50-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3994\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.43.50-PM-1024x74.png\" alt=\"\" width=\"640\" height=\"46\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.43.50-PM-1024x74.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.43.50-PM-300x22.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.43.50-PM-768x55.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.43.50-PM.png 1348w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Let&#8217;s check for the result. The background and border are now gone!<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.44.31-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3995\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.44.31-PM-1024x500.png\" alt=\"\" width=\"640\" height=\"313\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.44.31-PM-1024x500.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.44.31-PM-300x147.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.44.31-PM-768x375.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.44.31-PM.png 1864w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Another way of doing this is to modify the figure element.<\/li>\n<li>\n<pre>figure {\n  background: none !important; \/* this works like setting it\n  to white *\/\n  border: 0px !important;\n}<\/pre>\n<\/li>\n<li>Let&#8217;s also modify the figure caption.<\/li>\n<li>\n<pre>figcaption {\n  color: #959593;\n}<\/pre>\n<\/li>\n<li>And view the result.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.49.50-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3996\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.49.50-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.49.50-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.49.50-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.49.50-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.49.50-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Note that any image uploaded will now have the same formatting as this one, since they all belongs to the element figure and figcaption.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.54.58-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3998\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.54.58-PM-1024x508.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.54.58-PM-1024x508.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.54.58-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.54.58-PM-768x381.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-1.54.58-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ol>\n<h2>Adding an Image as the Navbar Banner or Card Header<\/h2>\n<ol>\n<li>Add an image as the navbar banner background.\n<ul>\n<li>You can modify the navbar by styling the class &#8220;nav-bar&#8221;.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-2.57.10-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4000\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-2.57.10-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-2.57.10-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-2.57.10-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-2.57.10-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-29-at-2.57.10-PM.png 1863w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Choose an image with a width as close to 1920 px as possible. It is also recommended that you crop you image to a banner height (~500 px &#8211; 600 px). This will make inputting the banner a lot easier since you won&#8217;t have to manipulate the image too much. Here&#8217;s an example of the banner I&#8217;ll be using.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/notes-v3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4017\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/notes-v3-1024x307.jpg\" alt=\"\" width=\"640\" height=\"192\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/notes-v3-1024x307.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/notes-v3-300x90.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/notes-v3-768x230.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/notes-v3.jpg 1920w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>After you&#8217;ve chosen the image, let&#8217;s try uploading the image using box rather than CLIO this time, and link it from CLIO. Navigate to your box folder and upload the desire image.<\/li>\n<li>In Box, click &#8220;Share&#8221; on the image you&#8217;d like to link.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.40.34-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4009\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.40.34-AM-1024x537.png\" alt=\"\" width=\"640\" height=\"336\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.40.34-AM-1024x537.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.40.34-AM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.40.34-AM-768x403.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.40.34-AM.png 1860w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Toggle &#8220;Create shared link&#8221;.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.41.36-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4010\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.41.36-AM-1024x552.png\" alt=\"\" width=\"640\" height=\"345\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.41.36-AM-1024x552.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.41.36-AM-300x162.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.41.36-AM-768x414.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.41.36-AM.png 1104w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Click &#8220;Link Settings&#8221;.<br \/>\n<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.42.24-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4011\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.42.24-AM.png\" alt=\"\" width=\"791\" height=\"601\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.42.24-AM.png 791w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.42.24-AM-300x228.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.42.24-AM-768x584.png 768w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><\/a><\/li>\n<li>Uncheck &#8220;Disable Shared Link on&#8221; and click &#8220;Save&#8221;, then click &#8220;Link Settings&#8221; again and click &#8220;Copy&#8221; on &#8220;Direct Link&#8221;. <strong>Please click &#8220;Save&#8221; before attempting to copy the direct link.<\/strong><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.44.04-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4012\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.44.04-AM.png\" alt=\"\" width=\"916\" height=\"803\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.44.04-AM.png 916w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.44.04-AM-300x263.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.44.04-AM-768x673.png 768w\" sizes=\"auto, (max-width: 916px) 100vw, 916px\" \/><\/a><br \/>\n<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.45.08-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4013\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.45.08-AM-1024x736.png\" alt=\"\" width=\"640\" height=\"460\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.45.08-AM-1024x736.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.45.08-AM-300x215.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.45.08-AM-768x552.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-10.45.08-AM.png 1040w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Navigate back to CLIO Course CSS stylesheet and add this code.<\/li>\n<li>\n<pre>.nav-bar {\n  background-image: url(\"https:\/\/utexas.box.com\/\n  shared\/static\/sodmj7ubmyk6utl0fc26nuigs7mgg1fi.\n  jpg\") !important; \/* keep this on one line *\/\n}<\/pre>\n<\/li>\n<li>&#8220;Save Course CSS&#8221; and view the result. It might take a little bit to load if your image file is large.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.00.53-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4018\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.00.53-AM-1024x535.png\" alt=\"\" width=\"640\" height=\"334\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.00.53-AM-1024x535.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.00.53-AM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.00.53-AM-768x401.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.00.53-AM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Let&#8217;s add a color overlay to this and make it more cohesive. Use <a href=\"https:\/\/www.rapidtables.com\/convert\/color\/hex-to-rgb.html\">this<\/a>\u00a0site to convert your desire color from hex to rgb value, then copy the rgb color under &#8220;CSS color&#8221;. Paste it next to your image url. Please note that the you need to change &#8220;background-image&#8221; to &#8220;background&#8221;.<\/li>\n<li>\n<pre>.nav-bar {\n  \/* changed from background-image to background *\/\n  background: url(\"https:\/\/utexas.box.com\/\n  shared\/static\/sodmj7ubmyk6utl0fc26nuigs7mgg1fi.\n  jpg\") rgba(37, 36, 34, 0.7) !important; \n  \/* keep this on one line *\/\n  background-blend-mode: multiply;\n}<\/pre>\n<\/li>\n<li>Notice that I added a last value, 0.7 to the rgb code and also an &#8220;a&#8221; after &#8220;rgb&#8221;. This value specify the opacity of the color overlay, and ranges from 0 &#8211; 1.<\/li>\n<li>Feel free to explore other blend modes as well.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-07-at-1.38.44-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4021\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-07-at-1.38.44-PM-1024x580.png\" alt=\"\" width=\"640\" height=\"363\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-07-at-1.38.44-PM-1024x580.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-07-at-1.38.44-PM-300x170.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-07-at-1.38.44-PM-768x435.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-07-at-1.38.44-PM.png 1934w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Here&#8217;s how it turned out.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.40.23-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4027\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.40.23-AM-1024x537.png\" alt=\"\" width=\"640\" height=\"336\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.40.23-AM-1024x537.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.40.23-AM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.40.23-AM-768x403.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-11.40.23-AM.png 1859w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Add an image as a card header background.\n<ul>\n<li>This is very similar to how you&#8217;d add an image as a nav-bar background. Instead of modifying the class &#8220;nav-bar&#8221;, you&#8217;d want to either modify the class &#8220;card-header&#8221; (if you want to make the image the default card header) or in your custom class &#8220;[some-class-name] .card-header&#8221; (if you want the change to be local to that header only.<\/li>\n<li>For example, let&#8217;s add an image to the first card header only. Upload the image to either Box or CLIO like how you did before and obtain the link. It is recommended that you chose an image with width of roughly 1248 px. Here&#8217;s the one that I picked for my header.<\/li>\n<li>My first card header class name is &#8220;intro-card&#8221;.<\/li>\n<li>\n<pre>.intro-card card-header {\n  background-image: url(\"https:\/\/utexas.box.com\/\n  shared\/static\/fpzxsz162u7l91d4ornkqyjq0qaldk0z.\n  jpg\");\n  line-height: 7; \/* makes it taller for image *\/\n}<\/pre>\n<\/li>\n<li>Here&#8217;s how it turned out.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-12.20.27-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4028\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-12.20.27-PM-1024x507.png\" alt=\"\" width=\"640\" height=\"317\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-12.20.27-PM-1024x507.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-12.20.27-PM-300x148.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-12.20.27-PM-768x380.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-12.20.27-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Notice that only the top portion of the image is shown. If you&#8217;d like to display the middle or bottom part of the image, try playing around with &#8220;background-position&#8221;.<\/li>\n<li>\n<pre>  background-position: left; \/* middle, or *\/\n  background-position: bottom; \/* bottom *\/<\/pre>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>Embedding a Google Font<\/h2>\n<p>Let&#8217;s try embedding a Google Font to use with our headers \/ navbar.<\/p>\n<ol>\n<li>Navigate to\u00a0<a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>\u00a0and pick a font you&#8217;d like to incorporate. Click on that font.<\/li>\n<li>Click &#8220;+ Select this style&#8221;.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.24.25-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4031\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.24.25-PM-1024x507.png\" alt=\"\" width=\"640\" height=\"317\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.24.25-PM-1024x507.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.24.25-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.24.25-PM-768x380.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.24.25-PM.png 1854w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>This right side-bar should pop out.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.25.37-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4032\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.25.37-PM-1024x507.png\" alt=\"\" width=\"640\" height=\"317\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.25.37-PM-1024x507.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.25.37-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.25.37-PM-768x380.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.25.37-PM.png 1860w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><br \/>\nIf it doesn&#8217;t, click &#8220;View your selected families&#8221; on the top right.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.26.58-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4033\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.26.58-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.26.58-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.26.58-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.26.58-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.26.58-PM.png 1855w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Click &#8220;Embed&#8221; and copy this link.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.27.59-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4034\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.27.59-PM-1024x508.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.27.59-PM-1024x508.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.27.59-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.27.59-PM-768x381.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.27.59-PM.png 1859w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Navigate back to your CLIO site. On the left box, under &#8220;Module Due Date&#8221;, click &#8220;Show other module configuration&#8221;.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.29.49-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4035\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.29.49-PM-1024x279.png\" alt=\"\" width=\"640\" height=\"174\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.29.49-PM-1024x279.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.29.49-PM-300x82.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.29.49-PM-768x209.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.29.49-PM.png 1860w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Paste in the embed code and click Save.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.30.38-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4036\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.30.38-PM-1024x312.png\" alt=\"\" width=\"640\" height=\"195\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.30.38-PM-1024x312.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.30.38-PM-300x91.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.30.38-PM-768x234.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.30.38-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Let&#8217;s change the navbar title font. An inspection reveals that this title has the id &#8220;module-title&#8221;.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.35.03-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4037\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.35.03-PM-1024x509.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.35.03-PM-1024x509.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.35.03-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.35.03-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.35.03-PM.png 1862w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Modify the CSS of an id with this syntax.<\/li>\n<li>\n<pre>#module-title {\n  font-family: 'Bebas Neue', cursive;\n}<\/pre>\n<\/li>\n<li>You can find the CSS rules to specify families here, on the Google Font page.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.37.09-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4038\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.37.09-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.37.09-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.37.09-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.37.09-PM-768x383.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.37.09-PM.png 1859w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>View the result.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.38.13-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4039\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.38.13-PM-1024x510.png\" alt=\"\" width=\"640\" height=\"319\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.38.13-PM-1024x510.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.38.13-PM-300x150.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.38.13-PM-768x383.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.38.13-PM.png 1860w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>You may also change the font of the card header by pasting the same font family rules into &#8220;card-header:after&#8221;.<\/li>\n<li>\n<pre>.card-header:after {\n  color: var(--light);\n  \/* font-size: 18px; *\/\n  font-size: 25px;\t\/* fix for Bebas Neue *\/\n  font-weight: bold;\n  font-family: 'Bebas Neue', cursive;\n}<\/pre>\n<\/li>\n<li>Feel free to play around with the font and font size to fit your module&#8217;s style, look, and feel.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.47.12-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4041\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.47.12-PM-1024x534.png\" alt=\"\" width=\"640\" height=\"334\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.47.12-PM-1024x534.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.47.12-PM-300x156.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.47.12-PM-768x401.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.47.12-PM.png 1858w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ol>\n<h1>Part 4: Some HTML Fun (and CSS)!<\/h1>\n<h2>Formatting text-wrapped image figures<\/h2>\n<p>Let&#8217;s make an image float left or right.<\/p>\n<ol>\n<li>Upload the image into your card using the editor.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.58.21-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4042\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.58.21-PM-1024x340.png\" alt=\"\" width=\"640\" height=\"213\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.58.21-PM-1024x340.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.58.21-PM-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.58.21-PM-768x255.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-1.58.21-PM.png 1517w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>We&#8217;re going to add a class to this image so that we can format it in our CSS. Click View &gt; Source Code.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.00.12-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4043\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.00.12-PM-1024x341.png\" alt=\"\" width=\"640\" height=\"213\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.00.12-PM-1024x341.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.00.12-PM-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.00.12-PM-768x256.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.00.12-PM.png 1527w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>The Source Code editor does not format HTML code, therefore it is a little difficult to locate the figure, however try using the text as cues to locate the figure.<br \/>\n<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.02.29-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4044\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.02.29-PM.png\" alt=\"\" width=\"630\" height=\"618\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.02.29-PM.png 630w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.02.29-PM-300x294.png 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/li>\n<li>Modify the class attribute.<\/li>\n<li>\n<pre>&lt;!-- here's how you add a comment in HTML --&gt;\n&lt;!-- so, instead of --&gt;\n&lt;figure class=\"image\"&gt;\n&lt;!-- add another class by changing it to --&gt;\n&lt;figure class=\"image image-left\"&gt;\n&lt;!-- each class name is separated by a space --&gt;<\/pre>\n<\/li>\n<li>Click Ok &gt; Save Changes.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.05.54-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4046\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.05.54-PM.png\" alt=\"\" width=\"629\" height=\"619\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.05.54-PM.png 629w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.05.54-PM-300x295.png 300w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/a><\/li>\n<li>Navigate to the Course CSS style sheet and add this code.<\/li>\n<li>\n<pre>.image-left {\n  float: left;\n}<\/pre>\n<\/li>\n<li>Here&#8217;s how it turned out.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.10.30-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4047\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.10.30-PM-1024x509.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.10.30-PM-1024x509.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.10.30-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.10.30-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.10.30-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Apply the same logic for floating right images.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.12.16-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4048\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.12.16-PM-1024x506.png\" alt=\"\" width=\"640\" height=\"316\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.12.16-PM-1024x506.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.12.16-PM-300x148.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.12.16-PM-768x379.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.12.16-PM.png 1863w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ol>\n<h2>Adding and Formatting a Table<\/h2>\n<ol>\n<li>Create a new Content Card.<\/li>\n<li>In the editor, click Table &gt; Table, and choose the number of rows and columns that you want.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.34.15-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4050\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.34.15-PM-1024x344.png\" alt=\"\" width=\"640\" height=\"215\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.34.15-PM-1024x344.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.34.15-PM-300x101.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.34.15-PM-768x258.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.34.15-PM.png 1512w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>The table interface is pretty intuitive, so feel free to explore around and add in your content. Here&#8217;s how mine turned out.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.52.44-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4051\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.52.44-PM-1024x509.png\" alt=\"\" width=\"640\" height=\"318\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.52.44-PM-1024x509.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.52.44-PM-300x149.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.52.44-PM-768x382.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-07-30-at-2.52.44-PM.png 1858w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Let&#8217;s enhance this table using CSS. First, let&#8217;s add an id to this table so we can uniquely identify it in CSS.\n<ul>\n<li>Click View &gt; Source Code.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.48.08-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4054\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.48.08-AM-1024x409.png\" alt=\"\" width=\"640\" height=\"256\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.48.08-AM-1024x409.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.48.08-AM-300x120.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.48.08-AM-768x306.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.48.08-AM.png 1516w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>Next to the key &#8220;table&#8221;, add an id. You may name it whatever you want. Follow the syntax:<\/li>\n<li>\n<pre>&lt;table id=\"some-id-name\" . . . &gt;<\/pre>\n<\/li>\n<li><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.00.46-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4057\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.00.46-PM.png\" alt=\"\" width=\"970\" height=\"674\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.00.46-PM.png 970w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.00.46-PM-300x208.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.00.46-PM-768x534.png 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/a><\/li>\n<li>Click Ok &gt; Save Changes.<\/li>\n<\/ul>\n<\/li>\n<li>Second, let&#8217;s format it so that the header is different from the rest of the table.\n<ul>\n<li>The Table editor we used above default the first header row to be of the same kind with other content rows, so we&#8217;d have to change that to apply a unique styling to the header alone. Click View &gt; Source Code.<\/li>\n<li>You&#8217;ll see that your table hierarchy is something something like this at the header section.<\/li>\n<li>\n<pre>&lt;table&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;First Header&lt;\/td&gt;\n      &lt;td&gt;Second Header&lt;\/td&gt;\n      &lt;td&gt;Third Header&lt;\/td&gt;\n    &lt;\/tr&gt;\n    &lt;!-- content part --&gt;\n  &lt;\/tbody&gt;\n&lt;table&gt;<\/pre>\n<\/li>\n<li>You&#8217;d need to change it into this. Be sure to keep all other attributes, (i.e. style).<\/li>\n<li>\n<pre>&lt;table&gt;\n &lt;thead&gt;\n   &lt;tr&gt;\n     &lt;th&gt;First Header&lt;\/th&gt;\n     &lt;th&gt;Second Header&lt;\/th&gt; \n     &lt;th&gt;Third Header&lt;\/th&gt; \n   &lt;\/tr&gt; \n  &lt;thead&gt;\n  &lt;tbody&gt;\n   &lt;!-- content part --&gt; \n  &lt;\/tbody&gt; \n&lt;table&gt;<\/pre>\n<\/li>\n<li>Mine turned out like this.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.57.54-AM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4056\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.57.54-AM.png\" alt=\"\" width=\"1004\" height=\"649\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.57.54-AM.png 1004w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.57.54-AM-300x194.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-11.57.54-AM-768x496.png 768w\" sizes=\"auto, (max-width: 1004px) 100vw, 1004px\" \/><\/a><\/li>\n<li>Click &#8220;Ok&#8221; and &#8220;Save Changes&#8221;.<\/li>\n<li>Navigate to the Course CSS stylesheet and add formatting to the table header following this syntax.<\/li>\n<li>\n<pre>#your-table-id-name th {\n  background-color: \/* any color you want *\/;\n  font-weight: bold;\n  line-height: 3;\n  color: #ffffff; \/* text color *\/\n}<\/pre>\n<\/li>\n<li><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.05.11-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4058\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.05.11-PM-1024x359.png\" alt=\"\" width=\"640\" height=\"224\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.05.11-PM-1024x359.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.05.11-PM-300x105.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.05.11-PM-768x270.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.05.11-PM.png 1396w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>&#8220;Save Course CSS&#8221; and view the result.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.06.44-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4059\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.06.44-PM-1024x536.png\" alt=\"\" width=\"640\" height=\"335\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.06.44-PM-1024x536.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.06.44-PM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.06.44-PM-768x402.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.06.44-PM.png 1858w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Next, let&#8217;s make the table alternate colors.\n<ul>\n<li>In the Course CSS stylesheet, add the following.<\/li>\n<li>\n<pre>\/* these formats apply to only the even rows *\/\n#your-table-id-name tbody tr:nth-child(even) {\n  background-color: #f2f2f2;\n}<\/pre>\n<\/li>\n<li><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.10.28-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4060\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.10.28-PM-1024x361.png\" alt=\"\" width=\"640\" height=\"226\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.10.28-PM-1024x361.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.10.28-PM-300x106.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.10.28-PM-768x271.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.10.28-PM.png 1390w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>&#8220;Save Course CSS&#8221; and view the result.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.11.33-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4061\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.11.33-PM-1024x536.png\" alt=\"\" width=\"640\" height=\"335\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.11.33-PM-1024x536.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.11.33-PM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.11.33-PM-768x402.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.11.33-PM.png 1858w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<li>Lastly, let&#8217;s make each row of the table hoverable.\n<ul>\n<li>In the Course CSS stylesheet, add the following.<\/li>\n<li>\n<pre>#your-table-id-name tbody tr:hover {\n  background-color: #ddd; \/* or any color you want *\/\n}<\/pre>\n<\/li>\n<li><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.15.10-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4063\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.15.10-PM-1024x357.png\" alt=\"\" width=\"640\" height=\"223\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.15.10-PM-1024x357.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.15.10-PM-300x105.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.15.10-PM-768x268.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.15.10-PM.png 1392w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<li>&#8220;Save Course CSS&#8221; and view the result.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.31.45-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4064\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.31.45-PM-1024x534.png\" alt=\"\" width=\"640\" height=\"334\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.31.45-PM-1024x534.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.31.45-PM-300x157.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.31.45-PM-768x401.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-12.31.45-PM.png 1861w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>Creating an Images Carousel<\/h2>\n<p>Lastly, we will be creating an image carousels!<\/p>\n<ol>\n<li>Prepare your images. Choose your images and then upload them to Box.<\/li>\n<li>Here&#8217;s the base HTML for the carousel.<\/li>\n<li>\n<pre>&lt;md-tabs flex=\"true\" md-dynamic-height=\"true\"\n md-border-bottom=\"true\"&gt;\n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt;\n    &lt;img src=[url-to-img]&gt;\n  &lt;\/md-tab&gt;\n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt;\n    &lt;img src=[url-to-img]&gt;\n  &lt;\/md-tab&gt;\n  &lt;!-- repeat md-tab until done --&gt;\n&lt;\/md-tabs&gt;<\/pre>\n<\/li>\n<li>Obtain the direct link for the images on Box and add them to the field [url-to-img].<\/li>\n<li>\n<pre>&lt;md-tabs flex=\"true\" md-dynamic-height=\"true\"\nmd-border-bottom=\"true\"&gt;\n  &lt;!-- first image --&gt;\n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt;\n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/\n    3tzbfpsv345nyae0gzd8647feovj5lis.jpg\"&gt;\n  &lt;\/md-tab&gt;\n  &lt;!-- second image --&gt;\n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt;\n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/\n    riqy63edlyhuanulaipzfhf8jl6dtz7z.jpg\"&gt;\n  &lt;\/md-tab&gt;\n  &lt;!-- third image --&gt;\n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt;\n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/\n    50k4zc9khrzrv6gxaovbget1d104rzus.jpeg\"&gt;\n  &lt;\/md-tab&gt;\n  &lt;!-- fourth image --&gt;\n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt;\n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/\n    f8jnwuxepycsc5z7om59ty0vzr8s8k26.jpg\"&gt;\n  &lt;\/md-tab&gt;\n&lt;\/md-tabs&gt;<\/pre>\n<\/li>\n<li>For each image, normalize them to a similar width and height by giving them the same width. Note that by setting the width, the height is automatically scaled. You might want to play around with these values depending on the orientation of your image.<\/li>\n<li>\n<pre>&lt;md-tabs flex=\"true\" md-dynamic-height=\"true\" \nmd-border-bottom=\"true\"&gt; \n  &lt;!-- first image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    3tzbfpsv345nyae0gzd8647feovj5lis.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- second image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    riqy63edlyhuanulaipzfhf8jl6dtz7z.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- third image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    50k4zc9khrzrv6gxaovbget1d104rzus.jpeg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- fourth image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/\n    f8jnwuxepycsc5z7om59ty0vzr8s8k26.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n&lt;\/md-tabs&gt;<\/pre>\n<\/li>\n<li>Add a label to each md-tab for each image&#8217;s name.<\/li>\n<li>\n<pre>&lt;md-tabs flex=\"true\" md-dynamic-height=\"true\" \nmd-border-bottom=\"true\"&gt; \n  &lt;!-- first image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Konstantin Andreevich Somov\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    3tzbfpsv345nyae0gzd8647feovj5lis.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- second image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Jan Cia\u0328glin\u0301ski\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    riqy63edlyhuanulaipzfhf8jl6dtz7z.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- third image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Another Somov painting\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    50k4zc9khrzrv6gxaovbget1d104rzus.jpeg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- fourth image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Donald Sheridan\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    f8jnwuxepycsc5z7om59ty0vzr8s8k26.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n&lt;\/md-tabs&gt;<\/pre>\n<\/li>\n<li>Lastly, wraps the entire &lt;md-tabs&gt; content in a &lt;p&gt; tag to align the content center.<\/li>\n<li>\n<pre>&lt;p style=\"text-align:center\"&gt;\n&lt;md-tabs flex=\"true\" md-dynamic-height=\"true\" \nmd-border-bottom=\"true\"&gt; \n  &lt;!-- first image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Konstantin Andreevich Somov\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    3tzbfpsv345nyae0gzd8647feovj5lis.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- second image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Jan Cia\u0328glin\u0301ski\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    riqy63edlyhuanulaipzfhf8jl6dtz7z.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- third image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Another Somov painting\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    50k4zc9khrzrv6gxaovbget1d104rzus.jpeg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n  &lt;!-- fourth image --&gt; \n  &lt;md-tab flex=\"true\" class=\"tabbed-content\"\n  label=\"Donald Sheridan\"&gt; \n    &lt;img src=\"https:\/\/utexas.box.com\/shared\/static\/ \n    f8jnwuxepycsc5z7om59ty0vzr8s8k26.jpg\" width=\"400\"&gt; \n  &lt;\/md-tab&gt; \n&lt;\/md-tabs&gt;\n&lt;\/p&gt;<\/pre>\n<\/li>\n<li>Choose a card where you&#8217;d like to place the carousel, and click View &gt; Source Code. Then paste the code in where you&#8217;d like it.\u00a0<strong>Note: for displaying purposes, the url up here are broke into separate lines. Please keep them on one line.<a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-2.00.23-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-4070\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-2.00.23-PM-1024x647.png\" alt=\"\" width=\"640\" height=\"404\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-2.00.23-PM-1024x647.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-2.00.23-PM-300x190.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-2.00.23-PM-768x485.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/Screen-Shot-2020-08-03-at-2.00.23-PM.png 1245w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/strong><\/li>\n<li>&#8220;Save Changes&#8221; and view the result.<\/li>\n<\/ol>\n<p>Yay! You&#8217;ve done a great job! Hope you have fun playing around with HTML \/ CSS, and CLIO. Feel free to check out the demo site\u00a0<a href=\"https:\/\/clio.la.utexas.edu\/module\/1407#!\/activity_toc\">here<\/a>\u00a0if you&#8217;d like a reference at any time!<\/p>\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/basic-training-last-steps.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3860\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/basic-training-last-steps-1024x341.png\" alt=\"\" width=\"640\" height=\"213\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/basic-training-last-steps-1024x341.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/basic-training-last-steps-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2020\/07\/basic-training-last-steps-768x256.png 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this second part of CLIO training you will be doing more advanced stylings using CSS classes and HTML code snippets. Part 1: Getting Familiar with the basics of the Chrome Inspect Tool These set of instructions will be utilizing &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2020\/07\/29\/how-to-create-a-clio-course-module-part-2\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":744,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200704],"tags":[],"class_list":["post-3968","post","type-post","status-publish","format-standard","hentry","category-clio"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/3968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/744"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=3968"}],"version-history":[{"count":33,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/3968\/revisions"}],"predecessor-version":[{"id":5346,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/3968\/revisions\/5346"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=3968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=3968"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=3968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}