Friday 5 May 2017

CSS In Handlebars Layout Does Not Apply to Body

I am using express-handlebars in my node.js project. I have included CSS and JS files in the <head> section of my handlebars layout. The problem is, the CSS only gets applied to the <head> part of the code and NOT to the <body>. If I link the CSS within the body tags of the layout file, it still doesn't work. The only way I can get it to come out right is if I link the CSS in each "body" file that gets inserted into the layout. I am using bootstrap if that matters.

I'm somewhat new to using handlebars but I can't find anything like this online, so hopefully someone here knows what the issue is.

Here is my layout.handlebars file:

<!doctype html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/main.css"/>

    <title>Website</title>
</head>

<body>

    <div className="navbar navbar-default">
        <div className="container-fluid">
            <div className="navbar-header">
                <button type="button" className="navbar-toggle" 
                    data-toggle="collapse" data-target="#my-navbar">
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>  
                </button>
                <a className="navbar-brand" href="/"> Home </a>
            </div>
            <div id="my-navbar" className="collapse navbar-collapse">
                <ul className="nav navbar-nav" role="tablist">
                        <li> <a href="messenger"> Messenger </a> </li>
                        <li> <a href="contact"> Contact </a> </li>
                </ul>
                <ul className="nav navbar-nav navbar-right" role="tablist">
                        <li > <a href="login"> Login </a> </li>
                        <li > <a href="register"> Register </a> </li>
                </ul>
            </div>
        </div>
    </div>

    }

</body>
</html>

And here is the "body" handlebars file:

<div className="container-fluid welcome-msg">
    <p>
        Welcome.
    </p>
</div>

Basically, what I want is to link the CSS files in the layout and have it applied to ALL the content. I do know the CSS is loaded because it is changing the font and background color, so its not a problem with the path. Thanks in advanced.

If you need me to explain this better please let me know.



via drewpel

No comments:

Post a Comment