Custom Course Page in Weblearning – The Next Step
In this article, I will be elaborating on the design features we went over in the last article Custom Course Page in Weblearning – The Basics.
Upload a banner file and a logo
Note: The banner size needs to be 800 by 150 pixels to be displayed properly
(If you are unsure how to upload files, please read Custom Course Page in Weblearning – The Basics)
Adding Your Banner
Ok, now that your files are sized and uploaded, you want to add the banner to your existing course. This is done by clicking your Courses tab > admin tools > properties and settings.
Select the banner image that you uploaded from the banner drop down menu.
Click the Layout & Design tab > Login Page.
We now want to insert our logo in place of the arrow and change/add some wording. (You may have already done this in the previous tutorial) To change the background color of text, select the text and click the background color button at the top of the editor.
Now click the Text Editor Plugins button to bring up your editor features. After you have done this, we want to put in a line to separate the content we are about to add. One way is to use on the Insert Line feature to add a line. The other is to copy and paste the top line. This can be done by selecting the line, right click and select copy (ctrl + c). Place the cursor where you want to place it, right click and select paste (ctrl + v).
Now that we have a separation line, we will add some bold text then a youTube movie below.
To add the youTube movie, click the youTube movie button. Put in the web address and click OK.
We are now done editing the login page so if you haven’t done so already, you want to preview it and make sure everything displays the way you want. You should have something that looks like this…
Before I go any farther, if you know HTML you can do some advanced editing by clicking the HTML tab. If you do not know HTML and plan to do a lot of customization, it would be helpful to at least learn some basics.
Section 2: Customizing Tabs
Now navigate to Tab 1
Important Note: All buttons and tools discussed below are in the top of the editor. If you hover your mouse over each tool, it will give you a tool tip saying what the button is.
We now want to insert a table and align all of the information inside it to the center. Click the Add Table button.
Select the amount of rows (horizontal) and columns (vertical) you would like. I am going to create a 3 row by 3 column table.
Now that the table is created, select it and click your Align Center button. Now type some information into the top 3 table cells. Click the cells below and add some images.
Finally we want to merge the bottom row to be one line. This is done by clicking in the bottom left cell. Click the Merge Cells button 2 times to create one line and type some information.
You can also edit table properties, add a row, delete a row, merge columns etc. I would recommend testing most of the table buttons to get a better understanding of how each of them function. Finally, preview your custom pages.
If you enjoyed this article please consider staying updated via RSS.