I have created some layouts and added in home.blade.php, when i view it in browser some space is added whenever i include the layouts! here is my home.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 content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>#yield('title') - {!! trans('main.site_title') !!}</title> <!-- Favicon-->
<link rel="icon" href="{!! URL::to('/') !!}/public/frontend/img/favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
{{ Html::style('public/frontend/js/bxslider/jquery.bxslider.css') }}
{{ Html::style('public/frontend/js/flexslider/flexslider.css') }}
{{ Html::style('public/frontend/js/radial-progress/style.css') }}
{{ Html::style('public/frontend/css/animate.css') }}
</head>
<body>
#include('frontend.layouts.header')
#include('frontend.layouts.slider')
#include('frontend.layouts.header_strips')
#include('frontend.layouts.news_events')
#include('frontend.layouts.share_pics_articles')
#include('frontend.layouts.are_you_ready')
#include('frontend.layouts.education_great')
#include('frontend.layouts.about_statistics')
#include('frontend.layouts.quotes')
#include('frontend.layouts.sub_footer')
#include('frontend.layouts.footer')
{!! Html::script('public/frontend/js/breakpoints.js') !!}
{!! Html::script('public/frontend/js/jquery/jquery-3.3.1.min.js') !!}
{!! Html::script('public/frontend/js/scrollspy.js') !!}
</body>
</html>
How to fix that issue ? can some one help me please
Below i have attached the browser screenshot please take a look at it !
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
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') }}">
I am new to laravel framework, want to use laravel layout master pages, and used to include child pages in master page. here is my header and footer page and app.blade.php is my master page, where i am using #yield to show data. but it did not work for me. my output is showing blank.
app.blade.php (Layout master page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div>
#yield('header')
</div>
<div class="content">
#section('content')
<h1> Body </h1>
#endsection
</div>
<div>
#yield('footer')
</div>
</div>
</body>
</html>
Header.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.header
{
height:100px;
width:100%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="header">
#section('header')
<center> Layout Header Master page </center>
#show
</div>
</body>
</html>
footer.blade.php
#extends('app')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.footer
{
height:100px;
width:100%;
background-color: aquamarine;
padding-top: 50px ;
}
</style>
</head>
<body>
<div class="footer">
#section('footer')
<center> Layout Footer Master page </center>
#show
</div>
</body>
</html>
web.php (Route)
Route::get('/masterpage','studentcontroller#viewmasterpage')->name('masterpage');
studentcontroller.php
public function viewmasterpage()
{
return view('layouts/app');
}
Problems:
There are some problems in your blades.
Every opening #section Tag needs a closing #endsection Tag.
The section Tags should everything that you want to display in between.
You don't need to add the whole <html> etc. you can simply add the necessary code
I think the content should be a yield because you might want to insert the content of other pages there..
I also think you are confusing #includeand #yield
If you want to outsource your header and footer you can simply #include('yourFolder/footer') and it inserts the code
Solution:
Change the #yield to #include
Change the #section to #yield('content')
Examples:
File named: header.blade.php
<div class="header">
<center> Layout Header Master page </center>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
#include('header')
<div class="content">
#yield('content')
</div>
#include('footer')
</div>
</body>
</html>
afterwards you can create a new view: example.blade.php
#extends('layout.app')
#section('content')
//put your content here
#endsection
You are misunderstanding the #extends, #yield and #section directives.
#extends uses another blade file, and fills in the #yield directives with the #sections it defines.
Say you have app.blade.php
<html>
<body>
#yield('header')
#yield('content')
#yield('footer')
</body>
</html>
You could then have say landing.blade.php
#extends('app')
#section('header')
<header>I am the header for the landing page!</header>
#endsection
#section('content')
<div>I am the content for the landing page!</div>
#endsection
#section('footer')
<header>I am the footer for the landing page!</footer>
#endsection
header.blade.php (Just use the code remove others)
#section('header')
<center> Layout Header Master page </center>
#endsection
footer.blade.php (Just use the code remove others)
#section('footer')
<center> Layout Footer Master page </center>
#endsection
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Master Page</title>
</head>
<body>
<div>
<div class="header">
#include('header')
</div>
<div class="content">
#yield('content')
</div>
<div class="footer">
#include('footer')
</div>
</div>
</body>
</html>
studentcontroller.php
public function viewmasterpage()
{
return view('layouts.app');
}
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')
I have an index volt for use every view but I want only don't use it in login page.
every volt use index volt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
{{ get_title() }}
{{ stylesheet_link('plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css') }}
{{ stylesheet_link('plugins/font-awesome-4.6.3/css/font-awesome.min.css') }}
{{ stylesheet_link('css/reset.min.css') }}
{{ stylesheet_link('css/common.min.css') }}
</head>
<body>
{{ partial('layouts/header') }}
<div class="container">
{{ content() }}
</div>
{{ partial('layouts/footer') }}
{{ javascript_include('js/jquery-3.1.0.min.js') }}
{{ javascript_include('plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js') }}
{{ javascript_include('plugins/sweetalert-master/dist/sweetalert.min.js') }}
</body>
</html>
i don't want to use it in login page but login use it . how can i do that ?
To change the layout for given page, do so in your controller:
$this->view->setLayout('your-custom-layout');
If you want to change only the template, you can use pick:
$this->view->pick(['users/login']);
More information about Views.