To add space around images, use the "padding" attribute. The code below will put 10 pixels of space around all four sides of an image:

Transcription

1 GenEd Canvas Template HTML Cheat Sheet How to build a text margin cushion around images/white space For those who aren't ready for that step, how to right justify to wrap words around an image Grey divider code from syllabus page to reproduce for more sections in a syllabus How to make buttons at bottom of page To add the home icon to the button Getting rid of placeholders Can we either learn to place additional items in the Navigation drop down or learn quick hack for links to non-navigation pages/sites? How to build a text margin cushion around images/white space To add space around images, use the "padding" attribute. The code below will put 10 pixels of space around all four sides of an image: <p><img style="float: right; padding: 10px; width: 15%; height: auto;" src=" alt="image title" width="200" height="200" data-apiendpoint=" /> This will put: 10 pixels of space on the top 5 pixels of space on the right side 8 pixels of space on the bottom 7 pixels of space on the left: <p><img style="float: right; padding: 10px 5px 8px 7px; width: 15%; height: auto;" src=" alt="image title" width="200" height="200" data-apiendpoint=" /> For those who aren't ready for that step, how to right justify to wrap words around an image. This can be done just using tools in the RCE tool bar:

2 Grey divider code from syllabus page to reproduce for more sections in a syllabus. <p style="text-align: center;"><strong><span style="background-color: #eeeeee; display: block;">insert text here</span></strong></p> How to make buttons at bottom of page The decision was made not to have links open in new tabs/windows, so that s why there s dead end flow. To force links to open in new pages (e.g. learning pathway to syllabus, you simply add a target= _blank in the code. So, for example, the code in the bulleted learning pathway link to the syllabus currently looks like this: <li>read the <a title="course Syllabus" href=" syllabus</a>.</li> If you want the syllabus to open in a new window, change it to this: <li>read the <a title="course Syllabus" target= _blank href=" syllabus</a>.</li> The code for course home button is copied below: <div style="margin: 5% 0 0 0;"> <h4 style="text-align: center;"><a id="" class="btn-primary btn" title="home"><img style="margin: -3px 5px 0-5px;" src=" alt="home Icon" width="24" height="24" data-apiendpoint=" />Course Home</a></h4> <div> To add the home icon to the button Replace the yellow-highlighted text with the actual course and file numbers. To find the numbers, go into the files area and click on the image/file you want to use (see screenshot example).

3 Once you ve finished the code: 1. Go back to the Rich Content editor 2. Highlight the button text (top screenshot below) 3. Select the page (e.g. Home) you want the button to take users to (bottom screenshot below) Here s the code for module home button: <div style="margin: 5% 0 0 0;"> <h4 style="text-align: center;"><a class="btn-info btn" title="module Home ><img style="margin: -3px 5px 0-5px;" src=" alt="home Icon" width="24" height="24" data-apiendpoint=" />Module Home</a></h4> </div> Adding the home icon to the module home button is the same process described above the course home. Once you ve added the code: 4. Go back to the Rich Content editor

4 5. Highlight the button text (top screenshot below) 6. Select the page (e.g. Module 1 Home) you want the button to take users to (bottom screenshot below) Getting rid of placeholders The cleanest and foolestproof (ß not a word J) way to get rid of images is to go into the HTML editor and wipe out the everything inside of the IMG tag:

5 To replace the image with another, I d just replace the file # in the image tag with the new file # (as explained earlier) and make adjustments to the width and height as needed. Can we either learn to place additional items in the Navigation drop down or learn quick hack for links to non-navigation pages/sites? There s no way ODE instructional designers are aware of to add items to the right-side links tab. The only suggestion is to right click on the item you want to link to and select copy link address from the menu. Then paste that link as the URL in a hyperlink tag where desired.