Here is my structure within the root folder: css/fonts/ and books/book1.html
Within the css folder I have a stylesheet which has a link to the fonts folder like: src: url('/font/fontName.ttf');
In the books folder, I link the stylesheet through: <link rel="stylesheet" href="../css/stylesheet.css" type="text/css" charset="utf-8">
I have a:
body { color: red } in the stylesheet and all the color was effected as intended. However, for some reason the fonts were not loaded. When I moved the book1.html outside the books folder, and changed the stylesheet link to : <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8">
Can someone please help ?
If you change the following:
url('/font/fontName.ttf');
To:
url('/css/fonts/fontName.ttf');
It will work no matter where your css file is in the directory structure.
It's hard to fully understand your file/folder structure from your image, but does this work in your css?
src: url('./font/fontName.ttf');
(I added a dot before your forward slash)
Related
I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
I'm not sure how to link CSS to the HTML. Here's how I link currently:
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
But when I do so and save it, I don't see any changes, so I've resorted to using the <style> tag. I'm also using Sublime Text if that has anything to do with the issue:
<style type="text/css">
body {
background: green;
color: black;
background-color: red;
}
</style>`
Try an absolute path.
Change:
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
to
<link href="http://yourwebsite.com/styles/main.css" rel="stylesheet" type="text/css"/>
If that doesn't work please edit your question to include the contents of your main.css file as this may be a simple misunderstanding on how to write a stylesheet.
Happy coding.
<link href="styles/main.css" rel="stylesheet" type="text/css"/>
As written, your main.css file has to be in a subfolder called "styles", relative to your html document.
Here is the structure visualised:
If you had the main.css file in the same folder, you could change the link tag to be:
<link href="main.css" rel="stylesheet" type="text/css"/>
As others have stated it's likely that the path is wrong. Try appending that path to the url of the html page, minus the html file.
eg: http://www.mysite.me/index.html becomes http://www.mysite.me/styles/main.css
If the css file doesn't come up then your path is incorrect.
If your css file includes the <script> and </script> that is your issue. The CSS file should only include the style sheet text, and those tags are for entering a style sheet inside the HTML and not using a link as you seem to want to do (props to you ;))
The content of your main.css file should look exactly like:
body {
color: black;
background-color: red;
}
If you are using Chrome, press CTRL + U and right click the main.css and open it in a new tab. If the file can't be displayed, the path is probably wrong
I've placed a style sheet style.css inside the /assets/styles-folder and embedded it via <link rel="stylesheet" href="style.css" type="text/css"> in my something.ejs file.
But the stylesheet is not loading. Has anyone an idea?
Use the following to give the correct location of style sheet:
<link rel="stylesheet" href="../../assets/styles/style.css" type="text/css">
The first .. will take it to views folder, the next .. will take it to parent folder Employees, now you can give the path to your stylesheet.
This is because the path must always be relative to current .ejs or some other current file's location in the directory.
I'm new to .NET and am trying to transfer some HTML into a ASPX page. I'm building a theme and have a CSS file at the root of theme folder. The images folder is at the root of the theme and the image I want is in that folder. In my web.config, I specified the theme to use. The page is pulling some of the theme, but not the images. In the original HTML, the path to the image was:
url(../images/image.png)
I found this article that said the path should be:
url(images/image.png)
But that doesn't work either. Can someone help? Thanks.
The folder structure is this:
theme
--style.css
--images/
----image.png
From your CSS file, the path should be (I have tested this and it works):
url('images/image.png');
Your HTML/ASPX/Master page head section:
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="style.css" type="text/css">
</head>
Example CSS file:
body
{
background-image: url('images/image.jpg');
}
I'm having some problems using CSS in Play Framework 2.0.3, and was wondering if anyone could spot the mistakes I am making.
I have a view called siteview.scala.html, defined as:
#(name: String, records: List[Record])
#import helper._
#main(name) {
<html>
<head>
<link rel="stylesheet" type="text/css" href="#routes.Assets.at("stylesheets/main.css")">
</head>
<h1>#name</h1>
<ul>
...
</ul>
</html>
}
I have a CSS file defined as main.less in app/assets/stylesheets which looks like:
h1 {color:#F6F9ED;}
#font-face {
font-family: Gentium;
src: url(fonts/GenBasR.ttf);
}
font-family: Gentium, Arial, Georgia;
Apologies for the terrible style, I kept changing to try and make it do something! The route to the assets has been left as the default.
Play definitely compiles the CSS; if there is a syntax error, it is spotted. However, the CSS is just not being loaded into the HTML.
I tried copying the CSS file right into the public folder, but that gave me a duplicate file error from the compiler, which probably indicates the file is being put in the right place.
How do I make the HTML display with styling? I have a feeling I am missing something quite obvious, but am quite new to web development so I'm quite out of ideas.
I think that default approach can be confusing for both: developer and Play, so I'd suggest renaming the folder app/assets/stylesheets to app/assets/less (or something else, in general make sure, you haven't the folder with the same name in /public). Thanks to this you can be always sure that you're using LESS or static asset, as you just can see the difference in paths:
<!-- resolves to '/public/less/main.css' or (main.min.css)
from app/assets/less folder -->
<link rel="stylesheet" type="text/css"
href='#routes.Assets.at("less/main.min.css")'>
<!-- resolves to '/public/stylesheets/main.css' from 'public/stylesheets' folder -->
<link rel="stylesheet" type="text/css"
href='#routes.Assets.at("stylesheets/main.css")'>
route stays untouched:
GET /public/*file controllers.Assets.at(path="/public", file)
The solution provided by #biesor didn't work for me. I've added this line in routes file:
GET /stylesheets/*file #controllers.Assets.at(path="/public/stylesheets", file)
Then I've included the css file in my html page in this way:
<link rel="stylesheet" media="screen" href="/stylesheets/core.css">
I think that this isn't the best way to include a css file but I cannot find another solution.