skINGI Documentation

Skin configuration

General directives

Use these directives to configure the layout and features of a page. Site-wide directives can be set in Site.INGISkinConfig?.

  • (:nobreadcrumb:) removes the breadcrumb appearing between the navbar and the page title
  • (:nosearch:) removes the search box from the navbar
  • (:nosidebar:) removes the sidebar
  • (:sidebarright:) places the sidebar to the right of the page
  • (:nometafooter:) removes the footer containing links to actions and the time of last modification
  • (:nonavbar:) removes the top navbar
  • (:modecms:) is an alias for (:noaction:) and (:nometafooter:)
  • (:navbarscroll:) makes the navbar appear progressively as the user scrolls through the page.

Bootstrap integration

skINGI integrates Bootstrap 4 into PmWiki and defines new directives to easily use Bootstrap elements.

Modals

  • (:modal id title size=(sm|md|lg|):) prepares the modal and set its id, title and size. md is the default size if size is left empty.
  • (:modalfooter:) prepares the footer section of the modal
  • (:endmodal:) ends the modal

Forms

  • (:bs-form-entry type id name label=label value=value placeholder=placeholder help_text=text label_placement=(top|left) addon=addon:) adds an entry to the current form.

Buttons

  • (:bs-button type style text= size=(xs|sm|md|lg|) attrs:) adds a Bootstrap-styled button. style is one of the Bootstrap styles such as primary or success. See Bootstrap documentation for more. attrs can be additional HTML attributes that will be added to the button tag.

Carousels

  • (:carousel id= slides= interval= pause=(null|hover) ride=(false|carousel) wrap=(true|false):) prepares the carousel. slides sets the number of slides. For more information about the rest of the parameters, please consult Bootstrap documentation.
  • (:carouselitem img= title= text= :) adds an item to the current carousel. img can be both an (:Attach:) element or an url.

Icons

skINGI integrates Font Awesome icons through the (:icon class:) directive. class is the HTML class attribute value, e.g. (:icon "fa fa-home":) produces .

PageLists templates

#striped

  • (:pagelist fmt=#striped group= name= coloreven= colorodd= fontcoloreven= fontcolorodd=:) displays a pagelist as a striped page with alternating background colors. Image and parallaxes can be used instead of colors for the background. The detailed documentation and usage of this template is available here

#newsgrid

  • (:pagelist fmt=#newsgrid group= name= sm= md= lg= xl= fmtdate= fit= fadeoutheight= fadeoutcolor= fadeoutheight= imageheight= cardblockheight=:) displays a pagelist as a grid of bootstrap cards. The detailed documentation and usage of this template is available here

#newslist

  • (:pagelist fmt=#newslist group= name= sm= md= lg= xl= fmtdate= fit= imagecolwidth= cardblockcolwidth= fadeoutheight= fadeoutcolor= cardblockheight=:) displays a pagelist as a list of bootstrap cards. The detailed documentation and usage of this template is available here

#carousel

  • (:pagelist group= fmt=#carousel id= interval= pause= ride= wrap= :) creates a carousel with images and text defined in pages of the given group. Other arguments are the same as for carousels. Pages are expected to define three page variables: Title, Text and Image. E.g.:
(:Title: Beautiful image:)
(:Text: I took this picture from the Internet:)
(:Image: image1.jpg:)

Sidebar

  • (:sidebar-item target= text= group= :) adds an item to the sidebar. target is the target page, group is a comma-separated list of groups which will make the item appear as active/
  • (:sidebarstyle sidebar_bg= link_color= link_active= link_bg_active= link_hover= link_bg_hover= :) defines the colors used for the sidebar. All parameters should be HTML colors.

Navbar

The navbar can be edited at Site.NavBar.

  • (:navbarbrand logo= text= :) defines the logo and text to be used as a brand logo in the navbar. logo can be set to none. Note: this should be placed in Site.NavBrand.
  • (:navbar-item target= text= group= :) adds a top-level item to the sidebar. Parameters are the same as for (:sidebar-item:).
  • (:navbar-dropdown-item text= group= :) adds a top-level dropdown item to the sidebar.
  • (:navbar-nested-item target= text= :) adds a sub-level item to the previous dropdown item in the sidebar.
  • (:navbarstyle nav_bg= link_color= link_active= link_hover= nav_brand= :) defines the colors used for the navbar. All parameters should be HTML colors.
Page last modified on February 15, 2018, at 11:44 AM