i am using master pages in my application and all custom styling and bootstrap files are included there and its working fine but when i use wildcard for example localhost/final/User/id all bootstrap and custom styling links could not work, all files are in public folder
<!-- Bootstrap CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/portal-style.css" rel="stylesheet">
<link href="css/portal-stylesheet.css" rel="stylesheet">
this is screen shot for my view with wildcard
this is link for all files that is not working when i use any wildcard
You should use asset() helper to build links to CSS:
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
It'll work for you if you're keeping css files in public/css directory.
The reason this is happening is because of the way you have coded the path to the css file which is relative to the page you are viewing.
So when you view: localhost/final/user/id the browser is going to look for the css file here: localhost/final/user/css/bootstrap.css
Laravel has some helper methods to remove the pain of setting up your asset files (css, images, etc).
If you are using blade, you can use the asset() method like this:
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/portal-style.css') }}" rel="stylesheet">
<link href="{{ asset('css/portal-stylesheet.css') }}" rel="stylesheet">
Normally You can use asset() or secure_asset() for HTTPS, both will work when your assets, like css or js files are in public folder.
Or if you are not using public folder. Than url() will be there for you.
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
OR
<link href="{{ url('public/css/bootstrap.css') }}" rel="stylesheet">
Related
I'm not too much familiar with the front end development since I've worked as back-end developer. Now, I've a problem with css overriding on my page.
I've following a structure including css files in the master layout.
#section('assets')
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/jquery-ui.css')}}" rel="stylesheet">
<link href="{{ asset('css/animate.min.css')}}" rel="stylesheet">
<link href="{{ asset('css/style.css')}}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
#show()
Whenever the home page is loaded then I have a lot of errors displayed in the console.
Unknown property ‘-moz-osx-font-smoothing’. Declaration dropped. font-awesome.min.css:4:662
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. bootstrap.min.css:7:329
Unknown pseudo-class or pseudo-element ‘-webkit-search-cancel-button’. Ruleset ignored due to bad selector. bootstrap.min.css:7:1619
Unknown property ‘orphans’. Declaration dropped.
bootstrap.min.css:7:2379
Unknown property ‘widows’. Declaration dropped.
bootstrap.min.css:7:2388
Error in parsing value for ‘outline’. Declaration dropped.
bootstrap.min.css:7:3249
Error in parsing value for ‘margin-top’. Declaration dropped.
bootstrap.min.css:7:21595
Error in parsing value for ‘outline’. Declaration dropped.
bootstrap.min.css:7:21882
....
As per my knowledge, this is because of conflict of css rules added in files and hence proper ordering of the including css files that master blade needs.
Can anyone provide how to reorder the including css files in above master layout?
Thanks in advance.
try this
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
<link href="{{ asset('css/jquery-ui.css')}}" rel="stylesheet">
<link href="{{ asset('css/animate.min.css')}}" rel="stylesheet">
<link href="{{ asset('css/style.css')}}" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800" rel="stylesheet">
Hello everyone: i'm deploying my project. Pointed the URL to the web folder when I call the url the login page shows but with non css or js, and the buttons calls doesn't work.
This is how I call the css/js or links to some path
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
add
and this is what it translate
<link href="/project/web/css/main.css" rel="stylesheet">
and that should translate it as
<link href="/css/main.css" rel="stylesheet">
Any help?
thanks
The CSS don't load em some routes, example, a route with a var:
//LINK
Route::get('/link/{id}', 'PagesController#link');
TEMPLATE:
<link rel="stylesheet" href="../public/css/style.css">,
How I can fix it?
To generate URL's for assets like CSS/JS/images/etc., in Laravel, use the helper function asset, instead of specifying the relative URL:
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
See the documentation
<link rel="stylesheet" href="{{ asset('public/css/style.css') }} ">
or
<link rel="stylesheet" href="{{ asset('css/style.css') }} ">
Use absolute paths like this (starting from the end of 'public'):
<link rel="stylesheet" href="/css/style.css">,
The right solution is the following one:
<link rel="stylesheet" href="/css/style.css">
Don't forget to add the / before the css/style.css or it wont load.
I'm using Laravel 5.2.
I have public/app.css and i link it from views/layouts/app.blade.php with:
<link rel="stylesheet" href="{{ public_path('app.css') }}">
I have tried every combination that i can think of, like using asset() asset_path(), putting app.css in views/layouts/ with the app.blade.php file and nothing will work.
If I inspect the source of a page, it shows the link and the path is correct, but the styles won't apply.
Try this:
<link href="{!! asset('css/app.css') !!}" rel="stylesheet" type="text/css">
Try to use asset() method:
<link rel="stylesheet" href="{{ asset('app.css') }}">
Hi I am currently learning Laravel and seem to be having issues loading custom CSS that is located in the public/css/bootstrap.css.
I have been attempting to load it via
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet" type="text/css" >
But it is if the CSS is not getting picked up. When I view the page source (http://portfollo.co.uk/css/bootstrap.css) I just get an error. Any ideas ?
Try with public/css/bootstrap.css
<link href="{{ asset('public/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >
OR
<link href="'/css/bootstrap.css'" rel="stylesheet" type="text/css" >
You should put your css file inside public folder, (app/public):
then in your head:
<link rel="stylesheet" href="{{ url('/') }}/style.css" type="text/css"/>
Public folder will contain all css and js files, you can also create assets folder inside public folder and then point to correct path:
<link rel="stylesheet" href="{{ url('/') }}/assets/css/style.css" type="text/css"/>
change name as public/css/bootstrap.css and put css in that folder. and give the same path.
This is not a CSS error. its Routing error. check your route.php file just check your source code like this view-source:http://portfollo.co.uk/css/bootstrap.css
you are trying something wrong ??