{"id":1289,"date":"2018-03-22T23:31:57","date_gmt":"2018-03-22T23:31:57","guid":{"rendered":"http:\/\/moodleuserguides.org\/?post_type=kbe_knowledgebase&amp;p=1229"},"modified":"2018-03-22T23:31:57","modified_gmt":"2018-03-22T23:31:57","slug":"add-banner-homepage","status":"publish","type":"bwl_kb","link":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/elearning\/add-banner-homepage\/","title":{"rendered":"Add a Banner to the Homepage"},"content":{"rendered":"<p style=\"margin-bottom:0\">Adding a banner to your course homepage can help \"anchor\" the page. It also makes your course look welcoming and professional. There are two main ways to add a banner to your main course page in Moodle. The first method (covered in the first video) is easier, but less flexible. The second method (covered in the second video and the text instructions) involves more steps, but it is also more flexible. See the screenshots below for 3 different examples of banners created using the second method.<\/p>\n\n<div class=\"top-boxes\">\n<div class=\"tip\">\n<p>this text will be removed<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/tip.png\" alt=\"\" width=\"50\" class=\"no-shadow\"\/><\/p>\n<h3>Tips<\/h3>\n<p>Although it involves more steps, the second method of adding a banner is better for accessibility because the text is on the page rather than in an image, which can\u2019t be read by screen readers. Making a banner this way also allows for greater flexibility.\n<\/p><\/div>\n<div class=\"reminder\">\n<p>this text will be removed<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/reminder2.png\" alt=\"\" width=\"50\" class=\"no-shadow\"\/><\/p>\n<h3>Reminder<\/h3>\n<p>Make sure\u00a0to <strong>Turn editing on<\/strong> before getting started with this guide.\n<\/div>\n<\/div>\n<h2>Video Overview: Method 1 (adding a banner as a picture)<\/h2>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/62LqYfFkGL4?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h2 style=\"margin-top:55px\">Video Overview: Method 2 (adding a banner using the html editor)<\/h2>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/63Vh1SiTB9o?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<div class=\"steps-section\">\n<h2 class=\"steps-top\">\n<div class=\"altblock\"><span>Part<br \/>1<\/span><\/div>\n<p><span class=\"kb-headline\">Add the image(s)<\/span><\/h2>\n<ol class=\"new-steps\">\n<li>Find or create any graphics you want to be in your banner. Check out <a href=\"https:\/\/pixabay.com\/\">pixabay.com<\/a> for free, high-quality photos and clip-art you can use (this is where I got the images used in my 3 example banners). Note that you\u2019ll want to choose an image with a transparent background for example A.<\/li>\n<li>On the main page of your Moodle course, select <strong>Edit section<\/strong> from the \"Edit\" drop-down for the main section.<\/li>\n<li>In the summary area, click the <strong>picture icon<\/strong>.<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-insert-image.png\" alt=\"review text for instructions\" class=\"alignnone size-full wp-image-1238\" style=\"width:60%\"\/><\/p>\n<li>Click <strong>Find or upload an image<\/strong>.<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-find-upload2.png\" alt=\"review text for instructions\" class=\"alignnone size-full wp-image-1239\" style=\"width:60%\"\/><\/p>\n<li>In the file picker, make sure you are in the \"Upload a file\" area. Click <strong>Choose file<\/strong> and select the image you saved in step 1. Enter a name in the \"Save as\" field and click <strong>Upload this file<\/strong>.<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-file-picker.png\" alt=\"review text for instructions\" class=\"alignnone size-full wp-image-1241\" style=\"width:60%\"\/><\/p>\n<li>In the dialog box that opens, enter alt text (a short description of what is shown in the picture) and click <strong>Insert<\/strong>.<\/li>\n<\/ol>\n<\/div>\n<div class=\"steps-section\" style=\"margin-bottom:0\">\n<h2 class=\"steps-top\">\n<div class=\"altblock\"><span>Part<br \/>2<\/span><\/div>\n<p><span class=\"kb-headline\">Add code<\/span><\/h2>\n<ol class=\"new-steps\">\n<li>Click the code icon to access the html editor (you may have to click the toolbar toggle in the upper left to see the html editor icon).<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-edit-html.png\" alt=\"review text for instructions\" class=\"alignnone size-full wp-image-1242\" style=\"width:60%\"\/>\t<\/p>\n<li>In the html editor, copy and paste the code shown at the end of this guide (you can just paste it underneath the code that is already in the html editor).<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-add-code2.png\" alt=\"review text for instructions\" class=\"alignnone size-full wp-image-1243\" style=\"width:60%\"\/>\t<\/p>\n<li>Replace the image url from the code you just pasted with the url of the image you inserted in part 1 (just copy and paste it). In the screenshot below, my image url is the same as the one in the example, but your image url will be different. Also replace the title with your course's title. The parts you'll want to replace are highlighted in yellow in the code.<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-replace2.png\" alt=\"review text for instructions\" class=\"alignnone size-full wp-image-1245\" style=\"width:60%\"\/><\/p>\n<li>Once you've updated the image url and course title, you can delete the code that was already in the html editor when you opened it.<\/li>\n<p><img decoding=\"async\" src=\"http:\/\/moodleuserguides.org\/wp-content\/uploads\/2018\/03\/banner-delete2.png\" alt=\"review text for instructions\" class=\"no-shadow alignnone size-full wp-image-1244\" style=\"width:90%\" \/><\/p>\n<li>Click <strong>Update<\/strong> in the html editor and then <strong>Save changes<\/strong>.<\/li>\n<\/ol>\n<\/div>\n<div style=\"background-color: #fff; padding: 22px 22px 20px 22px; margin-bottom: 75px; margin-top: 1.6em;\">\n<h3 style=\"margin-top: 20px\">Code for Example A:<\/h3>\n<pre style=\"margin-bottom: 20px;\" id=\"p1\"><span style=\"color: blue;\">&lt;div<\/span> <span style=\"color: #cc0000;\">width<\/span>=<span style=\"color: purple;\">\"100%\"<\/span> <span style=\"color: #cc0000;\">style<\/span>=<span style=\"color: purple;\">\"background: wheat;\"<\/span><span style=\"color: blue;\">&gt;<\/span>\n   <span style=\"color: blue;\">&lt;img<\/span> <span style=\"color: #cc0000;\">src<\/span>=<span style=\"color: purple;\">\"<span style=\"background-color: #fff2cc;\">https:\/\/moodle.wou.edu\/draftfile.php\/207546\/user\/draft\/944395212\/bell-peppers.png<\/span>\"<\/span> <span style=\"color: #cc0000;\">width<\/span>=<span style=\"color: purple;\">\"20%\"<\/span> <span style=\"color: #cc0000;\">alt<\/span>=<span style=\"color: purple;\">\"<span style=\"background-color: #fff2cc;\">Colorful bell peppers<\/span>\"<\/span> <span style=\"color: blue;\">\/&gt;<\/span>\n   <span style=\"color: blue;\">&lt;h1<\/span> <span style=\"color: #cc0000;\">style<\/span>=<span style=\"color: purple;\">\"display: inline-block; vertical-align: middle;\"<\/span><span style=\"color: blue;\">&gt;<\/span><span style=\"background-color: #fff2cc;\">NUTR 211<\/span><span style=\"color: blue;\">&lt;br&gt;<\/span><span style=\"background-color: #fff2cc;\">Nutrition Through The Lifecycle<\/span><span style=\"color: blue;\">&lt;\/h1&gt;<\/span>\n<span style=\"color: blue;\">&lt;\/div&gt;<\/span><\/pre>\n<p><!--<button onclick=\"copyToClipboard('#p1')\">Copy Code for Example A<\/button><br \/>--><\/p>\n<h3 style=\"margin-top: 50px;\">\nCode for Example B:<\/h3>\n<pre style=\"margin-bottom: 20px;\" id=\"p2\"><span style=\"color: blue;\">&lt;div<\/span> <span style=\"color: #cc0000;\">width<\/span>=<span style=\"color: purple;\">\"100%\"<\/span> <span style=\"color: #cc0000;\">style<\/span>=<span style=\"color: purple;\">\"padding: 5%;&nbsp;border:&nbsp;1px solid gray;\"<\/span><span style=\"color: blue;\">&gt;<\/span>\n   <span style=\"color: blue;\">&lt;img<\/span> <span style=\"color: #cc0000;\">src<\/span>=<span style=\"color: purple;\">\"<span style=\"background-color: #fff2cc;\">https:\/\/moodle.wou.edu\/pluginfile.php\/292348\/course\/section\/59494\/human-lifecycle.jpg<\/span>\"<\/span> <span style=\"color: #cc0000;\">width<\/span>=<span style=\"color: purple;\">\"40%\"<\/span> <span style=\"color: #cc0000;\">alt<\/span>=<span style=\"color: purple;\">\"<span style=\"background-color: #fff2cc;\">A woman going from baby to senior<\/span>\"<\/span> <span style=\"color: blue;\">\/&gt;<\/span>\n<span style=\"color: blue;\">&lt;h1<\/span> <span style=\"color: #cc0000;\">style<\/span>=<span style=\"color: purple;\">\"display: inline-block;\"<\/span><span style=\"color: blue;\">&gt;<\/span><span style=\"background-color: #fff2cc;\">NUTR 211<\/span><span style=\"color: blue;\">&lt;br&gt;<\/span><span style=\"background-color: #fff2cc;\">Nutrition Through The Lifecycle<\/span><span style=\"color: blue;\">&lt;\/h1&gt;<\/span>\n<span style=\"color: blue;\">&lt;\/div&gt;<\/span><\/pre>\n<p><!--<button onclick=\"copyToClipboard('#p2')\">Copy Code for Example B<\/button><br \/>--><\/p>\n<h3 style=\"margin-top: 50px;\">\nCode for Example C:<\/h3>\n<pre style=\"margin-bottom: 20px;\" id=\"p3\"><span style=\"color: blue;\">&lt;div<\/span> <span style=\"color: #cc0000;\">width<\/span>=<span style=\"color: purple;\">\"100%\"<\/span> style=<span style=\"color: purple;\">\"padding: 5%;&nbsp; background: url('<span style=\"background-color: #fff2cc;\">https:\/\/moodle.wou.edu\/pluginfile.php\/292348\/course\/section\/59494\/cutting-board-veggies.jpg<\/span>') no-repeat right bottom;\"<\/span><span style=\"color: blue;\">&gt;<\/span>\n   <span style=\"color: blue;\">&lt;h1<\/span> <span style=\"color: #cc0000;\">style<\/span>=<span style=\"color: purple;\">\"background: rgba(255,255,255,0.8); padding: 1%; text-align: center;&nbsp; margin: 0 auto; display: table;\"<\/span><span style=\"color: blue;\">&gt;<\/span><span style=\"background-color: #fff2cc;\">NUTR 211<\/span><span style=\"color: blue;\">&lt;br&gt;<\/span><span style=\"background-color: #fff2cc;\">Nutrition Through The Lifecycle<\/span><span style=\"color: blue;\">&lt;\/h1&gt;<\/span>\n<span style=\"color: blue;\">&lt;\/div&gt;<\/span><\/pre>\n<p><!--<button onclick=\"copyToClipboard('#p3')\">Copy Code for Example C<\/button><br \/>-->\n\t<\/div>\n<h2>FAQs<\/h2>\n<h3 class=\"faq-q\">What do the different code parts mean?<\/h3>\n<p style=\"margin-top: 0;\"><a href=\"#\" data-featherlight=\"#fl1\">Learn more about the code<\/a><\/p>\n<div class=\"lightbox\" id=\"fl1\">\n<table>\n<tbody>\n<tr>\n<th>Code<\/th>\n<th>Meaning<\/th>\n<\/tr>\n<tr>\n<td>alt=<\/td>\n<td>This is where you enter alt (alternative) text for your image so screen readers can \u201cexplain\u201d the image.<\/td>\n<\/tr>\n<tr>\n<td>background: rgba(255,255,255,0.8)<\/td>\n<td>RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. In our example, the first three numbers (255,255,255) set the background color to white and the last number (0.8) makes it slightly transparent.<\/td>\n<\/tr>\n<tr>\n<td>background: url('imageURL') no-repeat right bottom<\/td>\n<td>Puts an image into the background of our banner. The \u201cno-repeat\u201d part indicates that we only want the image to appear once while the \u201cright bottom\u201d part says where we want the image to be positioned. Learn about <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_background-position.asp\">other positioning options<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>background: wheat<\/td>\n<td>Sets the background of our banner to the color \u201cwheat.\u201d See a list of <a href=\"https:\/\/www.w3schools.com\/cssref\/css_colors.asp\">other color options<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>border: 1px solid gray<\/td>\n<td>Adds a border. The first value (1px) is the border width, the second value (solid) is the border style, and the third value (gray) is the border color. See <a href=\"https:\/\/www.w3schools.com\/css\/css_border.asp\">more border styles<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>br<\/td>\n<td>A line break.<\/td>\n<\/tr>\n<tr>\n<td>display: inline-block<\/td>\n<td>Tells the element to allow other elements on the same line.<\/td>\n<\/tr>\n<tr>\n<td>display: table<\/td>\n<td>Tells the element to display like a table. In our example, this allows us to prevent the semi-transparent white background from being its full width.<\/td>\n<\/tr>\n<tr>\n<td>div<\/td>\n<td>A div is like a container \u2013 it\u2019s the container for our banner.<\/td>\n<\/tr>\n<tr>\n<td>div<\/td>\n<td>A div is like a container \u2013 it\u2019s the container for our banner.<\/td>\n<\/tr>\n<tr>\n<td>h1<\/td>\n<td>Indicates a top-level heading (heading 1). This will make the text bigger and add some margin.<\/td>\n<\/tr>\n<tr>\n<td>img src=<\/td>\n<td>The image tag indicates we are about to add an image and the src= part says where to find the image (the url in our case).<\/td>\n<\/tr>\n<tr>\n<td>margin: 0 auto<\/td>\n<td>The first value (0) sets the top and bottom margins while the second value (auto) sets the left and right margins. Setting left and right margins to \u201cauto\u201d is a common way for horizontally centering an element on a page.<\/td>\n<\/tr>\n<tr>\n<td>padding<\/td>\n<td>Adds padding (space) between elements. We usually use this to keep text from being too close to things like borders and images.<\/td>\n<\/tr>\n<tr>\n<td>style<\/td>\n<td>Indicates we are about to add CSS code, which we use to style html.<\/td>\n<\/tr>\n<tr>\n<td>text-align: center<\/td>\n<td>Center aligns text. You can also use \u201cleft\u201d (the default), \u201cright,\u201d or \u201cjustify.\u201d<\/td>\n<\/tr>\n<tr>\n<td>vertical-align: middle<\/td>\n<td>Centers the text vertically.<\/td>\n<\/tr>\n<tr>\n<td>width<\/td>\n<td>Sets the width. We use % for width so elements can resize.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"template":"","bkb_category":[],"bkb_tags":[],"class_list":["post-1289","bwl_kb","type-bwl_kb","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/bwl_kb\/1289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/bwl_kb"}],"about":[{"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/types\/bwl_kb"}],"author":[{"embeddable":true,"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/bwl_kb\/1289\/revisions"}],"wp:attachment":[{"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1289"}],"wp:term":[{"taxonomy":"bkb_category","embeddable":true,"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/bkb_category?post=1289"},{"taxonomy":"bkb_tags","embeddable":true,"href":"https:\/\/support.epembelajaran.umt.edu.my\/knowledgebase\/wp-json\/wp\/v2\/bkb_tags?post=1289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}