Chat Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining MelonLand?
May 16, 2026 - @359.98 (what is this?)
Activity rating: Four Stars Posts & Arts: 89/1k.beats Random | Recent Posts | Guild Recents
News: It's only life! :dog: Guild Events: Spring Themed Projects

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Zonelets CSS issue


« previous next »
Pages: [1] Print Embed
Author Topic: Zonelets CSS issue  (Read 246 times)
EastDakota
Newbie ⚓︎
*
View Profile WWW


⛺︎ My Room

Artifacts:
Joined 2026!
« on: May 15, 2026 @177.31 » Embed

Hello! I'm currently trying to add a Zonelets blog to my neocities page. I successfully inserted the Archive HTML Into my Site's existing format, but I'm struggling with post pages.

When I try to direct the post page to a CSS file from the Zonelets theme pack, it won't recognize it, and I just get a plain webpage. The post file, and the CSS file for zonelets posts are both in the /posts folder on my neocities page, and I pointed the HMTL to the appropriate CSS file, but so far nothing is working. Any help would be appreciated! Thanks!

Link to the blog page:

https://eastdakota.neocities.org/blog

HTML Code:

Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dakota's Website :3</title>
    <meta name="author" content="Dakota">
    <meta name="description" content="My little home on the internet!">
    <link rel="icon" type="image/x-icon" href="images/vista_pc_1.ico"> 
    <link href="posts/nude.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div id="container">
    <div id="header">...</div>
    <div id="content">
      <h1 id="postTitleH1"></h1>
      <h4 id="postDate"></h4>
      
      <p>This is just a test post, so I don't have a ton to day yet. But I'm making this with Zonelets, a neat little HTML blogging platform. Currently trying to figure out how to get my CSS to work with these post pages.</p>
      
      <p> -Dakota</p>
      
      
    <div id="nextprev"></div>
    </div> <!-- end of div id="content" -->
    <div id="footer"></div>
    </div> <!-- end of div id="container" -->
  <!-- Here's the link to our JavaScript! -->
  <script src="../script.js"></script>
  </body>
</html>

Nude.css:

Code
/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}
#content li {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
}

/*This makes images shrink when their container becomes too small (responsive design)*/
img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
  max-width: 60%;
  height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

a:hover { 
  background-color: #c9f1fe;
}

/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
  color: black; 
  outline-color: black;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}


/*HEADER STYLE*/
#header {
  background-color: black;
  padding: 0 5%;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
}
Logged
Dan Q
Hero Member ⚓︎
*****
View Profile WWWArt


I have no idea what I am doing
⛺︎ My Room
RSS: RSS

Guild Memberships:
« Reply #1 on: May 15, 2026 @461.52 » Embed

Here's your problem:

Code
<link href="posts/nude.css" rel="stylesheet" type="text/css" media="all">

That says: the file "nude.css" in the folder "posts" in the current folder. But your URL https://eastdakota.neocities.org/posts/2026-05-09-First-Post already is in the "posts" folder. So you're asking the browser to find the CSS file at https://eastdakota.neocities.org/posts/posts/nude.css (note "posts/posts/"), which isn't where it's located!

Change that line to this:


Code
<link href="/posts/nude.css" rel="stylesheet" type="text/css" media="all">

The extra slash at the start says "relative to the root of the site" and fixes the problem.
Logged

https://danq.me/_q26t/badges/dan-q-88x31-lighter.gif https://danq.me/_q26t/badges/dan-q-88x31-peekaboo-scroller.gif https://beige-buttons.danq.dev/beige-buttons-88x31.gif https://embed-html.danq.dev/embed-html-88x31.gif

Artifact Swap: I met Dan Q on Melonland!PolyamorousBouncy Egg!Joined 2025!Lurby
Dan Q
Hero Member ⚓︎
*****
View Profile WWWArt


I have no idea what I am doing
⛺︎ My Room
RSS: RSS

Guild Memberships:
« Reply #2 on: May 15, 2026 @464.14 » Embed

For future reference, here's how I debugged the problem. I went to https://eastdakota.neocities.org/posts/2026-05-09-First-Post with my browser's debug tools open (you might think of them as "inspect element", but there's much more to them than that) to the "Network" tab, and noticed that the CSS file was 404ing:

https://danq.me/wp-content/uploads/2026/05/Screenshot-2026-05-15-at-11.06.03.png

I right-clicked on that 404 row and clicked "Open in New Tab" to see it 404 for myself. And that's when I noticed that the URL in the address bar said "/posts/posts/". On a hunch, I experimentally removed one of the "posts/" and saw the CSS file.
Logged

https://danq.me/_q26t/badges/dan-q-88x31-lighter.gif https://danq.me/_q26t/badges/dan-q-88x31-peekaboo-scroller.gif https://beige-buttons.danq.dev/beige-buttons-88x31.gif https://embed-html.danq.dev/embed-html-88x31.gif

Artifact Swap: I met Dan Q on Melonland!PolyamorousBouncy Egg!Joined 2025!Lurby
Dan Q
Hero Member ⚓︎
*****
View Profile WWWArt


I have no idea what I am doing
⛺︎ My Room
RSS: RSS

Guild Memberships:
« Reply #3 on: May 15, 2026 @464.92 » Embed

Oh! Incidentally, you're gonna have the same problem with your favicon!
Logged

https://danq.me/_q26t/badges/dan-q-88x31-lighter.gif https://danq.me/_q26t/badges/dan-q-88x31-peekaboo-scroller.gif https://beige-buttons.danq.dev/beige-buttons-88x31.gif https://embed-html.danq.dev/embed-html-88x31.gif

Artifact Swap: I met Dan Q on Melonland!PolyamorousBouncy Egg!Joined 2025!Lurby
EastDakota
Newbie ⚓︎
*
View Profile WWW


⛺︎ My Room

Artifacts:
Joined 2026!
« Reply #4 on: May 15, 2026 @918.32 » Embed

This worked! Thank you very much! And I'll keep all of that in mind!
Logged
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi

MelonLand Nav

@000

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net