My CSS file won't load in.
I've tried it with style tags but I don't like that
<link rel="stylesheet" href="style/scss">
<link rel="stylesheet" type="text/css" href="{{ url('style/scss.css') }}">
<link rel="stylesheet" type="text/css" href="path/to/file.css">
Related
I don't know why, this isn't my first project in laravel but my css isn't working and I can't find any problem in my code, maybe i'm tired or something but this kept me stuck for about 10hours.
It seems that my CSS isn't working, why? I dont know, I have all my folders in the public folder and my website it's not looking at all like the template.
<link href="{{ asset ('animate.css/animate.css') }}'" rel="stylesheet" type="text/css" />
<link href="{{ asset ('fontawesome/css/all.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset ('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700') }}" rel="stylesheet" />
<link href="{{ asset ('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900') }}" rel="stylesheet" />
<link href="{{ asset ('chosen/chosen.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset ('jquery-ui-custom/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset ('pentix/css/pentix.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset ('css/pex-theme.css') }}" rel="stylesheet" type="text/css">
I don't see any error in the terminal neither when I use CTRL + U, all the CSS links are oppening.
My suggestion
<link href="{{ asset ('animate.css/animate.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset ('fontawesome/css/all.css') }}" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900" rel="stylesheet" />
<link href="{{ asset ('chosen/chosen.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset ('jquery-ui-custom/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset ('pentix/css/pentix.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset ('css/pex-theme.css') }}" rel="stylesheet" type="text/css">
You have extra ' in your first asset css here
mate.css') }}'"
If any js or css doesn't working simply try by checking on url like
http://localhost:8000/animate.css/animate.css
and use php artisan serv to run laravel application
the correct syntax to link scrripts and css in laravel is:
link rel="stylesheet" href="{{asset('new_assets/assets/css/style.css')}}"
i have used this in my laravel project my css file are in the "new_assets/assets/css/style.css".
the first "asset" word within two opening courly braces it points to the laravel/public folder.make sure when you are using {{asset('some path')}} then that css or file/folder is in the public folder.
Use the below code:
<link href="{{asset('animate.css/animate.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('fontawesome/css/all.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700')}}" rel="stylesheet" type="text/css">
<link href="{{asset('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900')}}" rel="stylesheet" type="text/css">
<link href="{{asset('chosen/chosen.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('jquery-ui-custom/jquery-ui.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('pentix/css/pentix.css')}}" rel="stylesheet" type="text/css">
<link href="{{asset('css/pex-theme.css')}}" rel="stylesheet" type="text/css">
<link href="{{ public_path ('animate.css/animate.css') }}'" rel="stylesheet" type="text/css" />
<link href="{{ public_path ('fontawesome/css/all.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ public_path ('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700') }}" rel="stylesheet" />
<link href="{{ public_path ('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,800,900') }}" rel="stylesheet" />
<link href="{{ public_path ('chosen/chosen.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ public_path ('jquery-ui-custom/jquery-ui.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ public_path ('pentix/css/pentix.css') }}" rel="stylesheet" type="text/css">
<link href="{{ public_path ('css/pex-theme.css') }}" rel="stylesheet" type="text/css">
My static website has broken css and possibly js over https only. http works fine.
I know the issues of loading mixed content, however most of my style sheets are relative.
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/font-awesome/css/fontawesome-all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,500,600">
What could be the issue?
I am making a login screen, and trying to attach css to my file, but the CSS is not being loaded, as in no request is made, no errors are thrown, the link tag is ignored
<!doctype html>
<html>
<head>
<!-- This doesn't work -->
<link rel="stylesheet" src="/static/css/skeleton.css"/>
<link rel="stylesheet" src="/static/css/normalize.css"/>
<link rel="stylesheet" src="/static/css/main.css"/>
<script src="/static/js/login.js"></script>
</head>
<body>
<h1>Login</h1>
<form>
<input id="email" type="email" placeholder="Email">
<input id="password" type="password" placeholder="Password">
<button type="button" onclick="loginClick()">Login</button>
</form>
<p id="errorMessage"></p>
</body>
</html>
I am running a web server that handles redirection by itself, but here is my hierarchy
The link tag uses href instead of src, all you need is to substitute the attribute name.
Before:
<link rel="stylesheet" src="/static/css/skeleton.css"/>
<link rel="stylesheet" src="/static/css/normalize.css"/>
<link rel="stylesheet" src="/static/css/main.css"/>
After:
<link rel="stylesheet" href="/static/css/skeleton.css"/>
<link rel="stylesheet" href="/static/css/normalize.css"/>
<link rel="stylesheet" href="/static/css/main.css"/>
All you need to do here is replace
<link rel="stylesheet" src="/static/css/skeleton.css"/>
<link rel="stylesheet" src="/static/css/normalize.css"/>
<link rel="stylesheet" src="/static/css/main.css"/>
With this code :
<link rel="stylesheet" href="/static/css/skeleton.css"/>
<link rel="stylesheet" href="/static/css/normalize.css"/>
<link rel="stylesheet" href="/static/css/main.css"/>
you cannot use src for including files to your HTML in header. you need to replace all the src with href. Also consider following standards and adding the type type="text/css"
in the end you should have this;
<link rel="stylesheet" type="text/css" href="/static/css/skeleton.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
I have the following head section,
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
and my styles -- from both Bootstrap and my local stylesheet -- don't seem to be loading when I'm trying to test locally in the browsers. This happens in both Google Chrome and Firefox.
However, when I push to my Github Pages repository, the styles are applied and working.
Side note: some of the alignment styles seem to apply but none of the padding, colours etc.
Try to load just your CSS inside the <head> tag:
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
After, go to the final of the <body> tag and paste the other dependencies left:
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
It will improve your system because starting with the CSS, i will not stop reading any script while loading your page.
Edit:
If still not working, try to remove:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Can be a problem with external links instead.
This part of code seems to be the problem:
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/stylesheet.css">
Seemingly the file structure you are using locally differs from the file structure you are using on your remote repo. stylesheets.css is in the root folder in your remote repo, but it is not there in your local environment. Probably your page and stylesheets.css are in the same folder in both occurrences but the difference between the two cases is that they are in root in one case and not in root in the other case.
I can't find the problem, my favicon is not working.
HTML
<head>
<title>SuomiFTB</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/text.css">
<link rel="shortcut icon" href="http://suomiservut.arkku.net/Finland-icon.ico">
</head>