I put my css in the public folder and linked to it in my template, but the css won't work. When I run the file out of Laravel using HTML index, it works fine. But, when I put it in Laravel it won't see the css.
This is my code in the template:
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
Do I need to add anything to make it blade/laravel specific?
use asset like this:
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/media.css')}}">
read this for more info!
Turns out, it was a browser issue. All of my css and links were correct and the files were in the correct location. It worked in Safari, but not in Firefox. I had to correct a few things on my preferences in Firefox.
can you confirm the CSS files are not reached by the browser ?
If not, maybe the css folder is not in your public folder :
public/css/style.css
This way it should works fine.
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 made an external style sheet, uploaded it to godaddy, and gave my main page the link
<link rel="stylesheet" type="text/css" href="myStyle.css">
and it worked, but not on Firefox (it did work on all other browsers I tried). Then I tried to link my other pages to the style sheet and it did not work for them (copied and pasted the link tag above, but when that didn't work I tried doing
<link rel="stylesheet" type="text/css" href="/public_html/myStyle.css">
which is the full file directory to the style sheet, and that didn't work either. Note: When I just opened the other pages on a browser, (without uploading to godaddy) the external style sheet worked in all of my pages.
This is the first time I'm trying this, so might be making an obvious mistake. Thanks in advance.
Hello there ladies and gentlemen.
I've got quite the puzzler going on. I have just installed a fresh instance of Laravel (5.1) on a Vagrant (1.7.4) machine in Windows (10). The weird thing is that I'm linking both the external stylesheet and javascript the same way:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheets" type="text/css">
<script src="{!! URL::asset('js/all.js') !!}" type="text/javascript"></script>
The problem is that the styles are not being applied (cross-browser) to the elements. I'm not getting any errors in the console. When I look at the head of the document I can see that it's the right path:
<link href="http://laravel.dev/css/app.css" rel="stylesheets" type="text/css">
<script src="http://laravel.dev/js/all.js" type="text/javascript"></script>
I have a standard Laravel file structure with the CSS and JS folders inside the public folder. If I look at the sources tab inside Chrome developer tools, I can see that the JavaScript file is being loaded but there is no sign of the CSS file. But if I right-click on the link for the CSS file, and open link in new tab, I can see the CSS. I have tried explicitly changing the character encoding type to UTF-8 both as an attribute in the link tag as well as the first line of the css itself with the #charset 'at rule'. Here are some illustrations:
Thanks for your help.
In your css-link you have rel="stylesheets" (plural). It should be rel="stylesheet" (singular) :)
Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.
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.