Documentation

Theme Spectre

Installation

  1. Download glampagne.zip from your ThemeSpectre.com order page or confirmation email.
  2. Create a folder/subdirectory called 'glampagne' in /content/themes/.
  3. Unzip glampagne.zip into /content/themes/glampagne/.
  4. Restart Ghost.
  5. Log into the Ghost admin panel.
  6. Go to Settings > General and select glampagne as your Theme.
  7. Save the settings.

Customization

In Settings > General several options will alter the content in Glampagne:

  • Blog Title - Appears in bold within the blog header.
  • Blog Description - Appears in the the header next to the blog title (smaller, grey, italicized).
  • Blog Logo - Appears to the left of the blog title in the header.
  • Blog Cover - This will appear as a full background image of the sidebar (768px width and above).
  • Posts per page - Determines how many posts are displayed at a time on the homepage. 6 - 12 is recommended.

Some fields in Settings > User also appear within the theme:

  • Full Name - Appears underneath the Post Title in individual blog posts.

The location, website,, picture, bio and email fields are currently unused.

Featured Images / Post Thumbnails

On the Glampagne home page, each post will display a featured image above the title and excerpt. In order for this image to display properly, it must be inserted at the top of your post.

For example, create a new post in Ghost.
In the content window, hit Ctrl/Cmd+Shift+I to insert a new image snippet.
Upload a new image, or enter the URL for an online image.
There should be no text above or before the image in your post. This image will be featured as the thumbnail on the homepage.

If you do not wish for this image to appear in your post (only in the grid view), then use the word 'hidden' as the alt tag.
For example:
![hidden](https://myblog.com/content/images/myimg.jpg) If the image above is the first line of content in your post, the myimg.jpg image will appear in the grid, but not on the single post page.

Custom Styles and JavaScript

Custom styles can be placed in /content/themes/glampagne/css/custom.css.

Custom JavaScript can go into /content/themes/glampagne/js/scripts.js.

Both of these files are already loaded into the theme and ready to go.

The static links that appear in the header of the blog can be customized by editing the navmenu.hbs file.
These links can be anything, including links to specific posts, or links to other sites.

  1. Open /content/themes/glampagne/partials/navmenu.hbs
  2. Edit the anchor elements within each list item.
  3. Save navmenu.hbs
  4. Refreshing the page will show the changes.

Please note: The static navigation menu is a temporary fix, and will eventually be managed within the Ghost Admin menu.

Social Links Menu

Similar to the Navigation links, the Footer and Social Links are editable in a Handlebars template.

To edit the Social Links menu:

  1. Open /content/themes/glampagne/partials/social-media-nav.hbs and add the URLs to your social media profiles to the href of each link. For example, a link to Theme Spectre's Twitter account will look like:
    <li><a href="https://twitter.com/ThemeSpectre"><span class="symbol">&#xe287;</span></a></li>
  2. Save social-media-nav.hbs. You do not need to restart Ghost for the changes to take effect.
  3. For different/additional social links, go to https://drinchev.github.io/monosocialiconsfont/ to find the appropriate icon.
  4. Copy the unicode value for your desired icon (e.g. ).
  5. Duplicate a list item in the social links menu, and replace the existing unicode value with the one retrieved from the MonoSocial website.
  6. Replace the URL with a new URL for your particular profile.

Disqus Comments

To enable Disqus comments:

  1. Open /content/themes/glampagne/post.hbs and uncomment the {{!> comments}} partial tag by removing the exclamation point (!).
  2. Open /content/themes/glampagne/partials/comments.hbs
  3. If you do not yet have a Disqus account, sign up at www.disqus.com
  4. Copy the Disqus shortname for your site and paste it into line 13, replacing the word example with your site's shortname.
  5. Save comments.hbs.

If you wish to use Facebook Comments, Google+, or another discussion system, you may replace the entire contents of the comments.hbs file with whatever code is necessary for your system of choice.

Advanced Customization

If you wish to completely restyle the look and feel of Glampagne for your site, you are free to do so. Theme Spectre themes are based on SASS (SCSS syntax), and compiled with Grunt.

To begin editing the SASS files, ensure you have SASS 3.2 or 3.3-alpha installed.
Run npm install in /content/themes/theranger to install all the Grunt dependencies.

grunt will simply compile all the SASS files into style.css and ie.css. grunt watch will start a process that will watch the SASS files for changes, and compile each time a SASS file is saved.

Please Note: When running the grunt task and re-compiling the SASS files, the following CSS files will be overwritten: /content/themes/glampagne/css/ie.css and /content/themes/glampagne/css/style.css. If you have any custom CSS in those files, they will be removed. Please place any CSS customizations in /content/themes/glampagne/css/custom.css as it is never overwritten by grunt.

comments powered by Disqus