Im writing something to welcome.blade.php and want to use css to change the background but it doesnt works.(my css file is in the public folder)here is my blade.php codes;
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" > <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Laravel</title>
</head>
<body>
<p>adddd</p>
</body>
</html>
and my css codes;
body{
background-color: blue;
}
Your file structure should like this.
Please check your css file is in public directory or not. If your app.css is inside public/css folder then you need to import as like you already imported in blade file.
Your welcome.blade.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" >
</head>
<body>
<p>adddd</p>
</body>
</html>
And for css/app.css
check is there file exists or not in this path => public/css/app.css
if not exists then create a file with this directory structure public/css/app.css and put your css code inside this file.
body{
background-color: blue;
}
In laravel all common assets files like css, js, image, etc files should be in the public folder
Put your style.css file inside the public folder location like
your_project_folder/public/css/style.css
then add this line inside the head tag
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" >
All css files go in the public/css folder you can then add a blade link like so
<link rel="stylesheet" href="{{asset('css/style.css')}}">
all css files go in the resources/css folder you can then add a blade link like so
Related
Here is my index file in views.admin
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/admin/style.css">
<title>title</title>
</head>
And Here is my another file in views.admin
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/admin/style.css">
<title>title</title>
</head>
index file is working properly but another one is not using css
AND
my css file exists at 'public/css/admin/style.css'
Use this code to link your style or script in public folder
{{ asset('css/admin/style.css') }}
Don't put the public/ folder there, if its not working add this to your .env
ASSET_URL = public/
I'm trying to link a css file into this blade header.blade.php
It doesn't work, and nothing I've tried so far would work, except if i put the into the same file of the *.blade.php that I'm using.
:::layouts/header.blade.php:::
#section('header')
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="{{ asset('js/jquery.js') }}"></script>
</head>
<body>
#stop
////eof////
:::master.blade.php:::
#extends('layouts/header')
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Master
</div>
<div class="links">
About
Work
</div>
</div>
</div>
#yield('footer')
Make sure your css file is in your 'public' directory, ie: 'public/css/styles.css'
Then try:
<!-- Styles -->
<link href="{{ url('css/styles.css') }}" rel="stylesheet" type="text/css" />
Include this code in your header.blade.php
<link rel="stylesheet" href="{!! asset('css/styles.css') !!}" media="all" type="text/css">
The problem wasn't the asset or url link
it was #section('header') and #stop in the first file -- layouts/header.blade.php.
Because using extend doesn't yield the content, yet it extends the html page -- I must've removed those from the html (or php) file (that is).
Best regards.
One other question.. to append to the current answer:
I've noticed that using #extends appends the HTML instead of inserting at the point where the function is called.
How to prevent this and so the html from the calling file goes where it's supposed to go (at the function call)?
SOLUTION
use #include instead
jsbin demo of the error
http://jsbin.com/xurufa/2/edit?html,css,output
Line 4: ".testIcon" failed to #extend ".fa"
the .scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css";
.testIcon {
#extend .fa, .fa-camera-retro;
}
the html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Admin Site CSS">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<i class="testIcon"></i>
</body>
</html>
The .fa and .fa-camera-retro classes are being successfully imported, as you can verify by commenting out the #extend line and changing the html to:
<i class=".fa .fa-camera-retro"></i>
question
given that classes exist, i'd like to know what the #extend isn't working, and how I can make it work?
Download the file, change the extension to SCSS/SASS then import the same or you can also use scss files come the download
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I cannot load .css from a separate file.
For example if I have html:
<!DOCTYPE html>
<html>
<link href "style.css" rel="stylesheet" type = "text/css">
<head>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
The css does not load
however if I have css within the same html file the css loads properly. What am I doing wrong?
EDIT:
Changed HTML To code below as suggested by several people. Still has not effect. sytle.css is in the same directory as my source html.
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
css style sheet:
<style>
body
{
background-color:#b0c4de;
}
</style>
Your link tag is malformed and should be in the head (as opposed to the root of the document):
<link href "style.css" rel="stylesheet" type="text/css">
Should be (notice the href= correction):
<link href="style.css" rel="stylesheet" type="text/css">
try this
<link href="style.css" rel="stylesheet" type = "text/css">