I'm new to the skel.js framework and I'm having some issues.
I downloaded a template from HTML5UP (Zerofour theme) and I have modified it all for my site however the CSS doesn't show up properly on my no-sidebar & left-sidebar pages.
I have an include with the follwing links (identical to their templates):
<link href="+Sans:400,300,700,800" rel="stylesheet" type="text/css" />
<script src="http://www.**********/js/jquery.min.js"></script>
<script src="http://www.**********/js/jquery.dropotron.js"></script>
<script src="http://www.**********/js/config.js"></script>
<script src="http://www.**********/js/skel.min.js"></script>
<script src="http://www.**********/js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="http://www.*********/css/skel-noscript.css" />
<link rel="stylesheet" href="http://www.*********/css/style.css" />
<link rel="stylesheet" href="http://www.*********/css/style-desktop.css" />
</noscript>
If I bypass the noscript the webpage appears as it should but loses ALL mobile and flowable capabilites.
Any ideas would be much appreciated!
Addon: If I move my pages to the root directory and update the links then the CSS works but in their child directories only the basic layout works.
<?php
define(currentDIR,'../');
include (currentDIR.'includes/_functions.php');
?>
<html>
<head>
<?php include(currentDIR.'includes/_metalinks.php'); ?> //This is where the code above is stored
</head>
I'm new to the skel.js framework and I'm having some issues.
I downloaded a template from HTML5UP (Zerofour theme) and I have modified it all for my site however the CSS doesn't show up properly on my no-sidebar & left-sidebar pages.
I have an include with the follwing links (identical to their templates):
<link href="http://fonts.googleapis./css?family=Open+Sans:400,300,700,800" rel="stylesheet" type="text/css" />
<script src="http://www.**********./js/jquery.min.js"></script>
<script src="http://www.**********./js/jquery.dropotron.js"></script>
<script src="http://www.**********./js/config.js"></script>
<script src="http://www.**********./js/skel.min.js"></script>
<script src="http://www.**********./js/skel-panels.min.js"></script>
<noscript>
<link rel="stylesheet" href="http://www.*********./css/skel-noscript.css" />
<link rel="stylesheet" href="http://www.*********./css/style.css" />
<link rel="stylesheet" href="http://www.*********./css/style-desktop.css" />
</noscript>
If I bypass the noscript the webpage appears as it should but loses ALL mobile and flowable capabilites.
Any ideas would be much appreciated!
Addon: If I move my pages to the root directory and update the links then the CSS works but in their child directories only the basic layout works.
<?php
define(currentDIR,'../');
include (currentDIR.'includes/_functions.php');
?>
<html>
<head>
<?php include(currentDIR.'includes/_metalinks.php'); ?> //This is where the code above is stored
</head>
3 Answers
Reset to default 11I also came across this issue while using an HTML5up template with Django. If you are using a different directory configuration for your static files, you must specify this in either the init.js or config.js file (the exact file depends on which template you are using and how recently it has been updated). For me, I had to modify the following skelJS prefix in the init.js file:
var helios_settings = {
// other settings here
skelJS: {prefix: '/static/css/style',
// other settings here
}
Basically, this directory prefix needs to match wherever you have your static files.
I think you forgot to add
<link rel="stylesheet" href="css/style-noscript.css" />
I ran into the same issue and was able to fix it by modifying the config.js file to use the absolute path as follows:
prefix: '/css/style',
Now files in both the root and other directories maintain the styling throughout.