I put my CSS file inside public/css folder. I added CSS file in head section like below.
<link href="{{ url('/css/app.css') }}" rel="stylesheet">
But CSS is not working.
This is working for me in Laravel 8 (make sure your files are in the public folder)
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
In Laravel 8, make sure your files are in the public folder and reference them like this:
<link rel="stylesheet" type="text/css" href="{{ url('css/app.css') }}">
I don't see why you can't just use a relative URL like:
<link href="./css/app.css" rel="stylesheet">
Below worked for me.
<link rel="stylesheet" type="text/css" href="{{ URL::to('css/app.css') }}">
Related
I am new to Laravel and was wondering where I should put each css files for my views. I want to keep them separate and don't to have my styles in one file. Also, how would I be able to access them in those views? I tried using
<link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> but nothing changed in my view. The path where I have my file is storage/public/css/style.css
If your link is <link rel="stylesheet" type="text/css" href="{{ url('/css/style.css') }}" /> change it to <link rel="stylesheet" type="text/css" href="/css/style.css" /> and put your style sheet in /public/css/style.css
<link rel="stylesheet" href="{{asset("css/style.css")}}">
used this code,here asset link to your public folder and put your style sheet in /public/css/style.css
i have just clone project from live and running in my local environment but i am unable to load my files js and css all the stuff is crash.
Currently my css , js , fonts and images are under public folder and in view its like
{!!Html::style('css/bootstrap.min.css')!!}
{!!Html::style('css/font-awesome.min.css')!!}
{!!Html::style('css/reset.css')!!}
{!!Html::style('css/superslides.css')!!}
and images
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('images/favicon/apple-icon-57x57.png')}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('images/favicon/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('images/favicon/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('images/favicon/apple-icon-76x76.png')}}">
is it right way to do that because on live its working fine but in local its not working i have also add package of collective html but not working
How to load these file correctly
Any help will be highly appreciated!
Yes, you can load JS and CSS files the same ay you load your images using asset eg:
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}" />
<link rel="stylesheet" href="{{ asset('css/reset.css') }}" />
<link rel="stylesheet" href="{{ asset('css/superslides.css') }}" />
In the examples above make sure your CSS files are located in the app/public/css folder, same applies for JS files
You can load it using asset('/path to your file') or public_path('/path to your file').
Remember to add the forward slash '/' before the urls. e.g.
<link rel="apple-touch-icon" sizes="57x57" href="{{asset('/images/favicon/apple-icon-57x57.png')}}">
<link rel="apple-touch-icon" sizes="60x60" href="{{asset('/images/favicon/apple-icon-60x60.png')}}">
<link rel="apple-touch-icon" sizes="72x72" href="{{asset('/images/favicon/apple-icon-72x72.png')}}">
<link rel="apple-touch-icon" sizes="76x76" href="{{asset('/images/favicon/apple-icon-76x76.png')}}">
I can't load css file in my Laravel project.
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
/public/css/style.css does exist IDE confirms, and my target blade file extends the base file where css is loaded. But still changes in css won't take effect.
Thank you
In your blade file where you are declaring the assets try:
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
You can know more: https://laravel.com/docs/5.4/helpers#method-asset
Hope this helps.
I have imported a html page into my laravel 4 project. I linked all the js and css files together. However, when loading the page the page just outputs plain html.
This is my internal folder structure:
In my main.blade.php site I link to my css like that:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{asset('css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{asset('css/mainPage/plugin.css')}}" type="text/css">
Any recommendations what I am doing wrong?
I appreciate your answer!
As the others already pointed out, your missing the 'assets' at the beginning of your path. That's because it requires the full path relative to the public folder.
Besides that, I suggest you use the tools Laravel provides to generate the full link tag of your css includes. It makes your code a lot more cleaner.
{{ HTML::style('assets/css/mainPage/bootstrap.css') }}
And there's HTML::script('path') as well for javascript files
Use the following:
<!-- CSS Files
================================================== -->
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/jpreloader.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/animate.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/flexslider.css')}}" type="text/css">
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/plugin.css')}}" type="text/css">
give the full path of the directory under public folder:-
<link rel="stylesheet" href="{{ URL::asset('assets/css/mainPage/bootstrap.css') }}">
Today I deployed my application and I experienced a problem regarding my css.
In my main template I have the following code :
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'bundles/appgenerictheme/current/frontend/css/style1.css'
'bundles/appgenerictheme/current/frontend/css/style2.css'
'bundles/appgenerictheme/current/frontend/css/style3.css'
output='css/style.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" charset="utf-8">
{% endstylesheets %}
The order bellow 1,2,3 is important because in style2.css I overide some rules defined in style1.css etc ...
In my dev environment I had no problems because the css are rendered like this :
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link rel="stylesheet" href="/app_dev.php/css/style1.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/app_dev.php/css/style2.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="/app_dev.php/css/style3.css" type="text/css" media="screen" charset="utf-8">
But in production environment, the rules changes and the assets are concatenated in one single file : style.css
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" charset="utf-8">
If I look into the generated style.css I can see that the order is not style1 -> style2 -> style3 but some random order making my rules to override css useless.
Is there a way to explicitly define an order for the concatenation of style.css ?
I've been trying to replicate this issue to no avail. It does respect the order in which I define them in my case.
Make sure you:
Install your assets: php app/console assets:install web
Dump the new CSS file: php app/console assetic:dump --env=prod --no-debug
Clear the cache: rm -fr app/cache/*
in that specific order.
Anyway, if that doesn't help you could try using different directories, like this:
<!-- BEGIN GLOBAL MANDATORY STYLES -->
{% stylesheets
'bundles/appgenerictheme/current/frontend/css/style1.css'
'bundles/appgenerictheme/current/frontend/css/d1/style2.css'
'bundles/appgenerictheme/current/frontend/css/d1/d2/style3.css'
output='css/style.css' filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="screen" charset="utf-8">
{% endstylesheets %}