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>

emilyemorehouse · Accepted Answer · 2013-10-22 19:13:50Z

11

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.

answered Oct 22, 2013 at 19:13

emilyemorehouse

1713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anto0522 · Accepted Answer · 2013-10-22 14:43:06Z

0

I think you forgot to add

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

answered Oct 22, 2013 at 14:43

anto0522

6729 silver badges32 bronze badges

4 Comments

eklassen Over a year ago

There is no such file in the template. However, there is the skel-noscript.css linked in the noscript.

anto0522 Over a year ago

Could you post the parts of the css that you have modified ?

eklassen Over a year ago

See edit. It's not an issue with the CSS itself but the structure or linking to it. ...I think

eklassen Over a year ago

SOLVED! I changed the prefix in the config.js ...will post answer when StackOverflow allows (low rep).

Sina · Accepted Answer · 2016-07-26 23:19:56Z

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, 2016 at 23:19

Sina

3895 silver badges9 bronze badges

Collectives™ on Stack Overflow

skel.js Framework / HTML5UP Template CSS issues

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related