HTML/CSS filtered in webpage resource?

HTML/CSS filtered in webpage resource?

by Eric Constantin -
Number of replies: 0
Hi, I'm trying to do some CSS styling on the resource items (labels) in the front-page main menu, and I'm experiencing some strange reformatting/filtering of the HTML/CSS.

If I enter this in the HTML for a label:

<div class="myHeader">Curriculum Information</div>
<div class="myItem"><a href="/education/mod/resource/view.php?id=89">Introduction</a></div>
<div class="myItem"><a href="/education/mod/resource/view.php?id=90">Overview of Courses</a></div>
<div class="myItem"><a href="/education/mod/resource/view.php?id=91">Course Information</a></div><div class="myItem"><a href="/education/mod/resource/view.php?id=93">Annual Course Plan</a></div>

and have this in the layout CSS theme file

.myHeader {
color: rgb(255, 255, 255);
background-color: rgb(239, 156, 142);
padding-left: 15px;
padding-bottom: 3px;
padding-top: 3px;
font-weight: bold;
}

.myItem {
border-color: rgb(174, 174, 174);
border-bottom: 1px dashed;
color: rgb(5, 69, 254);
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
}

then the header item does not get the proper background color -- however if I put the .myHeader styling inline

<div style="color: rgb(255, 255, 255); background-color: rgb(239, 156, 142); padding-left: 15px; padding-bottom: 3px; padding-top: 3px; font-weight: bold;">Curriculum Information</div>

Then it works fine.

However we would rather NOT have to up the styling for each div element of each menu item if we can avoid (better practise to factor out to external CSS, obviously).

I have also tried using the internal CSS definition (within the label resource) like

<style type="text/css">
.myHeader {
 color: rgb(255, 255, 255);
 background-color: rgb(239, 156, 142);
 padding-left: 15px;
 padding-bottom: 3px;
 padding-top: 3px;
 font-weight: bold;
}
</style>

however this actually results in the display of the .myHeader code in the main menu label...


Can anyone point out why the 1st 'header' div would not be picking up or be able to render the .myHeader style from the theme's external CSS file, or how we can incorporate CSS-styling definitions to within a resource? (is there a moodle filter/parsing configuration somewhere?)

Many thanks,
Eric
Average of ratings: -