Mecha CMS

Custom site appearance.

Normal

Table of Contents
  1. Features 
  2. Widgets 
  3. Grid System 
  4. Embeds 
  5. Image Alignments 

Port of the default layout in Mecha version 1.x.x.

Download Version 2.10.4 Download Development Version

Something looks broken? We accept bounties to fix them faster.

Normal Layout

This is the default layout used by Mecha version 1.x.x.

Features 

  • Automatic menu navigation
  • Automatic set the home page view to /article
  • Comments (requires comment extension)
  • Page views counter (requires view extension)
  • Manual post excerpt (requires excerpt extension)
  • Widgets:
    • Tags (requires tag extension)
    • Random Posts
    • Recent Posts
    • Related Posts
    • Recent Comments (requires comment extension)
    • List (custom)

Widgets 

To create a custom widget, open aside.php file then add this code just before the </aside> tag:

<?= self::widget([
    'id' => 'foo-bar', // Optional
    'title' => 'Your Custom Widget Title', // Optional
    'content' => '<p>Your custom widget content.</p>'
]); ?>

Example widget as advertisement container:

<?php

$content = <<<HTML

// Paste your ads code here!

HTML;

echo self::widget([
  'title' => 'Advertisement',
  'content' => $content
]);

?>

Example widget list:

<?= self::widget('list', [
    'title' => 'My List',
    'list' => [
        'List Item 1',
        'List Item 2',
        'List Item 3'
    ]
]); ?>

Example widget list as link list:

<?= self::widget('list', [
    'title' => 'My List',
    'list' => [
        '<a href="http://example.com/link-1">Link 1</a>',
        '<a href="http://example.com/link-2">Link 2</a>',
        '<a href="http://example.com/link-3">Link 3</a>'
    ]
]); ?>

Grid System 

<div class="grids">
  <div class="grid span-6">6/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-3">2/6 Column</div>
  <div class="grid span-3">2/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-2">3/6 Column</div>
  <div class="grid span-2">3/6 Column</div>
  <div class="grid span-2">3/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-1">1/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-1">1/6 Column</div>
  <div class="grid span-5">5/6 Column</div>
</div>

<div class="grids">
  <div class="grid span-2">2/6 Column</div>
  <div class="grid span-4">4/6 Column</div>
</div>

Embeds 

Embedding a video:

<div class="video">
  <!-- Video embed code goes here… -->
</div>

Embedding an audio:

<div class="audio">
  <!-- Audio embed code goes here… -->
</div>

Embedding an image with caption:

<figure class="image">
  <img alt="" src="/path/to/image.jpg">
  <figcaption>Image caption goes here.</figcaption>
</figure>

Embedding a table with borders:

<table class="table">
  <caption>Table caption goes here.</caption>
  <!-- Table data goes here… -->
</table>

Image Alignments 

<img alt="" class="align-right" src="/path/to/image.jpg">
<img alt="" class="align-center" src="/path/to/image.jpg">
<img alt="" class="align-left" src="/path/to/image.jpg">