CSS path does not work after mainpage

Attila_Az · January 19, 2023, 1:35pm

Hello

I’m kinda new to HUGO but working on it since weeks.
I managed to setup my page but all nice and good until i leave the main page /base url.
My problem is that CSS path is not “carried over” to the new pages, posts etc.
It is a file path isue, because if i move my “styles.css” to the directory of each individual generated .html. the format is fine.
I did deep research and dozens of tutorials, posts, and read a loot but didnt found the solution.

The location of my CSS file: theme/static/css/styles.css
My actual baseof.html looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
    <link rel="shortcut icon" sizes="64x64" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    <title>{{ block "title" . }}>{{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <header>
      {{ block "header" . }}
      {{- partial "header.html" . -}}
      {{ end }}
    </header>
    <main class="mb-auto mt-5 pt-3">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer class="sticky-footer">
      {{ block "footer" . }}
      {{- partial "footer.html" . -}}
      {{ end }}
    </footer>
  </body>
</html>

It must be a banal mistake what i simply can not see anymore, please help & TY.

bep · January 19, 2023, 2:38pm

There’s a long story here, but you could fix this by changing the above to:

<link rel="stylesheet" href="{{ `css/styles.css` | relURL }}">

A slightly related tip would be to put your CSS into /assets and load it with resources.Get. That way you don’t have to worry (that much) about path and get the added benefit of using the minify and other related functions on your CSS.

Attila_Az · January 19, 2023, 2:59pm

Ty for your reply. Sadly this option i tryed also and did not worked.

https://personalpage.mywire.org

It is actual with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ `css/styles.css` | relURL }}">
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
    <link rel="shortcut icon" sizes="64x64" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    <title>{{ block "title" . }}>{{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <header>
      {{ block "header" . }}
      {{- partial "header.html" . -}}
      {{ end }}
    </header>
    <main class="mb-auto mt-5 pt-3">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer class="sticky-footer">
      {{ block "footer" . }}
      {{- partial "footer.html" . -}}
      {{ end }}
    </footer>
  </body>
</html>

#desperate

divinerites · January 19, 2023, 3:05pm

The code for your other pages (home is OK) is with a strange and bad structure I think

Problem is not the css but the way you deal with sections and pages.

See

<header>
  <p></p>
  <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a, .dropbtn {
  background: #35363a;
  display: inline-block;
  color: #1cdc99;
  text-align: center;
  padding: 11px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #3dade9;
  color: #35363a;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3dade9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(61,173,233,0.7);
  z-index: 1;
}

.dropdown-content a {
  color: #3dade9;
  padding: 11px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #3dade9;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="https://personalpage.mywire.org"><img src="img/favicon.png" width="64" height="64"></a></li>
  <li><a href="/product1/page1">Page</a></li>
  <li><a href="/blog/my-first-post">Post</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="https://www.google.com">Google</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

</body>
</html></header>

<h1>Page1</h1>

<h3 id="page-1">Page 1</h3>
<ul>
<li>
<p>This is a test page with some content:</p>
<ul>
<li>Content:</li>
</ul>
</li>
<li>
<p>Content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content da.</p>
</li>
</ul>


<footer class="center-footer-text">
<p>&copy;2023 Mato</p>
<footer>

Attila_Az · January 19, 2023, 3:09pm

Yes, but when you try to open my Page or Post example pages… its a mess

divinerites · January 19, 2023, 3:10pm

See the modified post, I thought you had only a home.

Attila_Az · January 19, 2023, 3:11pm

Ty, checking right now

Attila_Az · January 19, 2023, 3:26pm

I simply can not see the diference:

https://personalpage.mywire.org/product1/page1/ is 1:1 of your code here idk im realy that blind

divinerites · January 19, 2023, 3:31pm

Yes. Your HTML code for sections/pages is badly structured.

Attila_Az · January 19, 2023, 3:34pm

It is a 1:1 HUGO generated .html, without any modification after, so dik then.
In case the baseof.html is fine, css is fine, the paths are egzisting and correct. Then it remains a mystery.
How would a basic but correct structure look like?

divinerites · January 19, 2023, 3:39pm

NO. Hugo does NOTHING by itself.

You have some logic for sections and pages in your code.
There is NO hugo code from scratch. Either you use a theme or made your own code.
And this is broken. And the flaw is there.

Without seeing your code it will be impossible to help you.

And this is the proof that your hugo code is bad. See the (bad) test result : https://validator.w3.org/nu/?doc=https%3A%2F%2Fpersonalpage.mywire.org%2Fproduct1%2Fpage1%2F

divinerites · January 19, 2023, 3:47pm

I do not have a crystal ball at the moment …

Attila_Az · January 19, 2023, 3:48pm

Oooh damn i was 1:1 folowing the instructions and troubleshhoting.
So the template files are broken then:

config.toml

baseURL = "https://personalpage.mywire.org/"
languageCode = "en-us"
title = "Mato"
theme = "mato"

baseof.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ `css/styles.css` | relURL }}">
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
    <link rel="shortcut icon" sizes="64x64" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    <title>{{ block "title" . }}>{{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <header>
      {{ block "header" . }}
      {{- partial "header.html" . -}}
      {{ end }}
    </header>
    <main class="mb-auto mt-5 pt-3">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer class="sticky-footer">
      {{ block "footer" . }}
      {{- partial "footer.html" . -}}
      {{ end }}
    </footer>
  </body>
</html>

single.html

{{ partial "header.html" . }}

<h1>{{ .Title }}</h1>

{{ .Content }}

{{ partial "footer.html" . }}

list.html

{{ partial "header.html" . }}

<h1>{{ .Title }}</h1>

{{ .Content }}

{{ range.Data.Pages }}
<article class="post-snippet">
  <h3>
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
  </h3>
	<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
		{{ .Date.Format "January 2, 2006" }}
	</time>
</article>
{{ end }}

{{ partial "footer.html" . }}

divinerites · January 19, 2023, 3:49pm

It means ALL your code. Not just pieces

Attila_Az · January 19, 2023, 3:51pm

I dont know what else to add, rest is kinda generic stuff. There must be something above in those 4

andrewd72 · January 19, 2023, 3:55pm

In your baseof.html you have a main block.
You need to define that main block in the single.html
Without worrying about the footer for now, see if this works:

{{ define "main" }}
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}

Base Templates and Blocks | Hugo (gohugo.io)

Attila_Az · January 19, 2023, 3:56pm

Ty, i try instantly

Attila_Az · January 19, 2023, 4:00pm

My single.html looks like this and its way better than before.

{{ define "main" }}
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}

https://personalpage.mywire.org/blog/my-first-post/

Attila_Az · January 19, 2023, 4:06pm

baseof html fixed so i removed the duplicate header
now fixing the image path to

andrewd72 · January 19, 2023, 4:07pm

Your favicon wants to be /img/favicon.png not img/favicon.png

Define the footer block now or call it in a more simple way without using blocks.

Topic		Replies	Views
Hugo public not Rendering css (attaching localhost/) but Hugo server does support	9	3046	January 29, 2022
CSS working on hugo server but not static pages support	7	3393	December 5, 2017
No CSS via hugo server? support	3	1316	January 6, 2017
Correct usage of theme style.css support	2	647	January 25, 2022
[SOLVED] Hugo Not Rendering CSS but Hugo Server Is support	10	22835	January 25, 2022

CSS path does not work after mainpage

Related topics