Installing the website

Unzip the downloaded source files and upload all the contents (including the invisible .htaccess file) to your server (via FTP). All you need is already included in the source files. Once the upload is finished, your website is ready for use.

For more informations about the installation, installation on a local server, etc. have a look at getkirby.com/docs/installation. If you have any trouble with the installation, I recommend you to follow this link : getkirby.com/docs/developer-guide/troubleshooting/installation.

Managing the website (the Panel)

The Panel is the website management interface where you configure your website, add or delete contents. Log in to your Panel. The default username and password are both "admin" (don’t forget to change them).

For more informations about the panel, have a look at getkirby.com/docs/panel.

Quick formating

1. Setting up your website (name, style, buttons)

In Menu > Site Settings, complete the General settings and customize the Style settings (the general width, colors) and the layout of the menu (visibility, accordion option). The last two sections (Advanced changes, Analytics) can be left empty.

2. Setting up your contents

In Menu > Dashboard, the "Pages" section allows you to create, edit and delete pages. PHTGRPH comes with different page templates : Simple page, Portfolios (vertical, slideshow, thumbnails, etc.). When you create a new page, choose a title and select a template (these settings can be modified afterwards). Once the page is created, you can fill it with your custom contents (text, images, etc.). Finally, check the "Visible" option in the sidebar. Now your page is published and its title appears in the menu.

3. Organizing your contents

Pages can be organized in Sections. A "Section" appears as a separate group in the menu. To make a new Section, create a Page in the Panel and set the "Section" template. A section works like a "folder" where you can manage different pages.
To create a new page in a section, first select the section. Then create a page with your custom contents and layout. It is best to define your site structure before starting to create pages and sections.

Advanced Formatting

1. CSS Styles

In Menu > Site Settings, the "Advanced changes" section allows you to enter custom CSS directly :

html {font-size: 110%; }

Each template (page, slideshow, thumbs, vertical, etc.) has a specific class to apply specific styles, for example:

.portfolio-slideshow img {border: 1px solid #000; }

Versions

V1.1

Sources : phtgrph-11

  • Accordion option for menu,
  • Templates for images : slideshow, vertical, horizontal, thumbs and more,
  • More links for social sharing,
  • Simplified styles,

To update, download and unzip the sources, copy only the "assets" and "site" folders to your server and replace existing files.
Be careful! Phtgrph 1.1 does not support mulitlangual anymore. In order to make a previously made multilingual website work again on Phtgrph, first you have to remove all the language prefixes from the name of all contents in your website's "/contents" folder (this process is not yet handled by Kirby and can lead to broken contents), for exemple : project.en.txt > project.txt, image.jpg.en.txt > image.jpg.txt.
To log in to your Panel, the default username and password are both "admin" (don’t forget to change them).
In Menu > Site Settings, customise the color of the links for the contents and the menu. You can go much further in the customisation of the layout via the CSS footer.
In the Menu > Dashboard you can change the template of all existing portfolios simply by setting the template of the page ("portfolio slideshow", "portfolio vertical" "portfolio free", etc, using the selector in the sidebar).

V1

Sources : phtgrph-1

  • Initial version

More

If you need assistance with installing, customizing the design or the functionalities, or for more informations please contact me at oliviergassies@gmail.com.

Feedback

Feel free to send me a link to your website so that I could add it to my "made with" selection.