Live Preview has No Style

Question

I am a complete novice.

Live Preview does not seem to be accessing the stylesheets, which are called in my _skeleton.html. My template is sample.html. I am live, not in dev environment,in case that matters. And this is a single, not channel or structure.

I have read the other questions/answers about this topic, but I haven't made changes to any code/php files, and I don't have any variables named "entry."

Here are my templates.

First, _skeleton.html.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" {% block language %}{% endblock language %}>
  <head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block robots %}{% endblock robots %}
    <title>{% block title %}{% endblock title %}</title>
    <link rel="home" href="{{ siteUrl }}" />
    <meta name="description" {% block description %}{% endblock description %}>
    <!-- Typekit -->
    <script type="text/javascript" src="//use.typekit.net/xxx7vby.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="canonical" {% block canonicalURL %}{% endblock canonicalURL %} />
    <link rel="icon" href="assets/images/favicon.ico">
    <!-- Bootstrap core CSS -->
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="assets/css/to-do.css">
    <!--http://ogp.me/-->
    <meta property="og:title" {% block ogTitle %}{% endblock ogTitle %}>
    <meta property="og:type" content="website" />
    <meta property="og:url" {% block ogURL %}{% endblock ogURL %} />
    <!-- <meta property="og:image" content="http://delectabl.es/assets/images/delectables-logo.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="???">
    <meta property="og:image:height" content="???"> -->
    <meta property="og:description" {% block ogDescription %}{% endblock ogDescription %}>
    <meta property="og:locale" {% block locale %}{% endblock locale %}>
    <meta property="og:site_name" content="{{ siteName }}">
    <!--<meta prefix="fb: http://ogp.me/ns/fb#" property="fb:app_id" content="???????????????"> -->
  </head>
  <body>
{% block contents %}{% endblock contents %}
{% include "includes/include-footer" %}
{% include "includes/include-bootstrap-core-javascript" %}
  </body>
</html>

Then, sample.html:

{% extends "_layout" %}

{% block language %}
lang="{{ entry.languageLocale }}"
{% endblock language %}

{% block robots %}
{% if entry.metaRobotsIndex.contains('index') %}
<meta name="robots" content="index">
{% endif %}
{% if entry.metaRobotsIndex.contains('noindex') %}
<meta name="robots" content="noindex">
{% endif %}
{% if entry.metaRobotsIndex.contains('noimageindex') %}
<meta name="robots" content="noimageindex">
{% endif %}
{% if entry.metaRobotsIndex.contains('none') %}
<meta name="robots" content="none">
{% endif %}
{% if entry.metaRobotsIndex.contains('follow') %}
<meta name="robots" content="index">
{% endif %}
{% if entry.metaRobotsIndex.contains('nofollow') %}
<meta name="robots" content="nofollow">
{% endif %}
{% if entry.metaRobotsIndex.contains('noarchive') %}
<meta name="robots" content="noarchive">
{% endif %}
{% if entry.metaRobotsIndex.contains('nocache') %}
<meta name="robots" content="nocache">
{% endif %}
{% if entry.metaRobotsIndex.contains('nosnippet') %}
<meta name="robots" content="nosnippet">
{% endif %}
{% if entry.metaRobotsIndex.contains('noodp') %}
<meta name="robots" content="noodp">
{% endif %}
{% if entry.metaRobotsIndex.contains('noydir') %}
<meta name="robots" content="noydir">
{% endif %}
{% endblock robots %}

{% block title %}
{{ siteName }}: {{ entry.title }}
{% endblock title %}

{% block description %}
content="{{ entry.metaDescription }}"
{% endblock description %}

{% block canonicalURL %}
href="{{ entry.url }}"
{% endblock canonicalURL %}

{% block ogTitle %}
content="{{ siteName }}: {{ entry.title }}"
{% endblock ogTitle %}

{% block ogURL %}
content="{{ entry.url }}"
{% endblock ogURL %}

{% block ogDescription %}
content="{{ entry.metaDescription }}"
{% endblock ogDescription %}

{% block locale %}
content="{{ entry.languageLocale }}"
{% endblock locale %}

{% block contents %}
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-10 col-xs-offset-1">
          <article>
            <header>
              <h1>{{ entry.heading }}</h1>
            </header>
            <div>
              {{ entry.body }}
            </div>
          </article>
        </div>
      </div>
    </div>
{% endblock contents %}

The page is live (ignore the ugly styling). You can see it at delectabl.es/sample.

On Live Preview it looks like this:

enter image description here

What am I missing?

Thank you.

Lora at Two Sigma

Unless the {{ entry.whatEver }} counts as a variable named "entry." — Lora at Two Sigma, Sep 13 '14 at 14:56
@AbbeyDesign, thank you. It worked. I'm a bit confused, though, because the address works live without the "{{ siteUrl }}/" (because the starting point is the root, right?, I think). Presumably because craft/templates/ is above the root. Don't really understand why it would work both ways live and only one way in the Live Preview. Even so, at least I know what I need to do. Thank you so much. — Lora at Two Sigma, Sep 14 '14 at 03:29

AbbeyDesign · Accepted Answer · 2014-09-13T15:07:07.447

7

Not sure what your end url is but I think you'll need either a "/" or {{ siteUrl }} before "assets" in "assets/bootstrap/css/bootstrap.min.css".

so (for all references to css etc.)

<link href="{{ siteUrl }}assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

or

<link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

edited Sep 13 '14 at 15:07

answered Sep 13 '14 at 14:59

AbbeyDesign

1,527
8
13

Unrelated, but in your sample.html, wouldn't all those conditionals in the robots block work with one <meta name="robots" content="{{ entry.metaRobotsIndex }}">? – AbbeyDesign Sep 13 '14 at 15:27
I would love to do that, but it can have more than one option selected (and often will), e.g., "noarchive" and "nofollow". Is there a better way to do that? (I thought about {% switch %} but it's not much better.) – Lora at Two Sigma Sep 14 '14 at 03:14
I can insert multiple values into one tag, but then I run into a comma problem. Is there a reference for how to remove the last comma that you know of? – Lora at Two Sigma Sep 14 '14 at 03:37
What kind of field is {{ metaRobotsIndex }}? – AbbeyDesign Sep 14 '14 at 03:58
1

{% block robots %} {% for option in entry.metaRobotsIndex %} {{ option }}{% if not loop.last %}, {% endif %} {% endfor %} {% endblock robots %} – Lora at Two Sigma Sep 14 '14 at 03:58
Yes, that is what I would do. – AbbeyDesign Sep 14 '14 at 04:04
It's a checkbox. Yes, thanks to your suggestion, Craft's documentation, and a great recipe at link titled "Remove elements from the last iteration a loop," it worked beautifully.
Thanks, @AbbeyDesign.
– Lora at Two Sigma Sep 14 '14 at 04:07

Live Preview has No Style

1 Answers1