Standardized CSS layouts with Midgard

26 October 2004

1 minute read

Based on my earlier blog entry, there was an interesting talk in OSCOM 4 about CSS Naming Conventions.

My after-talk discussions with Thorsten Scherler led to development of OSCOM specification for CSS Naming Conventions.

I've now used the XHTML skeleton from the specification for some websites, and have been generally quite happy with it. Here is a simple Midgardization of it. Simply paste it to the <(ROOT)> element of your style, and then add the CSS formatting to the <(css)> element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="&(midcom_site["site_language"]);" lang="&(midcom_site["site_language"]);">
  <head>
    <title><(page-title)></title>
    <meta http-equiv="Content-Type" content="text/html; charset=&(midcom_site["site_encoding"]);" />
    <style type="text/css">
      <!--
        <(css-local)>
        <(css-extra)>
      -->
    </style>
    <link rel="stylesheet" href="&(midcom_site["uri"]);style.css" type="text/css" />
    <(head-extra)>
  </head>
  <body<(bodytag-extra)>>
    <div id="container">
      <div id="branding">
        <div class="grouplogo">
          <!-- Insert logo here -->
        </div>
        <div id="branding-tagline">
          <?php echo $GLOBALS["midcom_site"]['site_welcome']; ?>
        </div>
        <div id="branding-trail">
          <(breadcrumb)>
        </div>
      </div>

      <div id="nav">
        <div id="nav-main">
           <(navi)>
        </div>

        <div id="nav-language">
         <!-- Language switching links -->
        </div>

        <div id="search">
          <div class="search-input">
          </div>
        </div>
      </div>

      <div id="content">
        <div id="content-main">
          <(content)>
        </div>
      </div>

      <div id="siteinfo">
        <div id="siteinfo-credits">
          Created by <a href="http://www.nemein.com/">Nemein Oy</a>.
          Powered by <a href="http://www.midgard-project.org/">Midgard CMS</a>.
        </div>
        <div class="lastmodified">
          <(last-updated)>
        </div>
        <div class="siteinfo-legal">
         <!-- Copyright disclaimer and possible licensing -->
        </div>
        <div id="feedback">
        </div>
        <(edit-this-page)>
      </div>
    </div>
  </body>
</html>

The places with comments are ones I'm still thinking how to pull dynamic content into.

Continue reading

Adding categories to a Midgard blog

Test install of Midgard 1.6.0rc2