LMS Guides - VES SCHOOL
LMS VES

Add a Banner to the Homepage

Created On September 04, 2023
| Last Updated On September 04, 2023
37/ 47

 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.


Example A


Example B


Example 3

 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’t be read by screen readers. Making a banner this way also allows for greater flexibility.

Video Overview: Method 1 (adding a banner as a picture)

Video Overview: Method 2 (adding a banner using the html editor)

Part 1

ADD THE IMAGE(S)

 
  1. Find or create any graphics you want to be in your banner. Check out pixabay.com 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’ll want to choose an image with a transparent background for example A.
  2. On the main page of your course, select Edit section from the "Edit" drop-down for the main section.
  3. In the summary area, click the picture icon.

    review text for instructions
  4. Click Find or upload an image.

    review text for instructions
  5. In the file picker, make sure you are in the "Upload a file" area. Click Choose file and select the image you saved in step 1. Enter a name in the "Save as" field and click Upload this file.

    review text for instructions
  6. In the dialog box that opens, enter alt text (a short description of what is shown in the picture) and click Insert.
Part 2

ADD THE CODE

 
  1. 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).

    review text for instructions
  2. 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).

    review text for instructions
  3. 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.

    review text for instructions
  4. 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.

    review text for instructions
  5. Click Update in the html editor and then Save changes. 

Code for Example A:


 
Colorful bell peppers

NUTR 211
Nutrition Through The Lifecycle

Code for Example B:


 
A woman going from baby to senior

NUTR 211
Nutrition Through The Lifecycle

Code for Example C:


 

NUTR 211
Nutrition Through The Lifecycle

FAQs

What do the different code parts mean?
Code Meaning
alt= This is where you enter alt (alternative) text for your image so screen readers can describe the image.
background: rgba(255,255,255,0.8) 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.
background: url('imageURL') no-repeat right bottom Puts an image into the background of our banner. The “no-repeat” part indicates that we only want the image to appear once while the “right bottom” part says where we want the image to be positioned. Learn about other positioning options.
background: wheat Sets the background of our banner to the color "wheat." See a list of other color options.
border: 1px solid gray 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 more border styles.
br A line break.
display: inline-block Tells the element to allow other elements on the same line.
display: table 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.
div A div is like a container – it’s the container for our banner.
h1 Indicates a top-level heading (heading 1). Use heading 1 for the course title.
img src= 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).
margin: 0 auto 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 "auto" is a common way for horizontally centering an element on a page.
padding Adds padding (space) between elements. We usually use this to keep text from being too close to things like borders and images.
style Indicates we are about to add CSS code, which we use to style html.
text-align: center Center aligns text. You can also use "left" (the default), "right," or "justify."
vertical-align: middle Centers the text vertically.
width Sets the width. We use % for width so elements can resize.
37/ 47
arrow_right_alt Create a Question Bank Question
arrow_right_alt Add a Custom Block
arrow_right_alt Go back all guides