I have css under App/resources/css by default
when I open Login and Register page css is not loading. This is default css and js link on my app.blade.php
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I did this
<link href="{{ URL::asset('assets/css/a.css') }}" rel="stylesheet">
and also tried
<script src="{{ asset('resources/js/app.js') }}" defer></script>
<link href="{{ asset('resources/css/app.css') }}" rel="stylesheet">
What shall I do to make it work.??
Move all your CSS and JavaScript to the public folder so that your structure becomes something like
public/
|--- css/
|---js/
Now to use your CSS and JavaScript from your new location do something like
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
This works because the asset() blade helper already looks from the public directory so you start your CSS and JavaScript URL construction from that point on
I would recommend to always use the mix helper in Blade like this
<script src="{{ mix('/js/app.js') }}"></script>
as it additionally properly takes care of versioned assets. Please make sure you either ran npm run dev or npm run prod (see Compiling assets) to generate the public/css/app.css and public/js/app.js files from the ones located in resources.
Im working on a barcode or qrcode generator and I have a problem, when I integrate my code and asset folders in PHP everything works perfectly fine I can generate the code ! , but when I integrate this to Laravel and put all the links it went down tho it is the similar UI but the output of the program is not working well it is not generating the code.
My folders are placed in public in laravel and main folder only in php
I am currently confused of this problem - when I delete all assets, codes of JS files in PHP, why is it STILL working tho I deleted all the folders like fonts , css and js however in Laravel when I delete the currently said folders, it brings CHANGES tho in PHP everything works and run even tho the codes are deleted and folders are delete. any solution for this?? im wondering is there a setting for this?
P.S I didnt change any single code of them and still confused why it is not working properly in laravel
Is there any possibility to solve this problem?
my links in laravel
CSS & BOOTSTRAP
link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
JS
<script type="text/javascript" src="{{ asset('/js/filereader.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/qrcodelib.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/webcodecamjs.js') }}"></script>
<script type="text/javascript">
links in PHP
CSS
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
JS
<script type="text/javascript" src="js/filereader.js"></script>
<script type="text/javascript" src="js/qrcodelib.js"></script>
<script type="text/javascript" src="js/webcodecamjs.js"></script>
change your CSS/JS Directory Structure in Public folder.
CSS:
<link href="{{ asset('filepath') }}" rel="stylesheet" type="text/css" >
JS:
<script type="text/javascript" src="{{ URL::asset('filepath') }}"></script>
For CSS:
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css" >
Make your directory structure is like this for CSS: /public/css/bootstrap.min.css and /public/css/style.css
For Javascript:
<script type="text/javascript" src="{{ URL::asset('js/filereader.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/qrcodelib.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/webcodecamjs.js') }}"></script>
Make your directory structure is like this for JS: /public/js/filereader.js and /public/js/qrcodelib.js and /public/js/webcodecamjs.js
I have a laravel project and just wanted to use a simple timer jquery script in it. I created a new folder in views, placed there my code. I also placed there another folder called flip_timer with jquery files.
My problem is that i cannot make the script paths work "not found http exception".
Folder structure looks like this: folder in views > contains file(code below) and folder including all the needed files. Whenever i try to run the link with code the page is empty, and when i click to see the source code and click on the css or js link it shows me the error i mentioned above...
<link rel="stylesheet" type="text/css" href="flip_timer/jquery.flipcountdown.css" />
<script type="text/javascript" src="flip_timer/jquery.min.js"></script>
<script type="text/javascript" src="flip_timer/jquery.flipcountdown.js"></script>
<div id="retroclockbox1">
<script>
jQuery(function($){
$('#retroclockbox1').flipcountdown();
})
</script>
</div>
put your jquery.flipcountdown.css file in inside css folder named: css/flip_timer/jquery.flipcountdown.css
AND
your both js file inside js folder named:js/flip_timer/jquery.min.js and js/flip_timer/jquery.flipcountdown.js and then put below code in your html file.
<link rel="stylesheet" href="{{ URL::asset('css/flip_timer/jquery.flipcountdown.css') }}" />
AND for js file
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/flip_timer/jquery.flipcountdown.js') }}"></script>
This is kind of a stupid question, and I've looked around for similar answers and found some, however they are a bit more specific than what I am asking.
Say I want to include a custom styles.css or scripts.js file, would I just create a css/js folder in resources/views folder, and then call to them in my blade.php files like I would normally do in an HTML file when not using Laravel?
Example: <link type="text/css" rel="stylesheet" href="css/styles.css">
Or is there a different approach to this in Laravel?
Put your css files into the public folder like public/css/styles.css
Use the asset() function to add css, javascript or images into your blade template.
For Style Sheets
<link href="{{ asset('css/styles.css') }}" rel="stylesheet" type="text/css" >
or
<link href="{{ URL::asset('css/styles.css') }}" rel="stylesheet" type="text/css" >
For Javascript
<script type="text/javascript" src="{{ asset('js/scripts.js') }}"></script>
or
<script type="text/javascript" src="{{ URL::asset('js/scripts.js') }}"></script>
You may also be interested to have a look at Laravel's Elixir to process your styles and javascript.
put your style.css file in inside css folder named: /css AND your js file inside js folder named: /jsput below code in your html file.
Your css files
<link rel="stylesheet" href="{{ URL::asset('css/yourstylesheet.css') }}" />
And js files
<script type="text/javascript" src="{{ URL::asset('js/jquery.min.js') }}"></script>
I've just began learning Laravel, and can do the basics of a controller and routing.
My OS is Mac OS X Lion, and it's on a MAMP server.
My code from routes.php:
Route::get('/', function() {
return View::make('home.index');
});
Route::get('businesses', function() {
return View::make('businesses.index');
});
Route::get('testing', function() {
return View::make('testing.index');
});
Route::get('hello', function() {
return "<h3>Hello world!</H3>";
});
That works, the views display perfectly, ''however'' what I want to try and do is include CSS within the views, I tried adding in a link to a stylesheet within the directory but the page displayed it as the default browser font even though the css was in the HTML!
This is index.php from businesses within the views folder:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<p>Business is a varied term. My content here.
I tried using the Blade template engine in my other views folder (testing) to display CSS but again the CSS did not show despite it being in the testing folder!
How can I overcome this problem, and get better - as I'm slowly learning this framework.
Put your assets in the public folder; e.g.:
public/css
public/images
public/fonts
public/js
And then, to access them using Laravel, use:
{{ HTML::script('js/scrollTo.js'); }}
{{ HTML::style('css/css.css'); }}
Or:
{{ URL::asset('js/scrollTo.js'); }}
{{ URL::asset('css/css.css'); }}
This syntax will automatically generate the correct path (e.g., `public/js/scrollTo.js').
your css file belongs into the public folder or a subfolder of it.
f.e if you put your css in
public/css/common.css
you would use
HTML::style('css/common.css');
In your blade view...
Or you could also use the Asset class http://laravel.com/docs/views/assets...
You can also write a simple link tag as you normaly would and then on the href attr use:
<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css">
of course you need to put your css file under public/css
We can do this by the following way.
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
{{ HTML::style('css/style.css', array('media' => 'print')) }}
It will search the style file in the public folder of Laravel and then will render it.
Like Ahmad Sharif mentioned, you can link stylesheet over http
<link href="{{ asset('/css/style.css') }}" rel="stylesheet">
but if you are using https then the request will be blocked and a mixed content error will come, to use it over https use secure_asset like
<link href="{{ secure_asset('/css/style.css') }}" rel="stylesheet">
https://laravel.com/docs/5.1/helpers#method-secure-asset
Since Laravel 5 the HTML class is not included by default anymore.
If you're using Form or HTML helpers, you will see an error stating class 'Form' not found or class 'Html' not found. The Form and HTML helpers have been deprecated in Laravel 5.0; however, there are community-driven replacements such as those maintained by the Laravel Collective.
You can make use of the following line to include your CSS or JS files:
<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">
You can simply put all the files in its specified folder in public like
public/css
public/js
public/images
Then just call the files as in normal html like
<link href="css/file.css" rel="stylesheet" type="text/css">
It works just fine in any version of Laravel
Update for laravel 5.4 ----
All answers have have used the HTML class for laravel but I guess it has been depreciated now in laravel 5.4, so
Put your css and js files in public->css/js
And reference them in your html using
<link href="css/css.common.css" rel="stylesheet" >
To my opinion the best option to route to css & js use the following code:
<link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}">
So if you have css file called main.css inside of css folder in public folder it should be the following:
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">
That is not possible bro, Laravel assumes everything is in public folder.
So my suggestion is:
Go to the public folder.
Create a folder, preferably named css.
Create the folder for the respective views to make things organized.
Put the respective css inside of those folders, that would be easier for you.
Or
If you really insist to put css inside of views folder, you could try creating Symlink (you're mac so it's ok, but for windows, this will only work for Vista, Server 2008 or greater) from your css folder directory to the public folder and you can use {{HTML::style('your_view_folder/myStyle.css')}} inside of your view files, here's a code for your convenience, in the code you posted, put these before the return View::make():
$css_file = 'myStyle.css';
$folder_name = 'your_view_folder';
$view_path = app_path() . '/views/' . $folder_name . '/' . $css_file;
$public_css_path = public_path() . '/' . $folder_name;
if(file_exists($public_css_path)) exec('rm -rf ' . $public_css_path);
exec('mkdir ' . $public_css_path);
exec('ln -s ' . $view_path .' ' . $public_css_path . '/' . $css_file);
If you really want to try doing your idea, try this:
<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">
But it won't work even if the file directory is correct because Laravel won't do that for security purposes, Laravel loves you that much.
put your css File in public folder . (public/css/bootstrap-responsive.css)
and <link href="./css/bootstrap-responsive.css" rel="stylesheet">
Copy the css or js file that you want to include, to public folder or you may want to store those in public/css or public/js folders.
Eg. you are using style.css file from css folder in public directory then you can use
<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>
But in Laravel 5.2 you will have to use
<link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/>
and if you want to include javascript files from public/js folder, it's fairly simple too
<script src="{{ url() }}./js/jquery.min.js"></script>
and in Laravel 5.2 you wll have to use
<script src="{{ url('/') }}./js/jquery.min.js"></script>
the function url() is a laravel helper function which will generate fully qualified URL to given path.
Put them in public folder and call it in the view with something like href="{{ asset('public/css/style.css') }}". Note that the public should be included when you call the assets.
put your css in public folder, then
add this in you blade file
<link rel="stylesheet" type="text/css" href="{{ asset('mystyle.css') }}">
Use {!! in new laravel
{!! asset('js/app.min.js') !!}
<script type="text/javascript" src="{!! asset('js/app.min.js') !!}"></script>
For Laravel 5.4 and if you are using mix helper, use
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"></script>
For those who need to keep js/css out of public folder for whatever reasons, in modern Laravel you can use sub-views. Say your views structure is
views
view1.blade.php
view1-css.blade.php
view1-js1.blade.php
view1-js2.blade.php
in view1 add
#include('view1-css')
#include('view1-js1')
#include('view1-js2')
in views-js.blade.php files wrap your js code in <script> tag
in views-css.blade.php wrap your styles in <style> tag
That will tell Laravel, and your code editor, that those are in fact js and css files. You can do the same with additional HTML, SVGs and other stuff that is browser-renderable