The HTML layout is a skeleton of site page. The most simple web layout has the following structure:
- header includes page description, site name, logo and navigation menu. HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link href="/css/main.css" rel="stylesheet"
type="text/css" />
<title>{page title}</title>
<meta content="keywords"
name="{page keywords for SEO}" />
<meta content="description"
name="{page description for SEO}" />
</head>
<body>
<div class="header">
<!-- shows logo + navigation menu -->
</div>
- content includes the page text (including the page sidebar). HTML code:
<div class="content">
<!-- page text -->
</div>
<div class="sidebar">
<!-- site news -->
</div>
- footer includes copyrights, links, etc. HTML code:
<div class="footer">
</div>
</body>
<html>
Now we need to modify HTML code above to use it as layout template for Mule CMS.
In the /theme folder create 'layout.php' file and paste:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<link href="/css/main.css" rel="stylesheet"
type="text/css" />
<title><?= $this->title ?></title>
<meta content="keywords"
name="<?= $this->keywords ?>" />
<meta content="description"
name="<?= $this->description ?>" />
</head>
<body>
<div class="header">
<!-- shows logo + navigation menu -->
</div>
<!-- HEADER END -->
<? if (isset($content))
echo $content;
?>
<!-- FOOTER BEGIN -->
<div class="footer">
</div>
</body>
<html>
That's all.