+1 456 789 1234

Tips & tricks

Editorial 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.

How to create a contact link

In the Cortado theme the contact information is displayed in its own block at the bottom every page. It is possible to create a link in your menu that will automatically scroll the user to this section.

To do so, create a New Menu Item as normal in the Menus section of Publii, and name it e.g. 'Contact' (more information on creating menus and menu items can be found in the Menus section of the Publii Documentation).

In the Menu Item Type drop-down menu, select 'External URL'. Finally, in the 'External URL' field that appears, enter '#contact', and save changes. When users click this menu item it will scroll their page directly to the contact block.

How to create a dining menu

The food menu that you can see in the Cortado demo is simply a standard table with some styling wizardry added. The settings for this style are already included in the theme, we just need to activate them.

Start by creating the table that you want to use as a menu via the post editor toolbar (more information on inserting tables can be found in the Post Editor section of the Publii Documentation). Once your table is inserted, highlight it and, in the Formats menu, select Dining menu and save changes. This will restyle the table contents to make it look like the demo menu. Now you can add items to your table as normal.

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.

Dropcaps

You can easily add dropcaps (dropped capital) to your content by selecting the right element from the Formats menu of the WYSIWYG editor toolbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia varius suscipit. Vestibulum varius dui metus, vel porttitor dui ullamcorper at. Vestibulum ac tortor vestibulum neque gravida euismod. Mauris eu convallis sem. Pellentesque id odio dictum, hendrerit ligula quis, sollicitudin ante. In consequat lorem at lacus elementum, mollis aliquet tortor sagittis. Maecenas et nulla mi. Vivamus ligula tortor, porttitor et enim non, feugiat porta elit.

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 ButtonButton 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>
     <h4> Title </h4>
     <p> Your message here...</p>
</aside>

Tables

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

By default all tables look like:

#DateCityCountry
1October 29th, 2017RamilliesFrance
2September 20th, 2018DufftownJapan
3October 15th, 2018KircudbrightAntarctica
4March 1st, 2019South BurlingtonVirgin Islands

with .table-bordered class added:

#DateCityCountry
1October 29th, 2017RamilliesFrance
2September 20th, 2018DufftownJapan
3October 15th, 2018KircudbrightAntarctica
4March 1st, 2019South BurlingtonVirgin Islands

with .table-striped class added:

#DateCityCountry
1October 29th, 2017RamilliesFrance
2September 20th, 2018DufftownJapan
3October 15th, 2018KircudbrightAntarctica
4March 1st, 2019South BurlingtonVirgin Islands

with .table-title class added:

#DateCityCountry
1October 29th, 2017RamilliesFrance
2September 20th, 2018DufftownJapan
3October 15th, 2018KircudbrightAntarctica
4March 1st, 2019South BurlingtonVirgin Islands

You can easily mix the table styles but adding two classes e.g.: .table-bordered .table-striped

#DateCityCountry
1October 29th, 2017RamilliesFrance
2September 20th, 2018DufftownJapan
3October 15th, 2018KircudbrightAntarctica
4March 1st, 2019South BurlingtonVirgin Islands