Note: You are currently viewing documentation for Moodle 3.3. Up-to-date documentation for the latest stable version of Moodle is probably available here: Frank Ralf/Semantic HTML2.

User:Frank Ralf/Semantic HTML2

From MoodleDocs

Site Administration

  • <a href="#">Security</a>
  • <a href="#">Appearance</a>
    • <a href="#">Themes</a>
      • <a href="admin/settings.php?section=themesettings">Theme settings</a>
      • <a href="theme/index.php">Theme Selector</a>
    • <a href="admin/settings.php?section=calendar">Calendar</a>
  • <a href="#">Front Page</a>

Read the whole story:

  1. Frank Ralf/Moodle HTML
  2. Site Admin Block: Better image placement
  3. Frank Ralf/Semantic HTML3
  4. Frank Ralf/Semantic HTML4
  5. Frank Ralf/Semantic HTML5


Better image placement

As a next step we will replace the inline images which serve as markers for the list items. (Note: We will only work with a snippet of the original code for clarity reasons.)

All images removed

Here's the screenshot. The red color indicates that we are viewing the browser's default rendering of a list. Note that this would suffice as a menu but we will put the images back in place in a next step anyhow.

Moodle Semantic-HTML 2.0 without images.png

And here's the code.

<html> <head> <title>Semantic HTML 2.0</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles_002.css" /> <style type="text/css"> </style> </head> <body >

Moodle - Semantic HTML 2.0

</body> </html>

Images reinstated

Now we can put the images back in place, but this time using the CSS property "list-style-image". That way we can change the images centrally with just one line of code without having to touch any markup.

  • To get each of the different images at the right place we added class attributes to the LI tags with the name of the respective image.
  • We set some padding and margins to come closer to the original layout.

The screenshot:

Moodle Semantic-HTML 2.0 list-style-image.png

The code:

<html> <head> <title>Semantic HTML 2.0</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles_002.css" /> <style type="text/css"> </style>

</head> <body >

Moodle - Semantic HTML 2.0

<a href="#sb-1" class="skip-block">Skip Site Administration</a>

item.gif removed

As item.gif only reproduces the standard "square" marker we can get rid of the image and use the marker instead: list-style-type: square; That not only makes the code leaner but also gives the added advantage of being able to style the marker, for example coloring it red as in the screenshot to show that we indeed don't use item.gif anymore.

Note that we had to set list-style-image: none; as default for LI tags. Otherwise our settings for items would be overridden due to inheritance.

The screenshot:

Moodle Semantic-HTML 2.0 without item.gif.png

The code:

<html> <head> <title>Semantic HTML 2.0</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles_002.css" />

<style type="text/css"> </style>

</head> <body >

Moodle - Semantic HTML 2.0

<a href="#sb-1" class="skip-block">Skip Site Administration</a>

Site Administration

  • <a href="#">Security</a>
  • <a href="#">Appearance</a>
    • <a href="#">Themes</a>
      • <a href="admin/settings.php?section=themesettings">Theme settings</a>
      • <a href="theme/index.php">Theme Selector</a>
    • <a href="admin/settings.php?section=calendar">Calendar</a>
  • <a href="#">Front Page</a>

</body> </html>

The result

A single menu entry looks like this:

BEFORE:

 <a href="#" name="d16">
   <img id="vh_div16indicator" src="pix/closed.gif" alt="Closed folder">
     Security
 </a>

AFTER:

  • <a href="#">Security</a>
  • What's left to do

    • finetuning the layout with CSS (margins, padding, line-hight, etc.)
    • finetuning the marker placement (list-style-position)
    • giving the menu a context in CSS by adding .block_admin_tree
    • cross-browser testing
    • adding behavior with JavaScript

    See also

    Continued at Frank Ralf/Semantic HTML3.

    <a href="#sb-1" class="skip-block">Skip Site Administration</a>

    Site Administration

    • <a href="#">Security</a>
    • <a href="#">Appearance</a>
      • <a href="#">Themes</a>
        • <a href="admin/settings.php?section=themesettings">Theme settings</a>
        • <a href="theme/index.php">Theme Selector</a>
      • <a href="admin/settings.php?section=calendar">Calendar</a>
    • <a href="#">Front Page</a>

    </body> </html>