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/blogHTML 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:/* 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%;
}