Twitter Bootstrap Question posted in

How to call local css file from blade template?-Twitter bootstrap

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The styles for adminLTE templates wont work if written in page.blade.php, as previoulsly did:

    EDIT: more details... I have this is the AdminLTE page template (page.blade.php)

    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:

     {{-- Base Stylesheets --}}
    @if(!config('adminlte.enabled_laravel_mix'))
        <link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
       
    <link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >

        {{-- Configured Stylesheets --}}
        @include('adminlte::plugins', ['type' => 'css'])

        <link rel="stylesheet" href="{{ asset('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">
    @else
        <link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
    @endif

    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.


  2. 0

    As porloscerros Ψ wrote, you have to write it this way (in between <head> tags)

    <link rel="stylesheet" href="{{ mix('css/admin_custom.css') }}">

    And if it does not work, try:

    <link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search