Custom CSS is not loading

support
1

Hi,
my custome css file home.css is not loading. Here is a screenshot of my network tab from google chrome:

network_tab
network_tab2880×1062 281 KB

It looks like, that my custome home.js file is loading, but I am not sure.
Would be nice, if someone can have a look, thanks.

baseof.html:

{{ if .Store.Get "videoblabla" }}
    {{ with resources.Get "css/home.css" | minify }}
        <link href="{{ .RelPermalink }}">
    {{ end }}   
{{ end }}

{{ if .Store.Get "videoblabla" }}
    {{ with resources.Get "js/home.js" | minify }}
        <script src="{{ .RelPermalink }}"></script>
    {{ end }}   
{{ end }}

Here is my repo:
https://github.com/malde11/portfolio

2

How can I visually tell if it’s not loaded?

3

Hmm… maby it is loading in your browser and I have configure it wrong. :blush:
Or if you compile my project on your system and find out my failure or what I am missing.

The second one would be nice, if you have got the time.

4

What I want to know is, if it were loading correctly, what should I see in the browser?

5

Ahh OK, the navigation bar should be black at page load… and on the black bar is a hover affect(blue). But all of it only on the homepage. Both scripst home.js and home.css should be only load on the homepage.

6 
{{ if .Store.Get "videoblabla" }}
    {{ with resources.Get "css/home.css" | minify }}
        <link href="{{ .RelPermalink }}">
    {{ end }}   
{{ end }}

{{ if .Store.Get "videoblabla" }}
    {{ with resources.Get "js/home.js" | minify }}
        <script src="{{ .RelPermalink }}"></script>
    {{ end }}   
{{ end }}

This code is placed after the closing html tag in baseof.html.

Move the JS part above the closing body tag (or maybe within the head element (I’m not sure how it is used), and move the CSS part so that it is within the head element.

But I’m not sure if this will consistently work because the Store value is written in the hero partial, which is rendered after the head element. Do you really need to wrap it within the Store.Get conditional?

7

Wrap it with {{ if .IsHome}} something {{ end }}.

8

Have changed a few things, here is my head.html:

<head>
  <meta charset="utf-8" />
  <title>{{ .Title }}</title>

  {{ "<!-- mobile responsive meta -->" | safeHTML }}
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  {{ with .Site.Params.author }}
  <meta name="author" content="{{ . }}">
  {{ end }}
  {{ hugo.Generator }}

  {{ "<!-- Bootstrap -->" | safeHTML }}
  {{ $bootstrap := resources.Get "css/bootstrap.css" | minify }}
  <link rel="stylesheet" href="{{ $bootstrap.Permalink }}" />
  {{ "<!-- font-awesome -->" | safeHTML }}
  <link rel="stylesheet" href="{{ "font-awesome/css/font-awesome.min.css" | absURL }}" />
  {{ "<!-- Main Stylesheets -->" | safeHTML }}
  {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | minify }}
  <link href="{{ $style.Permalink }}" rel="stylesheet" />

  {{ range .Site.Params.custom_stylesheets -}}
    {{ $style := resources.Get . | resources.ToCSS | minify }}
    <link href="{{ $style.Permalink }}" rel="stylesheet" />
  {{- end }}

  <!-- Home css is "NEW" -->
  {{ if .IsHome }}
    {{ with resources.Get "css/home.css" | minify }}
      <link href="{{ .RelPermalink }}">
    {{ end }}
  {{ end }}

  <!--Favicon-->
  <link rel="shortcut icon" href="{{ .Site.Params.favicon_shortcut_icon | absURL }}" type="image/x-icon" />
  <link rel="icon" href="{{ .Site.Params.favicon_icon | absURL }}" type="image/x-icon" />
</head>

And I have added it to the footer like that:

<footer class="site-footer">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="site-footer-logo">
          <a href="{{ .Site.BaseURL }}">
            <img src="{{ .Site.Params.logo_footer | absURL }}" alt="logo-footer">
            <span class="brand-logo-footer">Kettenbeil</span>
          </a>
        </div>
      </div>
      {{ with .Site.Params.footer.contactInfo }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
	    {{ if .address }}
              {{ .address | safeHTML }}
	      <br>
	    {{ end }}
	    {{ if .phone }}
              <a href="tel:{{ .phone }}">{{ .phone }}</a>
              <br>
	    {{ end }}
	    {{ if .email }}
              <a href="mailto:{{ .email }}">{{ .email }}</a>
	    {{ end }}
          </p>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.sitemap }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
            <li><a href="{{ .url | absURL }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.social }}
      <div class="col-lg-2 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <ul class="site-footer-widget-links">
            {{ range .link }}
              <li><a href="{{ .url }}">{{ .name }}</a></li>
            {{ end }}
          </ul>
        </div>
      </div>
      {{ end }}
      {{ with .Site.Params.footer.service }}
      <div class="col-lg-3 col-md-6">
        <div class="site-footer-widget">
          <h5 class="site-footer-widget-title">{{ .title }}</h5>
          <p class="site-footer-widget-description">
            {{ .description | safeHTML }}
          </p>
        </div>
      </div>
      {{ end }}
      <div class="col-lg-2 col-12">
        <a href="#top" class="site-footer-widget-top">
          <img src="{{ "images/to-top.svg" | absURL }}" alt="back-to-top">
          <p>
	    {{ .Site.Params.footer.back_to_top.description | safeHTML }}
          </p>
        </a>
      </div>
      <div class="col-12">
        <div class="site-footer-copyright">
          <p>© Copyright {{ dateFormat "2006" now }} - All Rights Reserved by <a href="https://staticmania.com/" target="_blank">StaticMania</a> </p>
        </div>
      </div>
    </div>
    {{ if .Site.Params.footer.qr_print }}
    <div class="row d-none d-print-block">
      <div class="col col-lg-2">
        {{ $qrcode := resources.Get "js/qrcode.js" | minify }}
        <script src="{{ $qrcode.Permalink }}"></script>

        <div id="qrcode">
          <script type="text/javascript">
           new QRCode(document.getElementById("qrcode"), {
             text: "{{ .Page.RelPermalink | absURL }}",
             width: 128,
             height: 128,
           });
          </script>
        </div>
      </div>
      <div class="col col-md-auto">
        {{ .Page.RelPermalink | absURL }}
      </div>
    </div>
    {{ end }}
  </div>
</footer>


<!-- {{ $formhandler := resources.Get "js/formhandler.js" | minify }}
<script src="{{ $formhandler.Permalink }}"></script> -->
{{ $vendor := resources.Get "js/vendor.js" | minify }}
<script src="{{ $vendor.Permalink }}"></script>
{{ $script := resources.Get "js/script.js" | minify }}
<script src="{{ $script.Permalink }}"></script>


<!-- Home JS "NEW" -->
{{ if .IsHome }}
  {{ with resources.Get "js/home.js" | minify }}
    <script src="{{ .RelPermalink }}"></script>
  {{ end }}
{{end}}

But I have got still no css in network tab:

css
css2880×1140 255 KB

In source tab are both the css and js:

source
source1920×760 135 KB

9

That is never going to work. You’re missing the rel attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

10

wtf… shit… omg was searching for hours :smiley:

atleast i know .IsHome now

Thanks!!!