Trouble with London Theme

Hello! I am brand new to ghost / CSS and am in the process of building my site. I have ghost running locally, I have the pro plan so I can modify and upload custom themes if necessary.

I’m trying to modify the layout of my site (currently using the London theme) and getting nowhere. What I want is a tiled background image visible behind the entire site, including the gh-header area. I have the Ghost Pro and can edit and upload custom themes. I figured out how to use code injection to set a background image stored in the theme’s assets folder:

body {
background-image: url("/assets/images/background.png");
}

However, when I do this, the header area, where the theme is putting the publication-logo image, the navigation menus, and the subscription image has a solid white background. I’ve tried redefining gh-canvas but that doesn’t work. Is there a way to make the background image visible globally or make the top banner have a transparent background? What attribute should I try to change, gh-head, site-wrapper, gh-head-brand, gh-head-inner, gh-head-brand-wrapper, gh-head-logo, or what? If there is documentation explaining what each of these things mean in the context of London, I cannot find it–if such a thing exists, please point me to it!

Secondly, I would like the post pages to have a different background on the center column, so that the text appears over a paper texture that matches the texture of the global background. Is this possible? If so, how might I do it?

Thank you!

Would it be easier to change Casper or Source or something else more documented to feature a main page of images that display the post title when you mouse over them, like London does, than to try to modify London? I am working on a locally hosted instance at the moment.

  1. Make sure the image path exists
  2. Wrap the above code inside tag, e.g. <style>your code</style>
    If it still doesn’t work, you can share a link to make debug easier.

Yeah, the path works, and I did wrap it in style tags. It is loading the image, but it is covered by the banner at the top. I can implement this in production but I’ll have to zip up the theme and so on, so give me a secong. Here’s what it looks like; the blueprint background should go under everything (except the center column of a post, but that’s another issue.):

OK, the production site, with some old content loaded up to mess around with and figure out how it will look, is at https://thecriterioncontraption.com.

What I’ve done here is downloaded the London theme, added a few images to the /assets/images/ folder (made no changes to the other files) loaded it to production, and used code injection to add the following:

<STYLE>
body {
  background-image: url("/assets/images/patentbackgroundfullres.png");
}
  </STYLE>

I haven’t made any other changes to the files of the original London theme (but I can and will, because I’m going to make a few font changes). I know that it looks terrible right now, but I’m trying to get the layout right before reducing the image size and so on. Any idea how to get that background behind the entire site?

I tried adding the !important property but got the same results.

I think your problem is that the top navbar (some element in it, anyway) has a white background.

I agree, but I can’t find documentation on what the various gh-variable things actually apply to in the theme and do not know what I need to change or override to remove the white background from the navbar.

This appears to be the code in default.hbs that generates the navbar. There’s no background property that I can see. What am I missing?

<body class="{{body_class}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}">
<div class="site-wrapper">

    <header id="gh-head" class="gh-head gh-outer">
        <div class="gh-head-inner gh-inner">
            <div class="gh-head-brand">
                <div class="gh-head-brand-wrapper">
                    <a class="gh-head-logo" href="{{@site.url}}">
                        {{#if @site.logo}}
                            <img src="{{@site.logo}}" alt="{{@site.title}}">
                        {{else}}
                            {{@site.title}}
                        {{/if}}
                    </a>
                </div>
                <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                <button class="gh-burger"></button>
            </div>

            <nav class="gh-head-menu">
                {{navigation}}
                {{#unless @site.members_enabled}}
                    {{#match @custom.navigation_layout "Stacked"}}
                        <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                    {{/match}}
                {{/unless}}
            </nav>

            <div class="gh-head-actions">
                {{#unless @site.members_enabled}}
                    {{^match @custom.navigation_layout "Stacked"}}
                        <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                    {{/match}}
                {{else}}
                    <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                    <div class="gh-head-members">
                        {{#unless @member}}
                            {{#unless @site.members_invite_only}}
                                <a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signup" data-portal="signup">Subscribe</a>
                            {{else}}
                                <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/signin" data-portal="signin">Sign in</a>
                            {{/unless}}
                        {{else}}
                            <a class="gh-head-btn gh-btn gh-primary-btn" href="#/portal/account" data-portal="account">Account</a>
                        {{/unless}}
                    </div>
                {{/unless}}
            </div>
        </div>
    </header>

Try adding this rule (if you’re using code injection, be sure it’s wrapped with <style> tags)

.gh-head {
  background: transparent;
}
1 Like

That did it! Thank you!!!

1 Like

Cool blog. I sent it to my son, who is a film buff.