{"id":2237,"date":"2019-08-30T02:13:11","date_gmt":"2019-08-30T02:13:11","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=2237"},"modified":"2020-03-02T19:32:36","modified_gmt":"2020-03-02T19:32:36","slug":"basic-training-for-clio","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2019\/08\/30\/basic-training-for-clio\/","title":{"rendered":"Editing in CLIO [Basic]"},"content":{"rendered":"

I. <\/b>Adding Activities & Cards<\/b><\/span><\/h3>\n

1. To start adding content\/ editing in your new CLIO site, click on \u201cEDIT THIS\u201d button on the left side:<\/p>\n

\"\"<\/a><\/p>\n

2. To add a new activity, click on the \u201cAdd new activity + \u201c button.<\/p>\n

\"\"<\/a><\/p>\n

3. And name your activity and click \u201cSave Changes.\u201d<\/p>\n

\"\"<\/a><\/p>\n

4. Once you\u2019ve created the activity, you can start adding Cards. In the text box, you can add whatever content you want, which includes text, images, videos, and more. All the tools are included in the toolbox right above the text box.<\/p>\n

\"\"<\/a><\/p>\n

II. <\/b>Adding CSS\/HTML codes for CLIO site<\/b><\/span><\/h3>\n

To go to the CSS\/HTML editing page, you will see the \u201cEdit Course\u201d option at the top right hand corner.<\/p>\n

\"\"<\/a><\/p>\n

Adding & Editing Card Headers<\/i><\/b><\/span>:<\/i><\/b><\/h3>\n

Code Snippet for card headers:<\/p>\n

\n
.icon .card-header {\r\nwidth: 100%;\r\n\u00a0 \u00a0 <\/span>height: 2.8em;\r\n\u00a0 \u00a0 <\/span>background-position: left;\r\n\u00a0 \u00a0 <\/span>background-repeat: no-repeat;\r\n\u00a0 \u00a0 <\/span>background-color: #6b7dbb;\r\ntext-align: center;\r\nfont-size: 1.9em;\r\nfont-weight: regular;\r\ncolor: #fff;\r\nline-height: 3;\r\n}<\/pre>\n
.peach .card-header {\r\nwidth: 100%;\r\n\u00a0 \u00a0 <\/span>height: 2.8em;\r\n\u00a0 \u00a0 <\/span>background-position: left;\r\n\u00a0 \u00a0 <\/span>background-repeat: no-repeat;\r\n\u00a0 \u00a0 <\/span>background-color: #df9670;\r\ntext-align: center;\r\nfont-size: 1.6em;\r\nfont-weight: lighter;\r\ncolor: #fff;\r\nline-height: 3;\r\n}<\/pre>\n<\/blockquote>\n
**When you are copy & pasting the codes, make sure that everything, including the closing bracket “}<\/strong>” is at the end of the code! If your code turns bright red, that means that there is a problem\/ an error**<\/em><\/p>\n
You can change the color of the header by replacing it with the hex code (of the color) you want!!!<\/i><\/b> Like this:<\/span><\/p>\n
\"\"<\/a><\/p>\n
(another one):<\/p>\n
\"\"<\/a><\/p>\n
For each new card you make, you are going to create an \u201cIcon.\u201d To do that, first, copy and paste this code snippet:<\/i><\/b><\/p>\n
\n
.Check02 .card-header {\r\n\/* background-image: url(https:\/\/resource-space.la.utexas.edu\/filestore\/7\/1_cd2bec5478c2bff\/71pre_5aff1d3b1dd12a9.jpg?v=2016-05-10+14%3A11%3A42);\r\n*\/}\r\n.Check02.icon .card-header:after {\r\n\u00a0 \u00a0 <\/span>content: \"Let's Create Your Best Life!\";\r\n}<\/pre>\n<\/blockquote>\n
\"\"<\/a><\/p>\n
Then, once you have pasted the code, you are going to RENAME the card header icon. Refer to the instructions below:<\/i><\/b><\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
& make sure you put the appropriate card header title, too!!<\/i><\/b><\/p>\n
\"\"<\/a><\/p>\n
Once you\u2019ve done that, make sure to click \u201cSave Course CSS\u201d to ensure that you have saved all the work you\u2019ve just done. Then, we are going to implement this new card header we just created into the actual CLIO Activity site:<\/i><\/b><\/p>\n
\"\"<\/a><\/p>\n
Then save your work. And refresh the CLIO page (not the page that you\u2019ve been editing on) to see that you\u2019ve placed the header successfully!<\/i><\/b><\/p>\n
\"\"<\/a><\/p>\n
CHANGING THE HOMEPAGE BANNER COLOR (OVERRIDE THE DEFAULT ORANGE)<\/i><\/b><\/span><\/p>\n
1. This is an example of the red+dark red stripes banner CSS code that overrode the default orange color of the Canvas CLIO site:<\/p>\n
\n
.nav-bar {\r\n\u00a0 <\/span>background-color: red !important;\r\n\u00a0 <\/span>background: repeating-linear-gradient(45deg,rgba(201, 54, 49, .9),rgba(201, 54, 49, .9)30px,rgba(181, 48, 44, .9)30px,rgba(181, 48, 44, .9)40px) !important\r\n}<\/pre>\n<\/blockquote>\n
2. You want to know the RGB for the color that you want to insert, and the \u201cA\u201d is for the opacity of the color on the banner. But the most important thing is that you need the \u201c(color) !important\u201d to override the default orange color.<\/p>\n
III. <\/b>Adding Images through CSS\/HTML<\/b><\/span><\/p>\n
1. In any card on the editing page, click on the \u201cadd image\u201d icon. Open up the image that you want from your computer, and before you hit \u201cSave,\u201d this window would pop up:<\/p>\n
\"\"<\/a><\/p>\n
2. Click on the link and copy it (Command + C). Go back to the CSS editing page, and in the code snippet that you want the image placed, just paste the link between \u201c \u201c. For an example:<\/p>\n
\"\"<\/a><\/p>\n
3. Make sure that any icons\/ logos\/ images that you\u2019ve uploaded on the course CSS has been saved and implemented on the actual website (by refreshing the page after you save your work)!<\/p>\n
IV. <\/b>Adding & Editing Image Slides<\/b><\/span>:<\/b><\/p>\n
1. In the Card that you want to add photo slides into, go to \u201cTools\u201d > \u201cSource Code\u201d<\/p>\n
\"\"<\/a><\/p>\n
2. Use this coding snippet as a reference\/guide, but change the image URL & the captions accordingly:<\/p>\n
<p style=”text-align: center;”><md-tabs flex=”true” md-dynamic-height=”true” md-border-bottom=”true”> <md-tab flex=”true” label=”Castor canadien<\/span>” class=”tabbed-content”><img src=”https:\/\/minio.la.utexas.edu\/clio-prod\/module_579\/5a8RH7BlhvlKaumD1FhAS54or60Y0CVsEGwvNZd2.png<\/span>” alt=”Castor drawing” width=”512″ height=”268″ \/><br \/><em><span style=”color: #434652;”>Castor canadien.<\/span><\/span><\/em><\/md-tab> <md-tab flex=”true” label=”Guerrier Iroquois<\/span>” class=”tabbed-content”><img src=”https:\/\/minio.la.utexas.edu\/clio-prod\/module_579\/X75qlYZVgAtLkyLe48UtSMAtcPPZWxwHA0kQGWYB.jpeg<\/span>” alt=”Iroquois warrior” width=”256″ height=”384″ \/><br \/><em><span style=”color: #434652;”>Guerrier Iroquois.<\/span><\/span><\/em><\/md-tab> <md-tab flex=”true” label=”Un Huron<\/span>” class=”tabbed-content”><img src=”https:\/\/minio.la.utexas.edu\/clio-prod\/module_579\/rcH2qFvA6u6nv8aSsYunuOd4KdpU3nPbAOCRPfBp.jpeg<\/span>” alt=”Huron” width=”312″ height=”384″ \/><br \/><em><span style=”color: #434652;”>Un Huron.<\/span> <\/span><\/em><\/md-tab> <md-tab flex=”true” label=”Des Algonquins<\/span>” class=”tabbed-content”><img src=”https:\/\/minio.la.utexas.edu\/clio-prod\/module_579\/j30KrpCeJnEoITCgTeKXcHILCK3ipSnQh6z4w5wi.png<\/span>” alt=”” width=”281″ height=”383″ \/><br \/><em><span style=”color: #434652;”>Des Algonquins.<\/span><\/span><\/em><\/md-tab> <md-tab flex=”true” label=”Missionnaire j&eacute;suite au 17&egrave; si&egrave;cle<\/span>” class=”tabbed-content”><img src=”https:\/\/minio.la.utexas.edu\/clio-prod\/module_579\/JwYaNhYZ0DenHpYmMEUm8s8B2ZKJRRnVKQsbReRT.jpeg<\/span>” alt=”Jesuit missionaries 17th Century” width=”256″ height=”340″ \/><br \/><em><span style=”color: #434652;”>Missionnaire j&eacute;suite au 17&egrave; si&egrave;cle.<\/span> <\/span><\/em><\/md-tab><\/md-tabs><\/p><\/p>\n
An example of the final product!!<\/p>\n
Photo_Slide_CLIO<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
I. Adding Activities & Cards 1. To start adding content\/ editing in your new CLIO site, click on \u201cEDIT THIS\u201d button on the left side: 2. To add a new activity, click on the \u201cAdd new activity + \u201c button. … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":699,"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-2237","post","type-post","status-publish","format-standard","hentry","category-clio"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2237","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\/699"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=2237"}],"version-history":[{"count":5,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2683,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/2237\/revisions\/2683"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}