I trying to import 2 css files as follows:
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/bootstrap.css">
And for some reson its doesnt working, What would be the problem?
The order of loading css really matters, I think the bootstrap.css file has some class or id which has the same id as you have in general.css. The last css file will cover the previous one.
Correct! The order of loading css really matters. Please check the order you are loading and could you please post your exact issue? Like which part are you not able to get in your html page? #user11001
Related
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.
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
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.
When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.
I have a standard header file which is included on all of the site's pages.
Example below:
<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.
Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.
The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.
This is a simple demo that shows that your example works.
Solution:
In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>
should be
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />
You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.
Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.
You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.
You wouldn't be the first developer to be brought down by an unintentional typo!