Microtemplate – Documentation

Short description how to install and get going with the template.
Microtemplate can be installed and set up as a root page or sub page in an existing website.

Demo

System requirements

  • TYPO3 8.7 LTS

Install extensions

Mandatory

  • fluid_styled_content – TYPO3 system extension
  • gridelements – Extension for page sections and grid layouts
  • microtemplate – That's it yes... or composer t3brightside/microtemplate
Preconfigured for Microtemplate

Preconfigured for Microtemplate

  • pagelist – Page teasers, news lists, galleries etc (custom Microtemplate available)
  • personnel – Contact lists and single person records with vCard support (custom Microtemplate available)
  • metaplus – Page title prefix and sufix, favicon and OpenGraph image
  • youtubevideo – YouTube video element with settings and cover image control
Useful

Useful

  • realurl – Creates human readable URL addresses
  • go_maps_ext – Google maps for one or multiple locations and styles
  • unrol – Gives back the user friendly save icons in BE, removing the drop-down
  • min – Minifier to optimize CSS, JavaScript and HTML

Connect template to home page

Create a template record for 'Home' page. In template record "Includes -> Include static (from extensions)" select:

  1. Fluid Content Elements
  2. Microtemplate – Main
  3. Others by what you need...

Edit template constants in constant editor. Domain name constant has to be set in order to make ext:Personnel vCard images function properly.

Please note: 'Root page ID' has to be set if home page is a sub page.

Make sure to remove "Hello world" script from template Setup field.

Add back end configuration

Edit the root page and add in "Resources -> TypoScript Configuration -> Include Page TSConfig (from extensions)"

Set backend layouts

Editi root page and set it in Appearance -> Page layout -> Backend layout. Front end templates are connected to back end layouts. For the home page select "Main page" and for "Sub pages", well yes, you know!

Now create some content sections, where's content section header appears in the main menu. Uncheck "Appearance -> Show in Section Menus" to disable section name showing in main menu. Fill up the sections with some content...

Article pages

Create a subfolder or page for articles, you can mark it to be left out from page path. Edit page and select back end template "Articles" for sub pages. In resources add Article pages back end configuration. create some articles.

And last. Go to the front page and add "Gallery of Subpages" page item, point it to the articles folder and select desired template and ordering.

Customizing

Short overview what can be found where...

    Colors, content width etc...

    Colors, content width etc...

    Main colors and content sizes can be edited in template record using constant editor. Dynamic styles are given the constant value here: Configuration/TypoScript/Page/styles_and_javaScript.ts

      Logo

      Logo

      Add logo file to home page resources media or set file location in template constant.

        Styles & JavaScript

        Styles & JavaScript

        • Just check out Resources/Public/Styles/ and Configuration/TypoScript/Page/styles_and_javaScript.ts
        • To keep things modular some of the .css and .js files are loaded form dedicated TypoScript files. For example: Configuration/TypoScript/Menus/sectionMenu.ts and Configuration/TypoScript/Content/accordion.ts

          If you don't need accordion on your page just rename accordion.ts to accordion.txt and all related TS, JS and CSS will be excluded.
        Content sections

        Content sections

        • To exclude content section from main menu uncheck "Show in Section Menus" in the "Appearance" tab.
        • To modify back end form for adding or removing features check out Configuration/FlexForm/gridelements/pagesection.xml
        • For tuning content section HTML template, image blurring and more look at Configuration/TypoScript/Content/pagesection.ts & Configuration/Resources/Private/Templates/gridelements/section.html
        Custom classes

        Custom classes

        Class "home" can be used as a custom class for the first page section for dynamic H1 sizing like seen on the Microtemplate home page.

          Back End

          Back End

          • Back end language flage, title and other settings can be altered in: Configuration/TypoScript/PageTS/setup.ts
          • Rich text editor configuration is in: Configuration/PageTS/RTE/Default.yaml and styles are in: Resources/Public/Styles/rte.css

          Questions and so...

          Please read the documentation first!