I've been trying to figure out why my ejs isn't including my css.
I've set up my header.ejs etc; but it isn't loading the css.
Please note that the header.ejs is indeed being included inside my index.ejs.
The only problem is that the stylesheets aren't being loaded.
I do realize that you need to tell ejs what you want to be loaded which I did. The directory is definitely correct. I used readdir to check whether the directory was outputting the contents of the folder which it did.
I'm wondering is it because it isn't under a static folder like public/css if that is the case how would I be able to change that?
server.js
app.use(express.static(__dirname + '/client/vanity/public/assets/css'));
header.ejs
<link rel="stylesheet" href="/../assets/css/normalize.css/">
<link rel="stylesheet" href="/../assets/css/skeleton.css/">
index.ejs
<% include views/header %>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>basic template</a>.</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
If you were to serve your static files as such:
app.use(express.static(__dirname + '/client/vanity/public/assets/css'));
then, when the files are referenced, the path starts with /client/vanity/public/assets/css.
This means that you would reference a css file as the following (suggesting your css files are in the /css folder):
<link rel="stylesheet" href="/normalize.css">
Full path: /client/vanity/public/assets/css + /normalize.css.
Related
dears,
i've followed these steps :
1) Download Bootstrap from http://getbootstrap.com/
2)Create a dynamic web project in eclipse.
3)Make sure that this dynamic web project could be run on the server.
4)Under WebContent folder, create a bootstrap folder.
5)Import files such as following from downloaded Bootstrap
resources into the newly created folder, “bootstrap” in step 3. css
folder consisting of bootstrap.min.css js consisting of
bootstrap.min.js img consisting of images Create an index.jsp and put
following within tag
But my html doesn't seem to see the css, i even wrote this line as a test but nothing appears
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
this is the whole index.html page:
<!DOCTYPE html>
<html>
<head>
<link href=”bootstrap/bootstrap.min.css” rel=”stylesheet” type=”text/css” />
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="alert alert-info">
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
</body>
</html>
Try to change your css link declaration to
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
It has symbols with unsupported encoding.
I am trying to set background property in my file but the image is not loading
html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href=".\css\recipe.css">
</head>
<body>
<div class="container">
<div class="div1">
<div class="div1a"></div>
<div class="div1b"></div>
</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
css code:
.div1b{
border-style:solid;
height:28em;
width:71em;
background: url('C:\Users\Lakha\Documents\My Web Sites\Food
website\img\banner.jpg');
}
I tried the following steps:
--> Checked the image is in the correct folder.
--> Tried using double quotes instead of single quotes
If the image is on your site, wich seems the case, you have to provide a relative url for it, not an absolute one, because your hard drive isn't accessible from internet (thank's god...). The url is formatted with / characters to separate folders, and no \ like in Windows.
So the url will be something like this:
url(img/banner.jpg)
assuming that the "Food website" folder is the root of your site and the css is directly in it.
You have to check your css file path in href="correct css file path".
<link rel="stylesheet" type="text/css" href="../css/recipe.css">
you may got it wrong.
Don't use an absolute path. Try using a location relative to the location of the css file. like this:
background: url('..\img\banner.jpg');
you can insert an image into your web folder
.div1b{
border-style:solid;
height:28em;
width:71em;
background: url('../img/banner.jpg');
}
I've been experiencing some problems trying to create columns for Rails using bootstrap. I installed bootstrap with "Integrating Rails and Bootstrap, Part 1 - the Installation". This is what I have so far:
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: LightSteelBlue" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
In the code, I am trying to create two columns stacked horizontally so I can use them as titles for the following rows. However, when I run the code I get:
I tried "Columns in bootstrap 3.0 only stacking vertically" but I still could not get it to work.
I am using Rails 5.0.1 with Bootstrap 3.3.7 and Ruby 2.2.6.
Edit - 02-16-17 - 5:00 PM
Moved the header into the correct place. Tried changing the "href="bootstrap.css" to "href="stylesheets/bootstrap.css" but RubyMine complained about that. Ignoring the complaint, the result was still the same. Followed the tutorial that #Fabrizio linked to and I still could not get it to work. With #Fabrizio's code, by replacing my link code with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
I do get the result I want but from what I understand, if that website goes down, I lose access to the bootstrap.css
This is what I have for my "application.css.sass" file:
#import "bootstrap-sprockets"
#import "bootstrap"
Edit - 02/18/17
Turns out I was having issues with coffee script and by adding "gem 'coffee-script-source', '1.8.0'" and then running bundle install, I was able to import bootstrap through the use of the sass gem and the application.html.erb file. Thank you for all the help.
I am not sure that you can load css files with Ruby on Rails without following the Asset Pipeline, basically you will have an application.css file inside app/assets/stylesheets, the html file should have this manifest file in the head tag with the following syntax
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>instead of
<link rel="stylesheet" type="text/css" href="path to your css file" />
The manifest file application.css will include link to all the css files with the following syntax:
#import "bootstrap-sprockets";
#import "bootstrap";
Additionally with Rails you can include Bootstrap with a gem, it is called bootstrap-sass and you can follow the instructions at https://github.com/twbs/bootstrap-sass
Just include the gem as by the instructions in your Gemfile, run bundle install and then include it in your application.css..
Hear your can read about the asset pipeline.
http://guides.rubyonrails.org/asset_pipeline.html
I included your css in my text editor and this is the result I get, two vertical columns, for me a red and blue column. I think this is the result you would like to reach with a col-md-6?
This is the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
<p>Test</p>
</div>
<div id="A_Time_Spent" class="col-md-6" style="background-color: red" >
<p>Test2</p>
</div>
</div>
</div>
</body>
</html>
Everything seem good, if nothing works out, try creating new file
custom.scss in app/assets/stylesheets
and move the contents from application.css to custom.scss.
Also check the css selectors you used don't override any styles.
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css
CSS is now working fine for the webpages in bin folder but Top header not appearing. The header file named inner_header_new.html is called on every page using a script like this:
# script should come here
This is working fine with the pages on root but not for webpages in bin folder. This header is located at the root of FTP:
<body>
<header>
<!-- header_main start -->
<div class="inner_header_main">
<!-- header_inner_main start -->
<!-- <div class="header_inner_main"> -->
<!-- header_top start -->
<div id="inner_headerinclude"></div>
<script>$('#inner_headerinclude').load('inner_header_new.html');</script>
Since you dodn't post any code, we'll have to guess.
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="/style.css" />
Compare the two lines and check your own code.
Maybe you need this slash.
If you request a nonexistent page Apache pulls up the 404 error page. However, apache does not redirect you to the 404 error page. Instead it pulls it up as though that was the page you were requesting. Since your stylesheet works at the root but not anywhere else, I can only presume that you used relative reference to your stylesheet instead of absolute.
Absolute referencing:
<link rel="stylesheet" ref="http://www.website.com/style.css" />
<link rel="stylesheet" href="/style.css" />
Or better yet:
<style type="text/css">
#import url("/stylesheet.css");
</style>
Try it out.
--
FYI - It is recommended to always use absolute referencing for your stylesheets. If you ever need to move the file to a different directory it won't break.