I'm new to Laravel, and I'm trying to do a "modular" page for the first time. Everything was going fine, had my base layouts, which gets extended on my home page, have set up some sections/yields with no problem (content, title, etc) but one specific #yield keeps being rendered at the wrong place, I've put it inside my head file (head.blade.php), which already have another #yield for the title, but that one keeps getting rendered inside the body. I tried doing some tests, and discovered that if I put my title #yield inside <title></title> it works OK, but if I put it outside the tag it is moved to the body.
Thats a normal Laravel way of working (#yield can't be by itself, only inside a tag) or something is wrong ?
default.blade.php
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
#include('includes.nav')
#yield('tools')
<main class="mdl-layout__content">
<div class="page-content">
#yield('content')
</div>
</main>
#include('includes.footer')
</div>
</body>
</html>
head.blade.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="cache-control" content="no-cache">
<meta name="description" content="XXXXXX">
<meta name="author" content="XXXXXXXXXXXXX">
<title>#yield('title')</title> =====> Works normally if put here
#yield('title') =====> Rendered inside the body if put that way
<!-- jQuery 3.2.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Normalize CSS -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Dialog Polyfill -->
<link rel="stylesheet" type="text/css" href="css/dialog-polyfill.css">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
It's a normal browser behaviour. First of all you have to place all the things inside the right places. It's like you are trying eat some fat meat without fork and then crying that your hands in fat :)
You always have to define all tags that browsers expect. Title tag define that inside title of the page is located. yield('title') just means the name that you gave its for inserting there then. It looks like id in HTML.
Since you haven't described to browser what do you want to insert here it is trying to solve the problem and it's usually a placement all the things without needed tags in body (only if we are talking about omitting tags in the header).
Related
I want to use a PHP include for the section. I have an index.php and a head.html in which I have the usual stuff: title, etc plus a link to bootstrap CDN, and a custom CSS file.
Upon testing, the styles from Bootstrap work fine but my custom overrides aren't. I was under the impression custom CSS files automatically override bootstrap? This has worked for me in the past when linking to them traditionally on every page of the website. However, I want to use PHP includes to save time.
I've played around with the order of things (i.e. Bootstrap first, custom CSS first etc), I've tried linking to the custom CSS file separately (outside the include) but can't figure it out.
Any ideas?
My code below:
index.php
<!DOCTYPE html>
<html>
<head>
<?php include("includes/head.html");?>
</head>
<body>
<div class="jumbotron paral paralsec">
<h1 class="hero-heading display-3 text-dark">Some text.</h1>
</div>
</body>
</html>
head.html
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Site Title</title>
<!-- Bootstrap CDN below -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Custom CSS below -->
<link rel="stylesheet" type="text/css" href="CSS/customCSS.css">
<!-- Font Awesome below -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts below -->
<link rel="stylesheet" type="text/css" href="#">
customCSS.css (only contains one h1 style, for testing)
h1 {color: white}
Folder structure:
CSS (Folder)
customCSS.css
includes (Folder)
head.html
index.php
Ordering of CSS files plays a less important role than most people think.
When there are multiple rules targeting the same thing, specificity is the most important factor. Higher specificity almost always wins.
When selectors have an equal specificity value, the latest rule (last one called) is the one that usually gets applied.
There's a lot more info on this topic here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
thanks for the suggestions.
It turns out I was experiencing a CSS caching issue. My browser was auto-loading an outdated version of the CSS file. The PHP include and and CSS link were working normally.
If any others come across this thread and are looking for the solution, see here:
https://css-tricks.com/can-we-prevent-css-caching/
Thanks again
Tom
I'm new to laravel. I have two pages A and B which uses tables. Now in my layout.blade.php I have a link towards only one stylesheet which is affecting both the tables in A and B. I only want it in A and for B I have different set of stylesheet. How do I target the stylesheet to the pages?
You can load css files directly in these views, so A would load one css and B will load another one.
Another way if to use conditional loading in layout.blade.php:
#if (request()->is('pageA'))
// Load CSS for A
#elseif (request()->is('pageB'))
// Load CSS for B
#endif
Usually in this case you should have a master layout that only include global scripts and stylesheets, says layouts/global.blade.php
<!doctype html>
<html lang="en-US">
<head>
<title>Your website</title>
#section('meta')
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
#show
#section('stylesheets')
<link rel="shortcut icon" href="{{asset("favicon.ico")}}" type="image/x-icon"/>
<link type="text/css" rel="stylesheet" href="{{asset("css/global.css")}}"/>
#show
#section('scripts')
<script src="{{url("js/global.js")}}"></script>
#show
</head>
<body>
#yield('content')
</body>
</html>
Then in your page_a.blade.php, you extend it and include your own specific stylesheets:
#extends('layouts/global')
#section('stylesheets')
#parent
<link type="text/css" rel="stylesheet" href="{{url("css/page_a.css")}}"/>
#endsection
#section('scripts')
#parent
<script src="{{url("js/page_a.js")}}"></script>
#endsection
#section('content')
Your page A content
#endsection
I think you may create a section like the following in your view, for example:
#extends('layouts.master')
#section('styles')
<link href="{{asset('assets/css/custom-style.css')}}" />
#stop
Hope this helps you.
You can use sass css for that conditions. In that sass css you can use if and else condition and check variable.
Please refer below link for how to use it.
http://thesassway.com/intermediate/if-for-each-while
I'm creating web application using laravel 5. Everypage has "//" on up-left corner. What is causing this?
The app.blade.php looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
#yield("content")
<p>Above content generated by MVC</p>
</div>
</div>
</body>
</html>
Well it certainly isn't anything in the blade template that's doing it.
What is probably happening is that you've got somewhere in your code a line which says echo "//"; or something similar, or a rogue line of code before your <?php block starts -- maybe you were trying to comment out a block of code that includes a <?php block.
That line doesn't have to be in the template; it could be anywhere in the code; if it's run before the template is output, then you will get the kind of effect that you're reporting here.
As for where the line is and what it's doing there, that's something you'll have to work out for yourself. But you can start by searching your codebase for echo or print statements, and for //<?php.
Building fresh from Bootstrap 3.3.4. Nav dropdown works fine on pages in the root directory, but when I call the nav in the header in a directory using:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/header.php');
?>
It pulls everything but the dropdown navs don't work.
Any ideas what could be causing it?
It seems you are calling only the header part of your page. The bootstrap and jquery breaks if their code is inserted in the page more than once. Hence,
make sure that you are calling the bootstrap libraries and relevant jquery libraries in right order and only once in any page.
Something like this :-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--You code -->
</body>
<!-- javascript files-->
</html>
I am new to Laravel4, so I was learning from the documentation.
It seems everything is all correct, but the extends method literally displays its code on my web browser. I don't know hwy..
This is the layout file (base.blade.php under layouts directory)
<!-- app/views/layouts/base.blade.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- You can provide some default content -->
#section('head')
<link rel="stylesheet" href="style.css" />
#show
</head>
<body>
#yield('body')
</body>
</html>
and home.blade.php.
<!-- app/views/home.blade.php -->
#extends('layouts.base')
#section('body')
<h1>Hurray!</h1>
<p>We have a template!</p>
#stop
and my routing configuration is like below..
Route::get('/',
function()
{
return View::make('home');
}
);
Now when you access to the URL, it displays just a string!
#extends('layouts.base')
I have been googling for a hour or so! still could not fix it...
What's wrong with them? :(
I checked common mistakes below
possible type
incorrect path
incorrect method name
missing appending 'blade' on the file name
BUT STILL CAN'T FIND THE PROBLEM. :(
There shouldn't be any space in the template above #extends at all no comments or whitespace
Remove
<!-- app/views/home.blade.php --> from home.blade.php
home.blade.php
#extends('layouts.base')
#section('body')
<h1>Hurray!</h1>
<p>We have a template!</p>
#stop
Possibilities are that you have printed #extends('layouts.base') twice in the page. Please have a look.