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', 'JeroenNoten\LaravelAdminLte\Helpers\LayoutHelper')
#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/select2#4.1.0-rc.0/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>
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.
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') }}">
Related
I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9
My yield or section or include is not working here is my code I think I already follow all the rules. As you can see I want to call the three.blade.php I name it as a #section('script') and call it to the master.blade.php using yield('script') but it seems the yield or section is not working. here are my codes below:
master.blade.php
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('themes/css/bootstrap.rtl.min.css') }}" rel="stylesheet">
<link href="{{ asset('themes/css/bootstrap-select.css') }}" rel="stylesheet">
<link href="{{ asset('themes/fontawesome/css/all.min.css') }}" rel="stylesheet">
<link href="{{ asset('themes/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('favicon.ico') }}" rel="shortcut icon" type="image/x-icon"/>
<title> كاربران</title>
</head>
<body>
#include('Home.layouts.sidebar')
<main id="app">
#include('Home.layouts.header')
#yield('content')
</main>
#include('Home.layouts.footer')
#yield('script')
</body>
</html>
index.blade.php
#include('Home.steps.one')
#include('Home.steps.two')
#include('Home.steps.three')
two.blade.php
<form action="{{ route('book.store') }}" method="post">
#csrf
....
</form>
<table class="table table-striped">
....
</table>
#section('script')
<script>
$(document).on('click', '#book_id', function() {
alert('Hello');
});
</script>
#endsection
three.blade.php
<form action="{{ route('requisition.store') }}" method="post">
#csrf
....
</form>
<table class="table table-striped">
....
</table>
#section('script')
<script>
$(document).on('click', '#province_id', function() {
alert('Hello');
});
</script>
#endsection
In index.blade.php
#extends('layouts.master')
#section('content')
#include('Home.steps.one')
#include('Home.steps.two')
#include('Home.steps.three')
#endsection
and for script and css you can use #stack.So in master.blade.php instead of
#yield('script')
use
#stack("script")
and in two.blade.php or any master extended layout use
#push('script')
<script>
</script>
#endpush
#John Lobo is correct, #stack and #push are definitely the way to go here. But there is also one other thing that might be going on here. Looks like you're trying to use jQuery, but I don't see it being imported anywhere.
this is my first question, so i'm a bit nervous. I'm trying to learn Laravel and using 5.6 version. I got a HTML theme from themeforest.net and build a master layout. I include header and footer codes from another blade.php file. In header, there is a menu called 'Browse Categories'. On the home page the menu contains a CSS class that called 'show'. But on the other pages the menu shouldn't be in it. Here is my header.blade.php file
<div class="col-md-5 order-3 order-md-2">
<nav class="category-nav primary-nav show"><!--this is where i stuck-->
<div>
<a href="javascript:void(0)" class="category-trigger">
<i class="fa fa-bars"></i>Kategoriler
</a>
<ul class="category-menu">
<li class="cat-item has-children">
Arts & Photography
<ul class="sub-menu">
<li>Bags & Cases</li>
<li>Binoculars & Scopes</li>
<li>Digital Cameras</li>
<li>Film Photography</li>
<li>Lighting & Studio</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
and that particular class is here
.category-nav.show .category-menu {
visibility: visible;
opacity: 1;
pointer-events: visible;
}
I need the 'show' class passive except for the home page. how can I do that? My master layout is here
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>#yield('title', config('app.name'))</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Use Minified Plugins Version For Fast Page Load -->
<link rel="stylesheet" type="text/css" media="screen" href="css/plugins.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="shortcut icon" type="image/x-icon" href="image/favicon.ico">
</head>
<body>
<div class="site-wrapper" id="top">
#include('includes.header')
#yield('content')
</div>
<!--=================================
Footer Area
===================================== -->
#include('includes.footer')
<!-- Use Minified Plugins Version For Fast Page Load -->
<script src="js/plugins.js"></script>
<script src="js/ajax-mail.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
For named routes you can do as suggested in this answer like so:
<a class="nav-link {{ Route::currentRouteNamed('home') ? 'active' : '' }}" href="#">
Home
</a>
Or check the current route action if you don't use named routes
<a class="nav-link {{ Route::currentRouteUses('App\Http\Controdllers\HomeController#index') ? 'active' : '' }}" href="#">
Home
</a>
You can also not include the file at all:
#if(Route::currentRouteUses('App\Http\Controdllers\HomeController#index'))
#include('includes.header')
#endif
Or
#if(Route::currentRouteNamed('home'))
#include('includes.header')
#endif
When you render the homepage from your controller, include a variable like this:
return view('home', ['site' => 'home'])
then in your home.blade.php
<nav class="category-nav primary-nav #isset($site) show #endisset">
In your other views just don't include that variable.
Can not add OwlCarousel to laravel project properly and it doesn't work.
What should I do?
I copied owl.carousel.min.css and owl.theme.default.min.css and owl.carousel.min.js to owlcarousel folder that was placed in the same directory as view.blade.php file was.
My code is:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
<div> Your Content</div>
</div>
<script>
$(document).ready(function () {
$(".owl-carousel").owlCarousel();
});
</script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
The right way is this one:
<script type="text/javascript" src="{{ URL::asset('js/owl.min.js') }}"></script>
The function URL::asset() produces the necessary url for you. Same for the css:
<link rel="stylesheet" href="{{ URL::asset('css/owl.css') }}" />
You have to place owlcarousel folder in the laravel's app/public folder, not in views folder.
Hope this helps.
I built a Basic blade template inside
resources/views
,
Further I am using Vuetify.
it look like this:
//app.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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="{{ csrf_token() }}">
<title>{{ config('app.name', env('APP_NAME')) }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" dark>
<v-app dark v-if="loading">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-progress-circular :indeterminate="true" :size="80" color="primary"></v-progress-circular>
</v-flex>
</v-layout>
</v-app>
<v-app v-else v-cloak dark>
<v-navigation-drawer app right></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container grid-list-xl>
<v-layout>
#section('content')
</v-layout>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
#yield('javascript')
</body>
</html>
I create a section
#section('content') so that I can extend the layout and put Content to that area. Inside
resources/views/Event
i have a blade file which extends this and shall add data to the Content
// create.blade.php
#extends('layouts.app')
#section('content')
testests
#endsection
But Nothing gets shown, what am I missing?
In you Blade template, you want to use
#yield('content')
not:
#section('content')