skel.js Framework / HTML5UP Template CSS issues

Question

I'm new to the skel.js framework and I'm having some issues.

I downloaded a template from HTML5UP.net (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.com/css?family=Open+Sans:400,300,700,800"         rel="stylesheet" type="text/css" />

    <script src="http://www.**********.com/js/jquery.min.js"></script>
    <script src="http://www.**********.com/js/jquery.dropotron.js"></script>
    <script src="http://www.**********.com/js/config.js"></script>
    <script src="http://www.**********.com/js/skel.min.js"></script>
    <script src="http://www.**********.com/js/skel-panels.min.js"></script>

    <noscript>
        <link rel="stylesheet" href="http://www.*********.com/css/skel-noscript.css" />
        <link rel="stylesheet" href="http://www.*********.com/css/style.css" />
        <link rel="stylesheet" href="http://www.*********.com/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>

score 11 · Accepted Answer · answered Oct 22 '13 at 19:13

I 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.

score 0 · Answer 2 · answered Oct 22 '13 at 14:43

0

I think you forgot to add

        <link rel="stylesheet" href="css/style-noscript.css" />

answered Oct 22 '13 at 14:43

anto0522

662
9
31

There is no such file in the template. However, there is the skel-noscript.css linked in the noscript. – eklassen Oct 22 '13 at 14:53
Could you post the parts of the css that you have modified ? – anto0522 Oct 22 '13 at 15:03
See edit. It's not an issue with the CSS itself but the structure or linking to it. ...I think – eklassen Oct 22 '13 at 15:21
3

SOLVED! I changed the prefix in the config.js ...will post answer when StackOverflow allows (low rep). – eklassen Oct 22 '13 at 16:51

score 0 · Answer 3 · answered Jul 26 '16 at 23:19

0

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.

answered Jul 26 '16 at 23:19

Sina

359
4
9

skel.js Framework / HTML5UP Template CSS issues

3 Answers3

Linked