Slack Github

Tips & Tricks

Documentation theme is highly customizable and comes with tons of features and settings. Below you will find some extra tips and tricks you’ll love to be “in the know” about.

You can easily add extra styling elements to your content by selecting the right element from the Formats menu of the WYSIWYG editor toolbar:

Formats menu

Numeric List

Create a numeric <ol> list, then highlight it and, in the Formats menu, select Ordered List. This will restyle the list to look like:

  1. Duis placerat magna nec metus pellentesque vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pulvinar ante ut congue.
  2. Praesent eu nibh non massa auctor vehicula vitae vitae dolor. Quisque est urna, vehicula a eros ut, pretium pharetra est. Duis vitae ex facilisis, cursus dui quis, ultrices nibh.
  3. Pellentesque ut libero eu augue feugiat finibus non sit amet odio. Cras fringilla tortor consectetur, tincidunt nibh quis, molestie risus. Integer viverra dui elit, ac auctor sem consequat semper.

Messages

Convert your paragraphs to Tips, Info, Success or Warning messages by selecting or highlighting them and clicking on the Info, Tips, Success or Warning options in the Formats menu:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique quam augue. (paragraph with the .msg .msg--highlight classes)

Sodales maximus lacus venenatis quis. Etiam in ipsum et sem placerat semper et in magna. (paragraph with the .msg .msg--info classes)

Suspendisse vel odio felis. Nullam facilisis aliquet ex at fringilla. Quisque imperdiet elit vitae mi eleifend semper. Nulla mattis, est id accumsan placerat, nunc urna lacinia ex, (paragraph with the .msg .msg--success classes)

Eu venenatis nunc lacus quis felis. Etiam et rhoncus dui. Quisque vestibulum sed eros quis rutrum. (paragraph with the .msg .msg--warning classes)

Buttons

Add a button, or a link that you want to style as a button, highlight it and, in the Formats menu, select from the "Button X" options, where 'X' is the button colour you require e.g. Button white. This will restyle the button to the specified colour:

Button Button Button Button Button

Aside block

To highlight an additional information that can enhance an article you can add an <aside> element; content within this element should be stand-alone information that is related to the article in context.

For example use the following HTML structure and then select the right element from the Formats menu (Aside block-left or Aside block-right):

<aside>
     <h3> Title </h3>
     <p> Your message here...</p>
</aside>

Changing the Frontpage layout

Documentation includes two frontpage styles; the default Centered, and the grid-styled Cards.

Centered layout

The Centered frontpage style is a single-column layout with a sidebar for links; it is an effective option for sites that want to provide an introduction to the site content to users with a title and description of what the site has to offer.

[img]

To enable the Centered layout:

  1. In the Publii interface, click on the Theme option in the left-sidebar to open the theme settings.
  2. In the Frontpage section, enter the page content into the Intro section field; this uses the Publii WYSIWYG editor so you can insert headings, listings, buttons and media content as you would in a standard post.
  3. Ensure that the Latest articles option underneath the WYSIWYG editor is disabled and save your changes.

The content added to the intro section will now be displayed on the frontpage.

Cards layout

The Cards layout creates preview 'cards' to your latest articles on the frontpage; much like the Centered layout it can include title and description text, but the main bulk of the page is made up of the article previews:

[img]

To enable the Cards layout:

  1. In the Publii interface, click on the Theme option in the left-sidebar to open the theme settings.
  2. In the Frontpage section, enter the title and intro content into the Intro section field. You may enter any HTML content you wish, but since the focus should be on your article previews we recommend using only a Heading 1 title and a short paragraph with the .listing__desc class, which stylizes the text as a subtitle:
    <h1> Documentation </h1>
    <p class="listing__desc"> Welcome to Documentation theme! </p>
  3. Enable the Latest articles option under the intro section field and save changes.

The preview card grid will be automatically generated and added underneath your intro text.

Subscribe

Get the latest news, updates and more delivered directly to your email inbox

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at contact@tidycustoms.net. By clicking below, you agree that we may process your information in accordance with our Privacy Policy.