From main parent template I tried calling:
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
So all views that extends parent can use these styles but it doesn’t work.
However if I put it in the child view, works perfectly.
Already tried using the {{ }} format, and adding type="text/css".
Also checked Including a css file in a blade template?
What is missing??
EDIT: more details…
I have this is the AdminLTE page template (page.blade.php):
@extends('adminlte::master')
@inject('layoutHelper', 'JeroenNotenLaravelAdminLteHelpersLayoutHelper')
@if($layoutHelper->isLayoutTopnavEnabled())
@php( $def_container_class = 'container' )
@else
@php( $def_container_class = 'container-fluid' )
@endif
@section('includes')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"/>
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
@stop
@section('adminlte_css')
@stack('css')
@yield('css')
@stop
@section('classes_body', $layoutHelper->makeBodyClasses())
@section('body_data', $layoutHelper->makeBodyData())
@section('body')
<div class="wrapper">
{{-- Top Navbar --}}
@if($layoutHelper->isLayoutTopnavEnabled())
@include('adminlte::partials.navbar.navbar-layout-topnav')
@else
@include('adminlte::partials.navbar.navbar')
@endif
{{-- Left Main Sidebar --}}
@if(!$layoutHelper->isLayoutTopnavEnabled())
@include('adminlte::partials.sidebar.left-sidebar')
@endif
{{-- Content Wrapper --}}
<div class="content-wrapper {{ config('adminlte.classes_content_wrapper') ?? '' }}">
{{-- Content Header --}}
<div class="content-header">
<div class="{{ config('adminlte.classes_content_header') ?: $def_container_class }}">
@yield('content_header')
</div>
</div>
{{-- Main Content --}}
<div class="content">
<div class="{{ config('adminlte.classes_content') ?: $def_container_class }}">
@yield('content')
</div>
</div>
</div>
{{-- Footer --}}
@hasSection('footer')
@include('adminlte::partials.footer.footer')
@endif
{{-- Right Control Sidebar --}}
@if(config('adminlte.right_sidebar'))
@include('adminlte::partials.sidebar.right-sidebar')
@endif
</div>
@stop
@section('adminlte_js')
@stack('js')
@yield('js')
@stop
Then In the view I have @extends(‘adminlte::page’)
And the bootstrap and datatables, etc. are working just fine, but my local styles file is not.
UPDATE: I paste here the HTML produced by the page. As I wrote if I put the in the ‘css’ section in view it produces this url, that works in the browser: http://localhost:5555/css/admin_custom.css
If I inspect the page I can see:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle</title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="stylesheet" href="http://localhost:5555/css/admin_custom.css">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
Then, If I put it in the template it does not produces the same:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle </title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
2
Answers
The styles for adminLTE templates wont work if written in page.blade.php, as previoulsly did:
The styles have to be called in the master.blade.php so to be available for all pages. page.blade.php also extends from master, So: go to master.blade.php search for the {-- Base Stylesheets --}} section and put your code there like this:
Note: This fix is for case you have not compile all your styles in app.css and AdminLTE main pages have been published as in this question.
As porloscerros Ψ wrote, you have to write it this way (in between
<head>
tags)And if it does not work, try: