DokuWiki

It's better when it's simple

User Tools

Site Tools


template:mikio

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
template:mikio [2020-07-20 09:26] nomadjimbobtemplate:mikio [2024-04-14 11:27] (current) – [Mikio Plugin] 220.86.97.18
Line 1: Line 1:
-====== mikio Template ======+====== Mikio Template ======
  
 ---- template ---- ---- template ----
-description   : Mikio is a Bootstrap 4 style template with a hero element+description   : Mikio is a Bootstrap 4 style template with a hero element and dark mode support
 author        : nomadjimbob author        : nomadjimbob
 email         : james.collins@outlook.com.au email         : james.collins@outlook.com.au
-lastupdate_dt : 2020-07-20 +lastupdate_dt : 2024-02-09 
-compatible    : Greebo+compatible    : Igor, Hogfather, Greebo, Jack Jackrum, Kaos
 depends       : depends       :
 conflicts     : # prefix templates by template: conflicts     : # prefix templates by template:
 similar       : similar       :
-screenshot_img: # URL to a screenshot (should be a bigger one) +screenshot_img: https://raw.githubusercontent.com/nomadjimbob/mikio/master/images/screenshot.png 
-tags          : bootstrap, responsive, sidebar, modern, clean+tags          : bootstrap, responsive, sidebar, modern, clean, css3, customizable, dark, dark-mode, mobile, print, semantic, themes, hero
  
 downloadurl   : https://github.com/nomadjimbob/mikio/zipball/master downloadurl   : https://github.com/nomadjimbob/mikio/zipball/master
Line 17: Line 17:
 sourcerepo    : https://github.com/nomadjimbob/mikio/ sourcerepo    : https://github.com/nomadjimbob/mikio/
 ---- ----
 +
  
 ===== Features ===== ===== Features =====
- 
  
   * [[http://getbootstrap.com/|Bootstrap styling]]   * [[http://getbootstrap.com/|Bootstrap styling]]
Line 28: Line 28:
   * Icon support   * Icon support
   * Customizable breadcrumbs   * Customizable breadcrumbs
-  * Subtheming support+  * Theming support
   * Tags plugin support   * Tags plugin support
 +  * Translate plugin support
   * Mobile friendly   * Mobile friendly
 +  * Typeahead search support
 +  * Dark mode
 +
 +===== Breadcrumb/You Are Here Change =====
 +
 +  * Breadcrumbs and You Are Here have now been separated instead of combined. This removed the options `breadcrumbHome` and `breadcrumbShowLast` for the breadcrumbs as it only applies to the you are here bar. **Breadcrumbs and You Are Here options may have reset**
  
  
Line 36: Line 43:
  
   * ''iconTag'' : icon tag to use to engage the icon engine. Default to ''icon''   * ''iconTag'' : icon tag to use to engage the icon engine. Default to ''icon''
-  * ''customTheme'' : the mikio subtheme to use +  * ''customTheme'' : the mikio theme to use, located in the ''mikio/themes'' directory 
-  +  * ''showNotifications'' : where to show site notifications for admin staff 
 +  * ''useLESS'' : use the LESS compilier or direct CSS for the mikio stylesheet. Requires the ctype PHP extension installed.
   * ''navbarUseTitleIcon'' : show the site logo in the navbar   * ''navbarUseTitleIcon'' : show the site logo in the navbar
   * ''navbarUseTitleText'' : show the site title in the navbar   * ''navbarUseTitleText'' : show the site title in the navbar
Line 52: Line 60:
  
   * ''searchButton'' : show the search button as a icon or text   * ''searchButton'' : show the search button as a icon or text
 +  * ''searchUseTypeahead'' : use [[https://github.com/bassjobsen/Bootstrap-3-Typeahead|Typeahead]] page suggestions in search bar
  
   * ''heroTitle'' : show the hero block on pages   * ''heroTitle'' : show the hero block on pages
Line 61: Line 70:
   * ''breadcrumbPosition'' : where to display the breadcrumbs, either under the navbar, in the hero element or above the page content   * ''breadcrumbPosition'' : where to display the breadcrumbs, either under the navbar, in the hero element or above the page content
   * ''breadcrumbPrefix'' : enable changing the breadcrumb prefix   * ''breadcrumbPrefix'' : enable changing the breadcrumb prefix
-  * ''breadcrumbPrefixText'' : text to set the breadcrumb prefix. Requires ''breadcrumbPrefix'' to be enabled+  * ''breadcrumbPrefixText'' : text to set the breadcrumb prefix. Requires ''breadcrumbPrefix'' to be enabled. This replaces the default [[:breadcrumbs#breadcrumb prefixes]] ''Trace:'' for [[:breadcrumbs#tracking breadcrumbs]] and ''You are here:'' for [[:breadcrumbs#hierarchical breadcrumbs]] (including the punctuation) which as of July 2021 cannot be customized by means of the [[:plugin:config|Configuration Manager]] but only within the scope of a [[:template]].
   * ''breadcrumbSep'' : enable changing the breadcrumb seperator   * ''breadcrumbSep'' : enable changing the breadcrumb seperator
   * ''breadcrumbSepText'' : text to set the breadcrumb seperator. Requires ''breadcrumbSep'' to be enabled   * ''breadcrumbSepText'' : text to set the breadcrumb seperator. Requires ''breadcrumbSep'' to be enabled
   * ''breadcrumbHome'' : change the breadcrumb home item to none, page title of root page, 'home' or an icon/image. The 'home' text is pulled from the ''home'' language value   * ''breadcrumbHome'' : change the breadcrumb home item to none, page title of root page, 'home' or an icon/image. The 'home' text is pulled from the ''home'' language value
-  * ''breadcrumbShowLast'' : only show an amount of breadcrumbs from the last. Will also show the home item in the list if enabled. Set this to ''0'' to show all items+  * ''breadcrumbShowLast'' : only show a number of breadcrumbs from the last. Will also show the home item in the list if enabled. Set this to ''0'' to show all items
  
   * ''sidebarShowLeft'' : show the left sidebar if content is found   * ''sidebarShowLeft'' : show the left sidebar if content is found
Line 79: Line 88:
   * ''pageToolsFooter'' : when and if to show page tools in the footer   * ''pageToolsFooter'' : when and if to show page tools in the footer
  
-  * ''footerCustomMenuText'' : custom menu to use in the footer. Menu items are in the format of url|title with each item seperated by a semicolon+  * ''footerCustomMenuText'' : custom menu to use in the footer. Menu items are in the format of url|title with each item separated by a semicolon
   * ''footerSearch'' : show the search bar in the footer   * ''footerSearch'' : show the search bar in the footer
  
Line 91: Line 100:
 ===== Include Pages ===== ===== Include Pages =====
  
-The following pages can be either html files in the root of the theme or a page in the namespace. Namespace pages take priority.+The following pages can be either html files in the root of the template or a page in the namespace. Namespace pages take priority.
  
   * ''topheader'' : content to include above the navbar   * ''topheader'' : content to include above the navbar
Line 107: Line 116:
 ===== Include Images ===== ===== Include Images =====
  
-The following images can be used to replace content in the theme. Images can be in the root of the theme or in the namespace. Images can be either png, jpg, gif or svg.+The following images can be used to replace content in the template. Images can be in `TEMPLATE_ROOT/images/`, `TEMPLATE_ROOT/themes/THEME/images/`, or in the namespace. Images can be either png, jpg, gif or svg.
  
   * ''logo'' : site logo in the navbar   * ''logo'' : site logo in the navbar
Line 123: Line 132:
  
 Namespaces can also apply the above hero settings in child pages by including the above settings in a page named ''theme'' Namespaces can also apply the above hero settings in child pages by including the above settings in a page named ''theme''
 +
 +If the page title is not being displayed in the Hero, make sure that you have correctly set the DokuWiki [[config:useheading]] setting.
 +
 +
 +===== Hiding Elements =====
 +
 +Mikio now supports hiding elements using the ''~~hide-parts (parts)~~'' macro. Each element within the hide-parts macro is required to be separated by spaces. Currently, the following parts are supported:
 +
 +  * ''topheader'' : content above the navbar
 +  * ''navbar'' : the main navigation bar
 +  * ''header'' : content below the navbar but above the page content
 +  * ''hero'' : the page hero bar
 +  * ''contentheader'' : content above the page content
 +  * ''contentfooter'' : content below the page content
 +  * ''sidebarheader'' : content above the left sidebar content
 +  * ''sidebarfooter'' : content below the left sidebar content
 +  * ''rightsidebarheader'' : content above the right sidebar content
 +  * ''rightsidebarfooter'' : content below the right sidebar content
 +  * ''footer'' : content in the footer
 +  * ''bottomfooter'' : content below the footer
 +
 +To hide the topheader, navbar and hero, you would use the macro ''~~hide-parts topheader navbar hero~~''
  
  
Line 129: Line 160:
   * Mikio includes an icon engine that allows you to include icons in your pages by using <icon OPTIONS> in your content   * Mikio includes an icon engine that allows you to include icons in your pages by using <icon OPTIONS> in your content
   * If the icon tag conflicts with another plugin, you can change the tag from ''icon'' to a user set value in the settings   * If the icon tag conflicts with another plugin, you can change the tag from ''icon'' to a user set value in the settings
-  * By default, Mikio enables FontAwesome 4 by also includes FontAwesome 5, Elusive 2 and Bootstrap Icons which can be enabled by uncommenting their inclusions in ''/icons/icons.php''+  * By default, Mikio enables FontAwesome 4 but also includes FontAwesome 5, Elusive 2 and Bootstrap Iconswhich can be enabled by uncommenting their inclusions in ''/icons/icons.php''
  
-Users can also add their own icon sets into the theme. Supported icon sets can either be webfonts or indivial files (such as a SVG library). Instructions can be found in the ''/icons/icons.php'' file.+Users can also add their own icon sets to the template. Supported icon sets can either be webfonts or individual files (such as a SVG library). Instructions can be found in the ''/icons/icons.php'' file.
  
  
-===== Subthemes =====+===== Themes =====
  
-Subthemes should be placed in the themes directory in its own directory. LESS files are supported.+Themes should be placed in the themes directory in their own directory. LESS files are supported.
  
  
-===== Mikio Plugin =====+===== Dark Mode =====
  
-The [[https://github.com/nomadjimbob/mikioplugin/|Mikio Plugin]] is also available to add bootstrap 4 style + more elements to DokuWiki pages.+Mikio now supports dark mode! When the user prefers a dark theme, or has selected dark mode, the html tag will set the theme dataset to `theme-dark`; else it will be `theme-light`. 
 + 
 +You can detect this in CSS using: 
 + 
 +<code> 
 +:root[data-theme="theme-dark"] { 
 +  // CSS selectors here 
 +
 +</code> 
 + 
 +or in Javascript using: 
 + 
 +<code> 
 +const html = document.querySelector('html'); 
 +if(html.dataset.theme == 'theme-dark') { 
 +  // ... 
 +
 +</code> 
 + 
 + 
 +===== Mikio Plugin =====
  
 +The [[plugin:mikioplugin|Mikio Plugin]] is also available to add bootstrap 4 style + more elements to DokuWiki pages.
  
 +If the plugin is installed, the **Template Styles Settings** page will be expanded to allow directly editing the plugin element styling.
 +  -   - Ordered List Item  -   - Ordered List Item  - Ordered List Item
 ===== Languages ===== ===== Languages =====
  
Line 153: Line 207:
 ===== Releases ===== ===== Releases =====
  
-==== 2020-07-20 ====+==== 2024-02-09 ====
  
-  Fixed prewrap and sidebar search bar margins +    Added support for DokuWiki Kaos 
 +    * Updated to support PHP 8.2 
 +    * Added access key support to page elements [[https://github.com/nomadjimbob/mikio/issues/64|#64]]. Thanks rebeka-catalina.
  
-==== 2020-07-16 ==== 
  
-  * Merged code block styling with pre +==== 2023-12-12 ====
-  * Fixed mediamanager failures on 2018-04-22a "Greebo" [[https://github.com/nomadjimbob/mikio/issues/5]] +
-  * Icon tag is rendered correctly in preview [[https://github.com/nomadjimbob/mikio/issues/4]]+
  
-==== 2020-07-15 ====+   * ''autoDarkLight'' configuration setting will override user setting when ''showDarkLight'' is disabled [[https://github.com/nomadjimbob/mikio/issues/56|#56]]. 
 +   * Cookies used in the template now use the upcoming ''SameSite'' requirement. 
 +   * Fixed snapshots not being detected and causing script loading issues [[https://github.com/nomadjimbob/mikio/issues/57|#57]]. Thanks schplurtz. 
 +   * Updated the typescript library to support jQuery compatibility mode [[https://github.com/nomadjimbob/mikio/issues/57|#57]]. Thanks schplurtz. 
 +   * Fixed bug in config for showNotifications not being a dropdown. 
 +   * Changed default value of showNotifications to ''always'' to reflect DokuWiki. [[https://github.com/nomadjimbob/mikio/issues/58|#58]]. Thanks schplurtz. 
 +   * Fixed z-index bug with the sub navbar. [[https://github.com/nomadjimbob/mikio/issues/60|#60]]. Thanks schplurtz.
  
-  * Fixed an issue with the simple_html_dom library when editing a section of a page caused page corruption [[https://github.com/nomadjimbob/mikio/issues/3]]+==== 2023-12-11 ====
  
 +   * Fixed bug with tags not correctly coloured. [[https://github.com/nomadjimbob/mikio/issues/59|#59]]. Thanks WetenSchaap.
  
-==== 2020-07-14 ====+==== 2023-12-04 ====
  
-  * Added id=dokuwiki__content identifier for the page content element +   * Added ability to customize the page footer info text.
-  * Added styling and fixed overflow issues with pre elements +
-  * Fixed page width overflow issues+
  
-==== 2020-07-09 ====+==== 2023-10-30 ==== 
 +   * Added support for the FastWiki plugin. Requested by kjumybit. 
 +   * Fixed panels on the Administration page sometimes showing dots as part of the name.
  
-  * Fixed cosmetic display issues when ''input[type=file]'' is hidden by plugins [[https://github.com/nomadjimbob/mikio/issues/2]] 
- 
-==== 2020-07-07 ==== 
- 
-  * Initial release 
  
 +You can view older change release notes on the [[https://github.com/nomadjimbob/mikio/|Github project page]].
  
 ===== Third Party Libraries ===== ===== Third Party Libraries =====
  
-This theme uses a [[https://github.com/nomadjimbob/simple_html_dom|modified version]] of [[https://sourceforge.net/projects/simplehtmldom/|simple_html_dom]]+This template uses a [[https://github.com/nomadjimbob/simple_html_dom|modified version]] of [[https://sourceforge.net/projects/simplehtmldom/|simple_html_dom]]
  
  
Line 192: Line 248:
   * If you think you have found a problem, or would like to see a feature, please [[https://github.com/nomadjimbob/mikio/issues|open an issue]]   * If you think you have found a problem, or would like to see a feature, please [[https://github.com/nomadjimbob/mikio/issues|open an issue]]
   * If you are a coder, feel free to create a pull request, but please be detailed about your changes!   * If you are a coder, feel free to create a pull request, but please be detailed about your changes!
 +
 +===== Applause =====
 +This is really a modern, complete template, with very high flexibility and customizability. (Look at those options to customize for style.ini!) Also it's the first template I have seen with "Hero element" support. And there are quite a few positions to insert included pages as page/content header/footers. I appreciate the great work of the developer.  --- [[user>MilchFlasche|milchflasche]] //2020-07-30 03:42//
 +> I have used this template in my two language learning sites: http://taigi123.ga/ http://hakka123.ga/ (written in some East Asian languages and Hanzi script) --- [[user>MilchFlasche|milchflasche]] //2020-09-17 04:58//
  
template/mikio.1595230012.txt.gz · Last modified: 2020-07-20 09:26 by nomadjimbob

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki