I am beginner in ejs and Nodejs.I have Nodejs file.whenever localhost hits the get request.I 'm redirecting this index.ejs file.I 'm getting the data in the browser.but css not loaded what's the problem in this code.I have attached the sample code...Can anyone give me the solution.Thanks in advance...
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link ref="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron text-center">
<h1>User Authentication with Passport,Express4 and MongoDB </h1>
<h3>Login or Register with...</h3>
Login
Register
</div>
</div>
</body>
</html>
I have used:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
It's working fine...
use rel="stylesheet" instead of ref="stylesheet"
Related
In my asp.net mvc web application I have a razor layout page with a partial view #Html.Partial("_HorizontalNavbar") in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="#Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body class="k-content">
#Html.Partial("_HorizontalNavbar")
<main>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</main>
</body>
</html>
For the partial view I do not need all the css that is referenced in the layout page; actually it interferes with the css that is inside the partial view.
Is there a way to setup a partial view so that it is not affected by the css of the layout page?
Any help will be gratefully appreciated.
I want to access .css file in FTL for generating PDF but I not able to see the effect in PDF.
I tried both ways
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
and
<link rel="stylesheet" href="/font/fonts.css"/>
<link rel="stylesheet" href="/stylesheets/global.css"/>
My folder location is, and Currently, I am using Liferay DXP
META-INF/resources/font/fonts.css
META-INF/resources/stylesheets/global.css
code is below
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="key, words"/>
<meta name="description" content="Website description"/>
<meta name="robots" content="noindex, nofollow"/>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1"/>
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
</head>
<body>
<section id="wrapper">
<section id="mainCntr">
<article class="objectBox">
<div class="logo">
<img src=""/>
</div>
<div class="text">
<h2>Objects in <br/> this document <br/> are simpler <br/> than they seem.</h2>
</div>
</article>
</section>
</section>
</body>
</html>
Can anybody tell me the right approach to get effect fonts.css and global.css in FTL to generate PDF?
Finally, we applied inline CSS for whole pdf file code on each and every lines as per our requirements.
Remove below to lines from the pdf file code.
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!
I am trying to load search glyphicon with the following:
<div tabindex="6" class="glyphicon glyphicon-search">...<.div>
But, glyphicon loading as the following:
What is the solution?
background-color:none transparent}#font-face{font-family:'Glyphicons Halflings';src:url(/css/fonts/glyphicons-halflings-regular.eot);src:url(/css/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(/css/fonts/glyphicons-halflings-regular.woff) format('woff'),url(/css/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(/css/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular)
Check this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>
<body>
<div tabindex="6">
<span class="glyphicon glyphicon-search"></span>
<div>
</body>
</html>
Here is Bootstrap3.2.0 downloaded from Bootstrap site
Unpack and run below code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="bootstrap3.2.0/css/bootstrap.min.css">
</head>
<body>
<div tabindex="6">
<span class="glyphicon glyphicon-search"></span>
<div>
</body>
</html>
Worked as like as BS3.5
Though a late answer, for someone who has this issue:
Using Bootstrap's CDN in the tag solved this issue for me.
I'm kind of new to Foundation and I'm trying to create a top bar, but my code does not create the top bar for me. Can you help??? I've reviewed the documentation for the top bar, but I'm still stuck.
Thank you in advance.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<!--<div class="row">
<div class="meduim-6 columns"><img src="http://placehold.it/300x100"></div>
</div>-->
<div class="contain-to-grid sticky">
<nav class="top-bar" >
</nav>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation({
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});
</script>
</body>
</html>
Thank you in advance.
Your app.css and app.js are missing
<head>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!-- Custom Modernizr -->
<script src="javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<!-- jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- JS Files-->
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
</body>