The Company Theme Documentation

About Company theme?

The Company Theme was made for businesses and organizations to showcase products and resources. It utilizes the home page as a marketing page for your products and services. The homepage has a customizable Hero section to write engaging headlines with the ability to upload an image.

The main files are:

  • default.hbs - The parent template file, which acts as the universal layout.
  • home.hbs - The template that renders the homepage.
  • index.hbs - The main template to generate a list of posts, usually the home page
  • post.hbs - The template used to render individual posts
  • page.hbs - The template used to render individual pages
  • tag.hbs - Used for tag archives, eg. "all posts tagged with news"
  • tags.hbs - Used for tag archives, eg. "all site tags"
  • author.hbs - Used for author archives, eg. "all posts written by Push"

Company comes with several other file templates for editing and changing of styles.

  • archive.hbs - Custom template for an /about/ page
  • author.hbs - Custom template for /tag/news/ archive
  • features.hbs - Custom template for /author/ali/ archive
  • shop.hbs - Custom template for shop page
  • custom-product.hbs - Custom template for shop products
  • authors.hbs - Custom template for /author/ali/ archive
  • authors.hbs - Custom template for /author/ali/ archive

Getting started

Follow these instructions to upload Company theme to your Ghost site:

  1. In the admin of your Ghost site, navigate to Settings > Design
  2. In the lower left-hand corner, click Change theme.
  3. In the upper right hand corner, click Upload theme.
  4. Upload the company.zip file.
  5. After the file has uploaded, click Activate.

Install Routes & Placeholder content

The routes.yaml file must be added to ensure that this theme works correctly.

Follow the steps below to upload the routes.yaml file.

  1. In the admin of your Ghost site, navigate to Settings > Labs
  2. Under Beta Features > Routes, click Upload routes YAML

Follow the steps below to upload the Placeholder content.

  1. In the admin of your Ghost site, navigate to Settings > Labs
  2. Under MIGRATION OPTIONS > Import content, choose Placeholder content file and select import.

Styling & CSS

The CSS for this theme utilizes utility classes generated by the library CSSmitten. CSSmitten allows us to customize and generate a simple css style guide.

In the /assets/css folder you will find:

  • config.json - Generates style guide.
  • styles.css - Generated style guide with utility classes used throughout theme.
  • custom.css - This is the only file to add and remove styles from. This file is for adding custom styles throughout the theme.

The custom.css file is where you are able to edit many parts of The Company Theme if you're able to code.

Site design

This theme comes with various features that allow you to customize the look of your site. These settings can be found in your Ghost Admin under Settings > Design.

On the left-hand column are three sections that allow you to customize different parts of your theme.

  • Brand
  • Site-wide
  • Homepage

Brand

The Brand section allows you to change the Accent color, Icon, and Logo.

Site-wide

The site-wide section allows you to select a global background color for your site's sections.

You also have the ability to set up socials by typing in a URL for Twitter, Facebook, Instagram, and RSS.

The email signup text input is for writing an engaging call-to-action description above your email subscription forms.

Footer nav 1 & Footer nav 2 allow you to change the header text above the links in your footer section.

Homepage

This section allows you to adjust the look of the Hero section on the homepage.

  • Ability to input a custom headline and subheadline.

  • Ability to change the button text and hyper-link.

  • Upload a hero image.

More details below.

Homepage

The homepage of your site must convey the right amount of information to direct the visitors of your site. Each one of these sections helps you to leave an informative impression of your product or service.

Below you will learn how to setup each section of the homepage for your site.

Homepage Hero

On this section there are 4 elements that allow

  • Headline
  • SubHeadline
  • Buttons
  • Image

Navigate to Settings > Design in your Ghost admin. Open the Homepage tab to adjust the hero section.

Simply input your desired headline & sub headline. You can change the text on both buttons as well as their link.

Lastly, you have the ability to upload an image to the hero section. Be sure to optimize the image for better page speed. There is a free toll called ImageOptim that you may find useful to help optimize the images on your site.

Homepage About section

The Homepage about section is created by creating a page in your Ghost admin and then adding a tag with the name of #home-about. The title of this page will be the headline of this section. If you uploaded the placeholder content then this will already be created for you, but you can also create it yourself by following these instructions:

  1. Create a new page and give it a title that you would like to see on your homepage about section.
  2. Add content to this page to show up on the Homepage About section.You have the ability to put any kind of content that the Ghost editor allows in this section. All of the editor cards are available to you and will show up in this section.
  3. Add a tag to the page titled #home-about.

Homepage Feature section

The Homepage Feature sections will appear by creating a page called Features and adding a tag titled #home-features. Follow the instructions below to learn how to add features.

  1. Create a new page titled Features.
  2. Add tag #home-features to page and save.
  3. Navigate to Tags in your Ghost admin.
  4. Here you will add a Name, Tag image, Description and save.
  5. Navigate back to Features page and add the recently created tag to the page and save.
  6. Features will now show up in Homepage Feature section.

Remember to use optimized icons for Tag image.

Homepage Latest posts section

The Homepage Latest Posts section will display a maximum of 3 of your latest featured posts. You can make a post a "featured post" by:

  1. Navigate to a particular post page.
  2. Open the "Post settings".
  3. Scroll to bottom and check "Feature this post" and save.

Homepage Testimonials section

The Homepage Testimonials section will appear by creating a page called Testimonials and adding a tag titled #home-testimonials. Follow the instructions below to learn how to add testimonials.

  1. Create a new page titled Testimonials.
  2. Add tag #home-testimonials to page and save.
  3. Navigate to Tags in your Ghost admin.
  4. Here you will add a Name, Tag image, Description, Meta Title and save.
  5. Navigate back to Testimonials page and add the recently created tag to the page and save.
  6. Testimonials will now show up in Homepage Testimonial section.

Remember to use optimized icons for Tag image.

Homepage FAQ section

The Homepage FAQ section will appear by creating a page called FAQ and adding a tag titled #home-faq. Follow the instructions below to learn how to add a FAQ section.

  1. Create a new page and title it "FAQ"
  2. Add content a toggle card to this page to show up on the Homepage FAQ section.
  3. You can add as many toggle cards as you'd like to this section.

Header Section

Header nav

Contact Page

https://tally.so/

Email forms

Shop page

Product page

Portal / Memberships

SVG Icons

The Company Theme uses inline SVG icons, included via Handlebars partials. You can find all icons inside /partials/icons. To use an icon just include the name of the relevant file, eg. To include the SVG icon in /partials/icons/rss.hbs - use {{> "icons/rss"}}.

You can add your own SVG icons in the same manner.