Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am Creating Todo List using nodeJs but I am not able to link CSS file.
I have linked in CSS file in header.ejs and then included it in list.ejs file.
but still CSS file is not linked.
Here is the best way to go about it.
You need to create a public folder in your root app. Then you create a css folder as well, then you can now create any css file inside. So you should have something like this
public > css > file.css
So you move on to your app.js file and add this
const path = require('path');
const express = require('express');
app.use(express.static(path.join(__dirname, 'public')))
Once you've done all that, you can now add your css to any ejs file.
For example
<link rel="stylesheet" href="/css/main.css">
Related
I am running into the problem that I have a 'main layout' which gets extended by other pug files, defining the layout for specific sites.
Example:
main.pug
Path: /we [we.pug extends main.pug]
However, when I start to have routes like /we/are/nice/because which are just specifications of /we and I would like to use the same main.pug, I run into the problem that by the way NodeJS renders the pug files, the src/href paths of JS and CSS includes are off (eg: https://localhost:3001/we/are/nice/script.js won't be found because it is supposed to be at localhost:3001/script.js)
Is there a simple way to fix this issue, or do I need specific main.pug files for all path-depths ?
Have you tried pointing to absolute paths? So /script.js, instead of script.js, in an link/href attribute. This assumes, of course, that the files are served from a server like NodeJS (not by the filesystem).
This question already has answers here:
How to reference JSF image resource as CSS background image url
(2 answers)
Closed 6 years ago.
I have to add .xhtml in an url in css in order to have my image considered, else it's not found(no typo).
ex, this is found:
background-image: url(flags/flags-32.png.xhtml);
this is not found:
background-image: url(flags/flags-32.png);
my file is under resources/css/flags.
I've also a side question that is indirectly tied to this :
I've read somewhere that one shouldn't have extensions like .png.xhtml or .script.xhtml as it could impact negatively performances. I can't find the source of where I read that but I'd like to know why that is the case (maybe it's because of cache).
Try to add resource before your flag folder
url("#{resource['flags/flags-32.png']}");
when .xhtml is appended to the end of a file the url is :
javax.faces.resource/...
while if you want to access a .js file directly for example the url is :
resources/script/myscript.js
don't forget the s in resources.
You should try like this
background-image: url(../images/imageName.gif);
if your folder structure like this resources->images->imageName.gif.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have my custom css (all Compass/SASS based) added to the site from the Master page, rather than include the CSS in the site settings. While in Design View, my custom css, has overridden the items from DesignMode.css.
My master page is loading in my compiled CSS this way:
<link href="/CMSPages/GetResource.ashx?stylesheetfile=/KFF/SalesForce/main.css" type="text/css" rel="stylesheet" />
What is the best method to isolate my CSS from the designview.css?
Might want to take a look at this article
I think you can also do something like this in your master page:
{% ViewMode == "LiveSite" ? "StyleSheet Link": "" %}
I have made a Hexo blog. I can't however find out where to add the favicon. I have tried adding it to different folders but it isn't being found.
Does anyone know where it should be added or if there is anything else I need to update.
It depends on theme you're using, check theme documentation and source.
Some themes, like apollo are supports favicon config parameter (theme_config.favicon parameter in_config.yml).
If theme does not support a custom favicon, then just add file source/favicon.ico and it will be requested by browser automatically.
I use Landscape, the default theme at time of writing.
blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape\_config.yml
At the bottom of the file, you'll find a section titled Miscellaneous.
# Miscellaneous
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:
Windows can be directionally-challenged when it comes to slashes, so try the opposite direction if you use PC. This took some fudging on my part, and I was able to use an .ico file as well as a .png.
If you're still in need of a placeholder image, I've used Favicon.cc and had great results.
you can add the favicon.ico in the source floder, and add a line in the blog/_config.yml
favicon: favicon.ico
so, you know the source is the root path
I think all the other answers are so confused.
Now just three steps to add a favicon to your hexo-blog website, and I take next theme as example:
First, download your favorite imagename.ico image file from network or you make one by yourself.
Second, rename the imagename.ico file to favicon.ico, then move it to that folder: blog/themes/next(the theme folder you are using now)/source/images/.
Finally, modify the code in file blog/themes/next/_config.yml at that line to the same as below:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
Done!
Konstantin Pavlov is right.
for example, I use hexo-theme-next theme.
I change code in themes/next/_config.yml.
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
I put my favicon.ico in themes/next/source/images/favicon.ico
well Done.
Add this to the head part of the html code...
<head>
<title>Test Page</title>
<link rel="icon" type="image/png" href="http://www.w3.org/Icons/w3c_home">
</head>
For more on this have a look at the W3C site : How To FavIcon
It's also good to inspect the page source by looking at the console as it will report if there were any issue retrieving the icon.
Update:
I also posted this question to the Jade GitHub repository. I'm dropping it here too, for future (circular) reference:
https://github.com/jadejs/jade/issues/1943
Original post:
In a default node + express + jade application, I'm trying to build some common reusable components (menu, footer...) that I can include in some pages. I got stuck while trying to add references to .css or .js files from a block or an included file.
I want to do this because I don't want to include all the styles and scripts if I don't need them.
The folder structure is something like this:
Root
public
javascripts
main.js
menu.js
stylesheets
main.css
menu.css
views
shared
layout.jade
menu.jade
footer.jade
index.jade
The layout.jade file:
doctype html
html
head
title= title
link(rel="stylesheet", href="stylesheets/main.css")
script(src="javascripts/main.js")
body
block content
The index.jade file:
extends shared/layout
block content
h1= title
p Welcome to #{title}
In menu.jade there is some code that needs the menu.css and menu.js files.
Now I need a way to add those files to the <head> of the page only when I use the menu.jade file.
I started using Jade a few hours ago so it's very possible that I missed something in the documentation.
Thank you!
You could do this with jQuery in your menu.js like so:
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");
I would caution you about this practice however. One alternative would be to have a build step that concatenates all of your CSS files together and serves all of your style in a single css file. LESS and cssmin are good options here, and they have nice modules to automate this for you in grunt or gulp, whichever you're using.
You did mention that you didn't want to include all styles if you don't need them, but I would suggest that having a web browser download many small css files is going to be slower than having it download one big one, especially if you serve those files via a webserver like nginx that employs gzip, or if you serve your static files through a CDN like CloudFront.