I tried almost every combination of relative and absolute paths to the CSS file using JavaScript successfully however Sinatra and ERB are more unique.
In the Sinatra script I have the public and stylesheet directories as conventionally done. In my views directory I have the view page with the external
<link href='/some_dir/some_css_file.css' type="text/css" rel="stylesheet" />
I attempted this many times and perhaps it's some nuanced thing I am missing.
How can I get my ERB view file to load the external CSS link?
Sinatra does not have URL helper methods like Rails. I tried moving the CSS file adjacent to the view file and different combinations of relative and absolute paths to the file, but none of them worked.
This code will show a 404 in the Shotgun server log:
ERB view:
<html>
<head>
<link href='../public/stylesheets/sent' type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="/sent.css" />
</head>
<body>
CSS file:
body {
background-color: lightblue;
color: #333;
font-family: Sans-Serif;
line-height: 18px;
}
h1 {
color: green;
}
p {
color: orange;
}
In the terminal while running Shotgun I get These types of errors:
127.0.0.1 - - [05/Nov/2019:23:24:47 -0800] "GET /sent.css HTTP/1.1" 404 509 0.0543
127.0.0.1 - - [05/Nov/2019:23:24:47 -0800] "GET /public/stylesheets/sent HTTP/1.1" 404 534 0.0617
Sinatra, by default, looks for CSS files in a directory called Public, you don't have to include the folder name "Public" on your link tag.
You can still use subfolders inside of the Public folder.
This should work in this case:
<link href='/stylesheets/sent/sent.css' type='text/css' rel='stylesheet' />
If you still want to change the location of the Public folder you can do it by changing the Sinatra configuration, look for this set :public_folder, Proc.new { File.join(root, "static") }
on the following link:
http://sinatrarb.com/configuration.html
body is not closed in your CSS:
body {
background-color: lightblue;
color: #333;
font-family: Sans-Serif;
line-height: 18px;
}
h1 {
color: green;
}
p {
color: orange;
}
For future users of Sinatra making custom MVC apps:
I fixed this problem by storing the public folder in the root dir. This is a convention in Sinatra MVC to keep CSS/JavaScript/pictures in the public directory at the root of the program.
I had it incorrectly nestled in the application directory. Once I moved it up and into the root directory, my relative path <link rel="stylesheet" href="/stylesheets/sent.css" /> worked.
Related
I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?
Bellow i put the code i have so far:
<head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 2em;
}
#bm {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Test Animation</h1>
<div id="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
// this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work
path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
});
</script>
</body>
I also have a link to my 'data.json' file:
https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing
Most likely you are getting a CORS error.
For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.
So through lottiefiles as you've done, or on your web hosting.
I'm using PhantomJS to turn an html page into PDF. This page uses fonts from cloud.typography.com. Now the html page itself is fine, and if I manually print it to a PDF, that too is fine. However, when I use PhantomJS to turn it to a PDF, the server fonts do not show up.
I researched this issue, and while I could find general issues involving fonts, I could find nothing on this specific case. The closest thing I could find was a bug in which PhantomJS would use the fallback font even if the primary one was available, but removing the fallback font didn't fix the issue for me.
Is this a known bug? Did I do something wrong? Do you know of any work-arounds?
Here's the (generic) html to PDF rendering script I'm using. I'm parametizing the page on the command line:
var page = require('webpage').create(),
args = require('system').args,
if ( args[2].split('.').pop() == 'pdf' ) {
page.viewportSize = { width:1920, height:1080 };
page.paperSize = {
width: '8.5in',
height: '11in',
};
}
page.open(args[1], render);
function render() {
page.render(args[2]);
phantom.exit();
}
Here's a relevant html snippet that points to the font server and the style sheet:
<link rel="stylesheet" type="text/css" href="print.css">
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/7787052/625786/css/fonts.css" />
And here's a relevant section from print.css that references the fonts:
body {
font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
font-weight: 400;
font-style: normal;
margin: 0;
padding: 0;
}
I have downloaded the Zurb Foundation icon fonts files http://zurb.com/playground/foundation-icon-fonts-3
I unzipped them and placed the /foundation-icons folder into my /css folder. Is this correct? I am trying to follow the documentation "How to use them" section and i can't figure out how to start using the classes.
I am doing this in my .html to call the classes.
<a class=".fi-social-facebook">Facebook</a>
so i assume i must of not configured/set up my file font properly.
Update: This is what my directory looks like... i am referencing it
and this is how I am calling the class.
<i class="ft-social-facebook"></i>Facebook
<i class="ft-star"></i>
Foundation icons use the <i> tags. So you would have something like <i class="fi-social-facebook"></i>Facebook.
In the zip that you downloaded, there is a preview.html file. Open it in your editor and look it over. It will make a little more sense.
Also, their CSS file doesn't include sizes. So when you use their examples to change the size (ex. <i class="fi-calendar size-24"></i>), nothing will change. In looking at their preview.html file, they had those sizes defined in the header. So I copied them out and put them in my CSS and solved the issue. Here they are if you want to use them:
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
Once you've downloaded the pack, you have to add to your <head> :
<link rel="stylesheet" href="css/foundation-icons.css" />
And be sure that the svgs folder inside your css folder, and the rest of files inside your css folder too.
When you finish this set up, try this on your html:
<i class="fi-star"></i>
It should print a star.
Quickest solution, no installation required:
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
Other versions available at https://cdnjs.com/libraries/foundicons
I installed via pip install django-zurb-foundation and was running into the same problem …/foundation/icons worked, but I couldn't reference them in my actual project. What wound up working for me is adding the following to my project's base.html
{% load foundation_tags %}
{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}
Which is effectively the same as ManelMusti's answer, but handled in the template using the same technique as the example in …/site_packages/foundation/templates/foundation/icons.html
The correct way is <i class="fi-star"></i> instead of <i class="ft-star"></i>
im working on node.js(express) with ejs and im not able to include a .css file to it.i tried the same thing seperately as a html-css duo and it worked fine...how can i include the same in my .ejs file. My app.js goes thus:
var express = require('express');
var app = express();
app.set('views', __dirname + '/views');
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/home', function(req, res){
res.render('index.ejs', {
title: 'My Site',
nav: ['Home','About','Contact']
});
});
app.get('/about', function(req, res){
res.render('about.ejs', {
title: 'About',
nav: ['Home','About','Contact']
});
});
app.get('/contact', function(req, res){
res.render('contact.ejs', {
title: 'Contact',
nav: ['Home','About','Contact']
});
});
app.listen(3000);
and the index.ejs file:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1> <%= title %> </h1>
<ul>
<% for (var i=0; i<nav.length;i++) {%>
<li> <%=nav[i]%> </li>
<% } %>
</ul>
</div>
<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>
style.css file:
<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
p { margin-bottom :20px; margin-left: 20px;}
footer {text-decoration: overline; margin-top: 300px}
div { width:100%; background:#99CC00;position:static; top:0;left:0;}
.just
{
text-align: center;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;} /* mouse over link */
a:active {color:#0000FF;}
ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
Your problem is not actually specific to ejs.
2 things to note here
style.css is an external css file. So you dont need style tags inside that file. It should only contain the css.
In your express app, you have to mention the public directory from which you are serving the static files. Like css/js/image
it can be done by
app.use(express.static(__dirname + '/public'));
assuming you put the css files in public folder from in your app root.
now you have to refer to the css files in your tamplate files,
like
<link href="/css/style.css" rel="stylesheet" type="text/css">
Here i assume you have put the css file in css folder inside your public folder.
So folder structure would be
.
./app.js
./public
/css
/style.css
In order to serve up a static CSS file in express app (i.e. use a css style file to style ejs "templates" files in express app). Here are the simple 3 steps that need to happen:
Place your css file called "styles.css" in a folder called "assets" and the assets folder in a folder called "public". Thus the relative path to the css file should be "/public/assets/styles.css"
In the head of each of your ejs files you would simply call the css file (like you do in a regular html file) with a <link href=… /> as shown in the code below. Make sure you copy and paste the code below directly into your ejs file <head> section
<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />
In your server.js file, you need to use the app.use() middleware. Note that a middleware is nothing but a term that refers to those operations or code that is run between the request and the response operations. By putting a method in middleware, that method will automatically be called everytime between the request and response methods. To serve up static files (such as a css file) in the app.use() middleware there is already a function/method provided by express called express.static(). Lastly, you also need to specify a request route that the program will respond to and serve up the files from the static folder everytime the middleware is called. Since you will be placing the css files in your public folder. In the server.js file, make sure you have the following code:
// using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files
// app.use("/route", express.static("foldername"));
app.use('/public', express.static('public'));
After following these simple 3 steps, every time you res.render('ejsfile') in your app.get() methods you will automatically see the css styling being called. You can test by accessing your routes in the browser.
You can use this
var fs = require('fs');
var myCss = {
style : fs.readFileSync('./style.css','utf8');
};
app.get('/', function(req, res){
res.render('index.ejs', {
title: 'My Site',
myCss: myCss
});
});
put this on template
<%- myCss.style %>
just build style.css
<style>
body {
background-color: #D8D8D8;
color: #444;
}
</style>
I try this for some custom css. It works for me
As I see you are using EJS with express.js
Firstly, there is a better way to add EJS
app.set("view engine", "ejs");
and for that, your file structure should be like
.
./app.js
./view
/index.ejs
And for adding CSS to your EJS file, you have to use "public" folder (or any other name, name doesn't matter) from which you can serve static file like CSS, JS or images
For accessing that, you can use
app.use(express.static("public")); //better and newer way than first answer
and is your EJS file, you can link your CSS by
<link rel="stylesheet" href="css/style.css">
Here I am assuming that, you put your CSS file in your CSS folder inside public folder
So, your file structure will be like
.
./app.js
./public
/css
/style.css
./view
/index.ejs
I tried a different approach. I created an ejs file for my styles called styles.ejs and added all the css inside the tags like this.
<style>
body {
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
#container {
margin: 0 10%;
padding: 20px;
border: 10px solid #c8102e;
}
</style>
and I have includes this file inside head tag of my index.ejs like this.
<head>
<%- include('./css/styles'); %>
</head>
It worked well for me.
app.use(express.static(__dirname + '/public'));
<link href="/css/style.css" rel="stylesheet" type="text/css">
So folder structure should be:
.
./app.js
./public
/css
/style.css
I'm attempting to serve a CSS file through my url.py file so I can use template tags in my CSS.
Here's my code.
Base.html:
<head>
...
<link rel="stylesheet" type="text/css" href="/site_media/css/wideTitle.css" />
urls.py:
(r'^site_media/css/wideTitle.css','lightbearers.views.viewWideTitle'),
views.py:
def viewWideTitle(request):
contentListAbout = About.objects.filter(Q(startDate__lte=datetime.now())).order_by('-startDate')
if len(contentListAbout) > 0:
contentAbout = contentListAbout[0]
else:
contentAbout = None
...
return render_to_response('wideTitle.css', {'contentAbout':contentAbout, ...},
context_instance=RequestContext(request))
settings.py:
TEMPLATE_DIRS = (
os.path.join(PROJECT_PARENT, "templates"),
os.path.join(PROJECT_PARENT, "media/css"),
)
wideTitle.css (in /media/css):
#wideTitle{
clear:both;
height:180px;
padding-left:0px;
background: url({{ contentAbout.headerImage.url }}) no-repeat top left;
}
I can access the CSS file by entering its URL in my browser, but the Base.html isn't reading it at all. I think I've got everything decent; I've looked here and here for tips. Anyone have ideas?
Is the generated stylesheet being served with the correct mime type? If not, the browser might not interpret it as CSS.
I can’t remember if render_to_response accepts content_type='text/css as an argument, but there is a way to set it if Django isn’t already using the correct mime type.
Edit: as #TommasoBarbugli pointed out, you want the mimetype argument for render_to_response.
(Firefox’s Firebug add-on, or the Web Inspector in Chrome/Safari, should be able to show you the stylesheet’s mime type.)