A Micro CMS

Using the CMS

A few tips for using the default 'White' theme.


Navigation menus

Don't add too many items to the main menu and use only one or a couple of words as [anchor text]. If the menu gets too wide it will stretch beyond the width of the content column and look clumsy, especially on narrow screens. If more links are needed put them in a suitably named page and put the page in the menu.


Video

The following markup adds mp4 video to a page:

<div class="video">
<video width="480" height="750" autoplay controls loop>
<source src="./video/filename.mp4" type="video/mp4">
Your browser does not support the video tag.
</div>

Make sure to put a dot in front » ./video/filename.mp4 ...

Note: .mp4 files can't be uploaded in 'Images' due to their larger file sizes. They will need to be uploaded separately via ftp into the /video/ folder or called in externally:

<div class="video">
<video width="480" height="750" controls loop>
<source src="https://example.com/path/video-filename.mp4" type="video/mp4">
Your browser does not support the video tag.
</div>

When supermicro CMS is installed under SSL, external .mp4 files must come from a secure https source, not http, or they will not display.


To add a YouTube video to a page:
<div class="iframe-wrapper">
<iframe class="responsive" src="https://www.youtube.com/embed/hb_2RQ9ZNX8" gesture="media" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

If required specify the width and height from YouTube 'embed':

<iframe width="560" height="315" class="responsive" ... etc

YouTube video example »


To make images full-width on small screens:

By default, all images are contained in an HTML paragraph. On narrow screens, paragraphs don't extend right to the edges but have a small side margin right and left. That applies to images as well. To let an image extend right to the edges on narrow screens, enclose the image in paragraph class "w" as follows:

<p class="w"><img src="img/filename.jpg" width="xxx" height="xxx" alt=""></p>

Wider screens are not affected.

Page last modified: 05 February, 2020