Pine Documentation

Note: This documentation assumes that you have a Ghost blog setup and running on a server. If you don't have a Ghost blog setup yet, we highly recommend using Ghost(Pro). You can learn more about installing Ghost here.

Introduction

Thank you for purchasing Pine! Please take the time to review the documentation below and you'll have your blog set up in no time!

Installation

To install Pine, head to yourdomain.com/ghost/#/settings/design/change-theme. Click the 'Upload theme' button and upload the pine.zip file that came with your purchase. Click 'Activate' and the theme is ready to go!

Primary Navigation

The primary navigation is used in the header. This navigation is set up to display your first 3 menu items inline. The rest will appear in the dropdown menu. To edit these menus go to yourdomain.com/ghost/#/settings/navigation.

Secondary Navigation

The secondary navigation is used for the footer. By default these menu items will display inline. To create columns you will need to create column titles. To create column titles, add new navigation item where you want a new column to start and use ## in the url field.

Social Navigation Items

To style the social navigation items, we look for items with particular labels. Use the following labels for your social media items: Behance, Dribbble, Facebook, Github, Instagram, LinkedIn, Pinterest, Reddit, Snapchat, Tiktok, Vimeo, X, X/Twitter, Twitter, Twitter/X, Youtube.

Featured Posts

Featured posts are used on the homepage underneath the popular tags section. Make sure you have at least 5 posts set as featured.

Custom Page Templates

We included 3 custom page templates: Authors, Tags and Contact. To create a custom page, add a new page and select one of the 3 options from the template dropdown located in the page settings sidebar. These pages do not support all content added to the page. See below for reference.

Authors Template

Used to display the page title, excerpt and archive of authors.

Tags Template

Used to display the page title, excerpt and archive of tags.

Contact Template

Used to display the page title, excerpt, feature image and a Formspree form. To ensure the form works you will need to create a form in Formspree and add the endpoint url to the ‘Contact form’ setting within theme settings.

Theme Settings

To update the design settings, head to yourdomain.com/ghost/#/settings/design.

Brand Settings

Site description: Used in your site meta tag for search engines and the footer description.
Accent color: Used to style buttons and links.
Publication icon: Used as the browser tab icon.
Publication logo: Used in the header and footer.
Publication cover: This setting is not used to keep the integrity of the design.

Site-wide Settings

Accent text color: Used to display the text color on top of your accent color. Like on buttons for example.
Publication white logo: If your accent color is dark, set a white version of your logo here to ensure it's visible in the intro section of the homepage.
Publication logo height: Used to change the size of your logo.
Heading font style: Used to change the style of the heading font. Options include: Serif and Sans-serif. The default is Sans-serif.
Mobile menu color: Used to change the color of the mobile menu. Options include: Dark, Light and Brand. The default is Light.
Contact form: Used to add a Formspree form to the custom contact page template.
Footer subscribe: Used to toggle the subscribe form in the footer.
Footer copyright: Used to change the footer copyright text.

Homepage Settings

Intro title: Used to display an intro above the featured posts section.
Intro description: Used to display an accompanying description to the intro.
Intro subscribe: Used to toggle a subscribe form in the intro section.
Popular tags title: Used to display the popular tags title.
Featured posts title: Used to display the featured posts title.
Post feed title: Used to display the post feed title.