A Micro Micro CMS

Using the CMS

A few tips for using the system (with particular reference to the default 'White' theme).


(01) 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.


(02) 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.


(03) 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 »


(04) 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.


(05) 'Extra' files

The /inc/ folder contains three 'extra' files: extra-head.php, extra-body.php and extra-content.php which can be used to manually add code, content or a Facebook share button to the standard template. extra-head.php already contains Open Graph meta tags and extra-content.php contains slideshow JavaScript so be careful not to disturb what is already there.

To see exactly where these files are located, see HTML page structure or the source of this page.


(06) Unjustify paragraph text

Paragraph text is 'justified' by default. To unjustify it, add the following to the extra.css stylesheet:

@media screen and (min-width: 798px) {

  #content p {
    text-align: left;
  }

}

In Styles / Select a stylesheet select Extra styles only, paste it in then Update styles.


(07) Hide pages from site search

To prevent a page from appearing in on-site search results, add two consecutive caret symbols #~~ to the first line of text.


(08) Hide 'Page last modified: ...'

'Page last modified: [date]' can be removed from all pages by adding the following to the extra.css stylesheet:

#content p.meta {
  display: none;
}

In Styles / Select a stylesheet select Extra styles only, paste it in then Update styles.


(09) Visitor comments

The default installation has commenting enabled for the home page (as an example). Commenting can be enabled or disabled for any page. This is all done manually. The instructions are in /inc/extra-content.php and should be followed with care.


(10) Using images wider than 740 pixels

The following styles can be added to extra.css to allow images up to 1200 pixels wide to be displayed:

/* ---------------------------------------- */
/* For images up to 1200px wide (with no borders) */
/* Wider images in 740px column must have negative left margins */

.w1200 {
  text-align: center;
}

@media screen and (min-width: 1256px) {

  .w1200 { position: relative;
    width: 1200px;
    margin-left: -230px;
  }

}

@media screen and (max-width: 1255px) and (min-width: 1080px) {

  .w1200 { position: relative;
    width: 1024px;
    margin-left: -142px;
  }

}

@media screen and (max-width: 1079px) and (min-width: 917px) {

  .w1200 { position: relative;
    width: 860px;
    margin-left: -60px;
  }

}

#content .w1200 img {
  margin-right: auto;
  margin-left: auto;
  width: auto;
}

On screens with a width of 1256 pixels and over, a 1200px wide image will show full-size but will reduce in stages on narrower screens to 1024 pixels, 860 pixels, 740 pixels, then shrinking further on smaller devices.

Example image 1200 pixels wide

The markup:

<div class="w1200">

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

</div>

Set image filename and size as actual image.

Page last modified: 01 July, 2020