Content in nested directories lose css

support
1

So I just found that when I put a post in another directory inside my contents like this:

└── content
    └── post
    |   └── first-post.md
    └── regular.md

Here, my regular.md would be working completely fine,
as for the first-post.md I lose all of my css, why is that?

2

We need a repo to look at to see what might be the problem, it’s hard to guess what you are doing/using for a template.

Have you read up on how template lookup order works in hugo? That might get you looking in the right direction.

1 Like
3

Well my layout would look something like this:

hugo-icon/
├── content/
├── layouts/
│       └── _default
│              └── single.html
│── static/
│   ├── css
│   ├── images
│   ├── js
│── themes/
│   ├── hugo-icon
│   │   ├── layouts
│   │   │   ├──  _default
│   │   │   │   ├── single.html
│   │   │   ├── partials
│   │   │   ├── 404.html
│   │   │   ├── index.html
│   │   ├── static

I tried adding a posts directory inside my layouts both inside the root and the theme>layouts and copy another single.html inside there as the docs suggest but that didn’t make a difference.

4

Please give us your link-to-css template line, like

    <link rel="stylesheet" type="text/css" href="theme.css">
5

This would reside in my partials folder under sLinks.html

│── themes/
│ ├── hugo-icon
│ │ ├── layouts
│ │ │ ├── _default
│ │ │ ├── partials
│ │ │ │ ├── sLink.html

my single.html would be my index :

<head>
	{{ partial "sLinks.html" . }}
</head>
<body>
	<div class="container-fluid">
		<!-- HEADER -->
		{{ partial "sHeader.html" . }}
		<!-- MAIN CONTENT -->
		{{ partial "sContent.html" . }}
		<!-- FOOTER -->
		{{ partial "sFooter.html" . }}
	</div>
</div>
{{ partial "sJS.html" . }}
</body>

and sLinks.html would have this:

<title>{{ .Title }}</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon is in static >  -->
    <link rel="shortcut icon" href="../favicon.ico"> 
        
    <!-- Animate.css -->
    <link rel="stylesheet" href="../css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="../css/simple-line-icons.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="../css/sbootstrap.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../css/singlestyle.css">
6

That’s clear! Your href="…" are relative.

.. = one level up
/css/ = css directory
/xxx.css = the stylesheet

So try to use an absolute path, like

/css/xxx.css

Your regular page and your post/first-post page are not in the same directory :wink:

2 Likes
7

Haza! That’s what I was looking for! Just a couple dots to be removed, heh