Fresca is a simple theme for Ghost. You're looking at Fresca right now. It's optimized for text content, mainly blog posts, tutorials and articles. If you're looking to showcase a portfolio, art or photography then this theme is probably not for you.


Fresca Features

Fresca is responsive which means it looks great on phones, tablets, laptops and desktop computers.

Fresca is built using standard CSS and JS libraries such as Bootstrap 3, Font Awesome, Hover.css and Prism.js. This makes Fresca easy to customize and extend.

All custom CSS is contained in a single fresca.css file with the exception of a few Google Web Font styles set in bootstrap.css. The template file structure for Fresca is simple and makes use of Handlebars partials.

Fresca includes a tag cloud, featured posts, social media icons, blog logo, cover image, animations and effects, Google Web Fonts, sticky header navigation, customizable main and footer navigation and more.


How to Install Fresca

When you purchase Fresca you'll receive a ZIP file named fresca.zip that contains all the necessary theme files.

Step 1: Upload theme files

If you're a Ghost(Pro) user you can simply upload the ZIP file from your blog's control panel. Detailed instructions can be found at the link below.

How to upload a theme to your Ghost(Pro) blog

If you're running a custom installation of Ghost you'll need to intall the theme manually. Don't worry. It's very simple. Just unzip the fresca.zip file and you'll see a folder named fresca. Copy or upload this folder to your Ghost themes directory.

The Ghost themes directory is located under the ghost installation path which varies depending on your Ghost installation.

On Linux systems the Ghost installation is typically something like /var/www/ghost OR /var/lib/ghost. However, it could differ on your system.

After you've located the Ghost installation directory you'll see that it contains a content directory. Inside the content directory you'll see a themes folder. This is where you need to copy the fresca theme folder. For example:

/path/to/ghost/content/themes/fresca

Step 2: Restart Ghost

This step only applies to custom installations. You can skip this step if your using Ghost(Pro) or a server that automatically restarts Ghost for you.

After you've copied the Fresca folder into the Ghost themes directory you'll need to restart your Ghost blog in order for it to recognize the new theme. Ghost is powered by Node.js so this involves restarting the Node.js process.

Step 3: Enable Beta Feature, Public API

This step is important. The Fresca theme uses features that require the Public API, specifically the get helper.

To enable this feature, login to your control panel (at yourblog.com/ghost/settings/labs/) and check the Public API checkbox under Settings > Labs.

Enable Public API

Step 4: Set your blog theme to Fresca

In your blog's control panel navigate to Settings > General, and scroll to the bottom. Select the Fresca theme and then click the Save button in the upper right hand corner.

Select Fresca


General Setup

Now that you've got Fresca theme. Navigate to your blog's general settings from the control panel and set the following.

  • Blog Title: This appears in the main header navigation. For best results keep it short so that it doesn't crowd the navigation bar.
  • Blog Description: One or two sentences will suffice here.
  • Cover image: This appears in the right hand sidebar. Any nice looking image will do.
  • Blog logo: For best results upload a square image for your blog logo on a transparent background. A transparent background will allow the background color of the navigation bar to display through.

Fresca doesn't require a logo or cover image but it looks better with them. At the very least you should provide a Title and Description.

Fresca general settings


Team info & bios

Navigate to your blog's Team section in the control panel and set the following for each team member (author). In most cases this will just be you (the blog owner). For best results provide all of the information.

Fresca team info

The information you provided above will appear on your author page.

Fresca author page


The top main navigation links are set in your Blog's control panel in Settings > Navigation.

For best results set less than 4 main navigation links. 2 or 3 is ideal

Set navigation

nav links


Social icons

The Fresca theme uses Font Awesome to display social media icons.

Unfortunately Ghost doesn't support setting these links in the control panel. To customize them you'll need to edit the theme files directly.

The Fresca theme ships with the most common social icons. However, you'll have to edit the files below to set your personal URLs and uncomment code to enable the social icons that you want to display (i.e. by removing the Handlebars comments surrounding them).

Edit this file to customize the social media icons in the header.
/path/to/ghost/content/themes/fresca/partials/navigation.hbs

Edit this file to customize the social media icons in the footer.
/path/to/ghost/content/themes/fresca/partials/footer.hbs


Post Tags & Tag Pages

Tags are keywords that you associate with a blog post. You can think of them as topics or categories for a post. Tags in Ghost get their own page which lists out all the associated posts.

post tags

You can assign an image and short description to each tag.

tag images

Then the Fresca theme will display the tag image and tag description if they exist. If you take the time to provide all this info for the tags used on your blog it will make your tag template pages look very nice.


Syntax highlighting

Fresca theme ships with Prism.js, a lightweight, extensible code syntax highlighter. You can syntax highlight code in your markdown like this.

js syntax highlighting

Which results in syntax highlighted JavaScript.

$(function() {
    $.get( "/api/foo", function(response) {
		console.log(response);
	});
});

Another example in Python.

Looks like...

import numpy as np
import matplotlib.pyplot as pp
import pandas as pd
import seaborn
import urllib.request

urllib.request.urlretrieve(
    'http://real-chart.finance.yahoo.com/table.csv',
    'spy.csv'
)

For a complete list of supported languages visit the Prism download page. Fresca ships with the default color scheme and all supported languages. You can customize the color scheme or reduce the number of supported languages (for smaller file sizes) by replacing the files below with a customized Prism.js download.

/path/to/ghost/content/themes/fresca/assets/css/prism.css
/path/to/ghost/content/themes/fresca/assets/js/prism.js


Featured posts in sidebar

If you mark a post as featured it will appear in the featured side bar.

featured post

The 3 most recent featured posts will appear in the sidebar.

featured post sidebar


Blockquote

In Fresca a markdown Blockquote looks like below. See the Markdown Guide for reference.

This is what a Blockquote looks like in FRESCA


Disqus commenting

Ghost doesn't have a commenting system built-in. As a result Disqus is used heavily by the Ghost community. The Fresca theme has it pre-installed. If Disqus is enabled comments will appear at the bottom or your posts. You can enable/disable and set your username (shortname) by editing the default.hbs file.

/path/to/ghost/content/themes/fresca/default.hbs

Open the file in your favorite text editor and edit the Disqus JavaScript as desired.

<script type='text/javascript'>
    var disqus = { 'activate' : true, 'shortname' : 'augustkleimo' };
</script>

Creating Custom pages

Ghost gives you the ability to create custom pages and posts that look different from your standard default pages. It's very simple and best described here in the Ghost Themes Documentation.


Topics (tags) sidebar

The topics sidebar in Fresca shows a list of the 25 most frequently used tags.

You can change the number of tags displayed or the order displayed by editing this file.

/path/to/ghost/content/themes/fresca/partials/tags.hbs

More detailed information on how to customize can be found here.


Embedding videos.

You can embed videos in a post or page by wrapping the video embed code (typically an iframe) in <div class="embed-responsive embed-responsive-16by9"></div>. Fresca is built with Bootstrap so if you're familiar with it then you've probably seen this code before.

For best results you should also remove any height and width attributes in the embed code and then add a class="embed-responsive-item"

Here's an example YouTube embded.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/hc14gU-OSMM" frameborder="0" allowfullscreen></iframe>
</div>

You can change 16by9 to 4by3 in the code above to best match the aspect ratio of your embed video. More detailed information can be found here.


#### Google Analytics

To install Google Analytics paste your GA tracking code into the Code Injection > Blog Footer box in your control panel.

GA tracking code


#### Animations and Effects

Advanced users can customize some of the subtle animations and effects used in Fresca by exploring these links and then editing the theme files as desired.


Advanced Configuration

For more advanced customization please refer to the official Ghost Theme documentation which has everything you need to know about creating and customizing a theme.


See Also