Theme Customization

I’m fairly new to Ghost theme development, so please let me know if I’m missing something. Is there a way for a site admin to provide theme settings or via a config? I noticed the config property in package.json, but the contents appear to be filtered for the template context. It also looks like integrations would not allow this either. This seems like it should be obvious, but I haven’t found a solution so far.

I am wondering the same. I can edit the raw theme files but i’m worried what will happen when i update the theme. In WP you use child themes to avoid overwriting changes…is there some process for this in Ghost?

Some theme developers use a template partial containing a JSON object. As long as the partial is included towards the top of the page (eg in the <head>), the object will be available in your theme files.

@markharper20 some themes utilize a config.hbs file.

As an example or starting point for you:

I found an older Ghost theme which utilizes this method, providing an editable list of Javascript variables. (I purchased this theme and then updated for current compatibility and used it as a starting point for one of my own theme projects.)

You can see the original theme here:

http://pixelandkraft.com/blockster/demo/portal/

And some docs here:

http://pixelandkraft.com/blockster/demo/docs/

And here is my heavily modified and updated version of that theme on one of my sites:

Using the method demonstrated in the original Blockster theme, the site admin can also override the theme settings provided in the config.hbs by duplicating the contents of the config.hbs in

Settings -> Code Injection -> Site Header

where, through only the admin area in Ghost (without the need to access or edit any site files directly), these variables can be changed to make drastic modifications to the theme.

Here is what the config.hbs looks like in the original Blockster theme…

<script>

/*
Blockster Config File

Notes:

  • no quotation marks for true/false options
  • all other settings need quotation marks
    Tip:
  • ensure your text editor syntax highlighting
    is set to javascript */

/* Multi Author
-------------------------------------------------- */
var use_multi_author = false

/* Global Light or Dark

Options:

  • ‘light’
  • ‘dark’
    */
    var themeLight_or_dark = ‘light’

/* Global Color

Options:
‘blue’, ‘blue2’, ‘green’,
‘green2’, ‘orange’, ‘red’,
‘purple’, or ‘brown’
*/
var themeColor = ‘blue’

/* Integrations - social

Notes:

  • empty ‘’ marks turn off the icon
  • anything in the ‘’ marks turn on the icon
  • use the full url for each link, as
    in the twitter example
  • icons will appear from left-to-right in
    the order they’re listed here - reorder
    till your heart’s content. */

var social = {
facebook: ‘#’,
googlep: ‘#’,
twitter: ‘http://twitter.com/pixelandkraft’,
rss: ‘rss’,
}

/* Google Analytics (tracking code)
-------------------------------------------------- */
var google_analytics_accout = ‘UA-52565414-1’

/* Home Post Excerpts
-------------------------------------------------- */
var show_filter_tag_count = true
var use_elipse = false
var border_on_excerpt_images = false
var gallery_excerpt_titles = false

// For default excerpt layout style
var read_full_post_text = ‘[ Read Full Post ]’

// For gallery and hybrid excerpt layout styles
var read_more_btn_text = ‘Read Full Post’

/* Style

Options:
‘classic1’, ‘classic2’, ‘gallery1’, ‘gallery2’,
‘gallery3’, ‘gallery4’, ‘galleryi’, ‘text’ */
var home_page_excerpt_style = ‘classic1’

/* Comments
-------------------------------------------------- */
var useDisqus = true
var disqus_shortname = ‘blockster’

/* Background Image (global)

Options, included:
‘bgImg1’, ‘bgImg2’, ‘bgImg3’, ‘bgImg4’,
‘bgImg5’, ‘bgImg6’, ‘bgImg7’, ‘bgImg8’,
‘bgImg9’, ‘bgImg10’, ‘bgImg11’, ‘bgImg12’,

Options, custom:
‘bgImgCustom’, ‘bgImgCustomJPG’, ‘bgImgCustomPNG’
NOTE: Follow these steps to use a custom background image:

  1. Upload your image to Blockster’s image background directory,
    located at /assets/images/backgrounds/
  2. Name your image according to one of the above options, with its
    appropriate extension (bgImgCustom.jpg, bgImgCustomJPG.jpg, or bgImgCustomPNG.png)
  3. Set the below variable (background_image) to your option.
    When finished, the below should look like one of these three options:
    • var background_image = ‘bgImgCustom’
    • var background_image = ‘bgImgCustomJPG’
    • var background_image = ‘bgImgCustomPNG’
      NOTE: ‘bgImgCustom’ is only for .jpeg images. We added ‘bgImgCustomJPG’ for clarity. */

var background_image = ‘’

/* Sidebar/Slideout
-------------------------------------------------- */

/* Background Color

Notes:

  • must be in RBG format
  • to convert hex to rgb: http://hex.colorrrs.com/ */
    var sidebar_bg = ‘49,51,48’
    var slideout_bg = ‘66,69,65’

/* Transparency

Options:
any value from 0 to 1, two digits after the decimal
Notes:

  • to have no transparency use the value ‘1’
  • to have no background use the value ‘0’ */
    var transparency_sb = ‘0.97’
    var transparency_slideout = ‘0.93’

/* Simple UX Toggle

a simpler ux design for filter and sort list items */
var slideout_list_simple = false

/* --------------------------------------------------
ADVANCED & COMPLETELY OPTIONAL SETTINGS
-------------------------------------------------- */

/* Container Width (for all pages but home)

Notes:

  • Initial values here are Blockster’s defaults.
  • Breakpoint values are MAX widths, meaning anything BELOW the px amount will be targeted. */

var use_custom_container_width = false // must be true to activate any width customizations below

// BREAKPOINTS
var breakpoint_1 = ‘1250px’
var breakpoint_2 = ‘850px’
var breakpoint_3 = ‘600px’

// WIDTHS
var wider_than_breakpoint_1 = ‘50%’
var breakpoint_1_width = ‘63%’
var breakpoint_2_width = ‘75%’
var breakpoint_3_width = ‘100%’

// demo only
var demoOn = true

/* Strings for Translation / Customization

Notes:

  • A simple way to allow for easy translation of the
    strings set by Blockster.
  • Translate into your target language. Simple. Easy.
  • “ts” refers to “translation string”
    */

// Filter & Sort Home-Page
var ts_home_nav_text = “home”

var ts_filter_btn = “filter”
var ts_sort_btn = “sort”
var ts_filter_slideout_heading = “filter”
var ts_sort_slideout_heading = “sort”

var ts_sort_ascending = “ascending”
var ts_sort_descending = “descending”
var ts_sort_date = “date”
var ts_sort_title = “tite”

var ts_reset_btn = “reset”

var ts_search_placeholder = “SEARCH”

// Post Pages
var ts_shareNote = “Share This On:”
var ts_author = “author:”

</script>