I'm trying create a template for my control panel
I want make a "Back" button in the template, where I can set your href is set for extended page
So I tried use #yield for set, but not have success
Fallowing my code
// in my template -> layouts.master.blade.php
Back
//my extended page -> user.edit.blade.php
#extends('../layouts.master')
#section('back')
dashboard
#stop
I'm not sure why it's not working for you, but it should. Here's a test I just did on my end. I got a clean Laravel app, renamed home.php to
layout.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Laravel PHP Framework</title>
<style>
#import url(//fonts.googleapis.com/css?family=Lato:700);
body {
margin:0;
font-family:'Lato', sans-serif;
text-align:center;
color: #999;
}
.welcome {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
a, a:visited {
text-decoration:none;
}
h1 {
font-size: 32px;
margin: 16px 0 0 0;
}
</style>
</head>
<body>
<div class="welcome">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAACHCAYAAAA850oKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNUVCMTdGOUJBNkExMUUyOTY3MkMyQjZGOTYyREVGMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNUVCMTdGQUJBNkExMUUyOTY3MkMyQjZGOTYyREVGMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI1RUIxN0Y3QkE2QTExRTI5NjcyQzJCNkY5NjJERUYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI1RUIxN0Y4QkE2QTExRTI5NjcyQzJCNkY5NjJERUYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+g6J7EAAAEL1JREFUeNrsXQmU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" alt="Laravel PHP Framework">
<h1>#yield('youhave')</h1>
</div>
</body>
</html>
As you can see I'm using two different yields, wich you'll see in the new
home.blade.php
#extends('layout')
#section('youhave')
You have arrived.
#stop
#section('laraveldotcom')
http://laravel.com
#stop
And it worked fine for me, I could even click the Laravel logo to be redirected to the Laravel site. So you might have a problem somewhere else.
Related
I am new to wordpress development. I am learning to develop a new theme. I know for basic there are only two absolutely necessary files for a wordpress theme. For testing I created an index.php file and style.css fiel and tried to use it as a theme. But I am facing issues doing it.
The index.php file is being read and the content is being shown on the home page, but the css isn't getting loaded from the style.css file. The first comment is being read as the theme info can be seen in theme details section but the css isn't being loaded.
I am getting two kinds of error, first
"Failed to load resource: the server responded with a status of 404(Not Found)"
Refer to the image:
And,
"GET http://rockstargaming.hol.es/style.css net::ERR_ABORTED 404 (Not Found)"
At first I was trying to include the stylesheet thorugh <link> tag but after getting the error I tried another way to enqueue scripts - through funstions.php file, but then I see nothing, no error and no styling.
Nothing seems to be working, I tried doing everything multiple times.
index.php:-
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gym</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Testing theme development
</div>
<div class="top-ribbon top-ribbon-left"></div>
<div class="top-ribbon top-ribbon-right"></div>
</body>
</html>
style.css
/*
Theme Name: GymTheme
Author: SamarpitShrivastava
Author URI: https://www.google.com
Version: 1.0
*/
html,body{
margin: 0;
padding: 0;
font-size: 10px;
background-color: #1f1f1f;
}
/*Upper Ribbon*/
/*Phone*/
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 81%;
height: 13em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
box-shadow: 0 0 5 5 yellow;
}
.top-ribbon-right{
border-top: 18em solid #ffb700;
width: 0;
height: 0;
border-left: 35em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -0.5em;
transform: rotateZ(6deg);
z-index: 200;
}
/*Phone*/
/*Tablet*/
#media only screen and (min-width: 800px){
/* For Tablets: */
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 17em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}
.top-ribbon-right{
border-top: 25em solid #ffb700;
width: 0;
height: 0;
border-left: 49em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -1em;
transform: rotateZ(6deg);
z-index: 200;
}
}
/*Tablet*/
/*Desktop*/
#media only screen and (min-width: 1300px) {
/* For desktop: */
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 20em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}
.top-ribbon-right{
border-top: 30em solid #ffb700;
width: 0;
height: 0;
border-left: 60em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: 0em;
transform: rotateZ(6deg);
z-index: 200;
}
}
/*Desktop*/
/*Upper Ribbon*/
functions.php
<?php
function includeResources(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'includeResources');
?>
This is how it should be actually looking:
the problem is that you are adding the style path to the header incorrectly.
Example: bluebezer.com.br/style.css
you should be pointing to the folder where your css is which is within the themes and not at the root of the site.
Example: bluebezer.com/wp-content/themes/your-name/style.css
to get the path of your theme use the function get_template_directory_uri()
<html <?php language_attributes(); ?>>
<head>
<!-- ... other codes ...-->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() . '/style.css'; ?>" />
<!-- This wp_head function must be present in all wordpress headers. -->
<?php wp_head(); ?>
</head>
but the correct way to add a wordpress style is by creating a function in functions.php and adding code similar to the one below:
add_action( 'wp_enqueue_scripts', 'wpsites_new_style_sheet' );
function wpsites_new_style_sheet() {
//registering a new style in wordpress
wp_register_style( 'new-style', get_template_directory_uri() .'css/new-style.css', array(), '1.0');
//stating that the new style should be displayed in wordpress
wp_enqueue_style( 'new-style' );
}
It is important to note that this function will automatically call the style of your site header via the wp_head(); function; which should be present in all wordpress theme headers.
The wp_head(); function is responsible for displaying titles, scripts, styles, goals and other information that comes from plugins, actions, and wordpress panel settings automatically. Then it must be present in all wordpress headers or you will have various errors and difficulties during development.
Another important thing is the function: wp_footer();
It is responsible for calling extra information like scripts and other settings similar to wp_head(); and she must always be present in the example's footer:
<!-- ... other codes ...-->
<?php wp_footer(); ?>
</body>
</html>
Your stylesheet isn't located in the root directory of your WordPress installation (/style.css) but in your theme directory. This is why you should not use the HTML link attribute but rather the wp_enqueue_style function in the wp_enqueue_scripts action. You could use the official WordPress guide for this.
Furthermore, your functions.php is not valid, as style.css is not declared as a string. A PHP error should be thrown.
Change this wp_enqueue_style('style', style.css, false); to wp_enqueue_style('style', get_stylesheet_uri());.
Moreover, the function you want to include does not exist because of a typo. Rename the function to includeResources instead of inculdeResources (switch u and l).
I have two nearly identical web pages. In fact, I copied the code for the first and saved it as the 2nd before just modifying some of the elements in the 2nd. The styles in the style tag were left exactly the same. They are displaying different font-sizes, and I haven't the foggiest idea why.
Without getting off on tangents about what I should be doing (e.g. using a stylesheet) or nitpicking my code (unless it actually answers the question), can someone please explain why I'm getting two different styles using identical style tags?
P.S. - I know I can fiddle and get them both to have the same style, but it drives me crazy not knowing why this is happening. Believe me, I would have already had them looking the same by now if it weren't for my obsessive desire to understand things I don't understand.
P.S.S. - Adding a meta tag for the viewport, as suggested in an answer to this question, did not work for me.
---DETAILS---
options.php, the desired style, looks like this in mobile Chrome on an LG phone...the screenshots below are from Opera (Chrome) DevTools with device toolbar toggled on with Galaxy S5 being emulated. (These screenshots are exactly what I am seeing on my real device, the LG phone):
admin.php, has noticeably smaller font-sizes. It's hard to see in these screenshots, but the img at the top stays exactly the same size. Also, notice that both screenshots are the same width:
Code for options.php (php renders it):
$admin_str = "<div class=\"a-div\">Admin Options</div>";
$body = "
<div id=\"hero-img\">
<img src=\"imgs/logo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">What would you like to do next?</h2>
<div class=\"a-div\">Record------</div>
<div class=\"a-div\">Manage -----</div>
<div class=\"a-div\">Manage my account information</div>
<div class=\"a-div\">Add a ----</div>
$admin_str
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>------- Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
Code for admin.php (php also renders it):
$body = "
<div id=\"hero-img\">
<img src=\"imgs/dtlogo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">Administrative Options</h2>
<div class=\"a-div\">Add a new approved email</div>
<div class=\"a-div\">Back to main options</div>
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrative Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
UPDATE --Per the request by Donkey Shame, here are the computed font-sizes:
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
UPDATE #2 --As Dejan suggested, I tried viewing the two sites in desktop mode, and they are the same even when they are not the same when viewed on mobile.
UPDATE #3 --After some tinkering, I got the two pages to have the same style when viewed on mobile. Of course, I never doubted I'd do that, and it still doesn't answer my original question regarding the original code, but it actually might have helped me to narrow it down to a very specific culprit. Here's what I did. I removed the font-size altogether from body. Then I changed the h1 and h2 both to divs. I edited the style tag to reflect those new divs. Then I set font-size: 5vw for the #heading div (the old h1). I set font-size: 3.022727vw (more on that 3.022727 later) for the #subheading div (the old h2). I set font-size: 3.5vw for the a elements. Here's where it gets strange again: If I change the 3.022727vw to 3.022726vw in both style tags, the 1st page has virtually no change (which is what should be expected), but the 2nd page does this (note how the #subheading changes the font-size of the a tags also):
admin.php - #subheading { font-size: 3.022727vw; }
admin.php - #subheading { font-size: 3.022726vw; }
It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):
<meta name="viewport" content="width=device-width, initial-scale=1">
Without viewport tag:
Both pages with viewport tag:
I believe the issue is in applying body font-size as 100%. There're two ways of solving the issue: replace font-size: 100%; with font-size: 1rem; or with font-size: 16px; Bootstrap for example uses font-size: 1rem;.
If it doesn't help open Devtools of your browser, open a page with smaller font-size and inspect font sizes of and texts. It might be overwritten by some additional styles.
<style>
body {
font-family: sans-serif;
font-size: 1rem;
}
I'm learning Laravel for the first time, just started today. Fresh Laravel install via Composer on LAMPP - Ubuntu. After I run sudo /opt/lampp lampp start in my terminal, I open Chrome and nav to localhost/MYAPP/resources/views/welcome.blade.php. This is the view that is rendered.
The "#" statements (that I assume are specific to Laravel's controllers) are rendered to the screen in the browser and I cannot figure out why this is happening.
Any/all insight is appreciated!
EDIT: As requested here is my welcome.blade.php file:
<!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">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Documentation
Laracasts
News
Forge
GitHub
</div>
</div>
</div>
</body>
The # in laravel blade view is injection of some php commends and shortcuts. For example:
#if(condition)
some data
#else
some data
#endif
Is the same as:
<?php if(condition){ ?>
some data
<?php } else { ?>
some data
<?php } ?>
You will find more here: https://laravel.com/docs/5.6/blade
When it comes to Laravel it is a basic so read it carefully.
After a week now of double checking my PATH and versions for everything, I've figured out that I simply needed to navigate to the directory where my application is stored and run the command php artisan serve.
Major props to user Yachi 웃 for his attentive help.
I'm currently working on a homepage using the Laravel PHP Framework and I'm running into CSS issues. I'm trying to accomplish a simple task of having two things in my 'header' tag,
1) An image of a logo on the left
2) A container to the right of the logo displaying a user's information
The logo is positioned fine on the left but when I try to position the container to the right of it, it is being positioned underneath the logo instead. I know my CSS is good unless I'm overlooking something entirely but I have a feeling that the Larevel Blade Templating is having an effect in how 'div' elements are being handled.
CSS(style.css):
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.container {
width:100%;
}
.header_container {
width:960px;
}
.main_logo_container {
width:313px;
margin:0 170px;
position:relative;
}
.admin_container {
display:inline-block;
float:left;
width:600px;
margin:5px 5px;
position:relative;
}
#extends ('layouts.default')
Admin View after user logs in (admin_index.blade.php):
#section('content')
<header>
<div class="header_container">
<div class="main_logo_container">
<img src="../images/logo.png" width="300" height="97" alt="Company Logo" />
<div class="admin_container">
<b> You have reach the admin page!</b>
</div>
</div>
</div>
</header>
#stop
layouts.default.blade.php(Main Blade Template):
<!doctype html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href=" <?php echo asset('css/style.css')?>" type="text/css">
<style>.flash { padding: 1em; border: 1px dotted black; } </style>
</head>
<body>
#if (Session::get('flash_message'))
<div class="flash">
{{ Session::get('flash_message') }}
</div>
#endif
<div class="container">
#yield('content')
</div>
</body>
</html>
Any help is greatly appreciated since I'm trying to become more familiar with Laravel PHP.
Your logo container was too small because according to your DOM it also carries your text which is 600px wide for a 313px wide container hence the split on two separate lines.
I suggest you change your CSS to fix this and also remove the float: left directive. The display: inline-block here will be more efficient.
Therefore you will get this following CSS:
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.header_container {
width:960px;
}
.main_logo_container {
width: 100%;
}
.main_logo_container img {
display: inline-block;
}
.admin_container {
display: inline-block;
margin-left: 5px;
position:relative;
top: -40px;
}
And here is a demo to show you the working result:
http://jsfiddle.net/w7wqaw9L/
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}