Hi fellow Moodlers,
In our courses, we'd like to have tips/notes stand out, so we add a 2-column table, the first cell containing an image and the second cell the text. However, we want the text to be centered vertically in the cell. I've added the following to our theme's custom CSS:
table-notestable {
padding: 0px;
border-collapse: collapse;
border-style: none;
}
table-notestable td {
font-style: italic;
margin-left: 0px;
color: #6E358B;
vertical-align: middle;
}
The HTML code for the table looks like this:
<table id="table-notestable">
<tbody>
<tr>
<td><img src="http://kctraining.com.au/draftfile.php/556/user/draft/513405656/KMJ-Icons-Important-Notes.png" alt="" role="presentation" class="atto_image_button_text-bottom" width="53" height="60"></td>
<td>If you press cancel, all serial number entry in the current session will be discarded.</td>
</tr>
<tr>
<td><img src="http://kctraining.com.au/draftfile.php/556/user/draft/513405656/KMJ-Icons-Reference.png" alt="" role="presentation" class="atto_image_button_text-bottom" width="59" height="60"></td>
<td>Refer to the Online Help for information on amending existing serial numbers.</td>
</tr>
</tbody>
</table>
The table-notestable customisation works, but the <td> tag us still using the default theme tag, not the one specified for the custom table. When I test this in my HTML editor, it displays correctly, so I assume I'm missing something in my custom CSS to make it work in Moodle.
Any suggestions?