Welcome to my first post. I've searched stackoverflow for an hour to find the awnser I need, but without succes.
I'm currently creating my own website to test php with processwire and bootstrap. I am quite new to programming in general, but I have only three weeks of experience with php/processwire. I'm using this because I got an internship where they use it and I would like to create my own project in my spare time to speed up the learning proces.
I'm using a separate header/footer file that I import in each template. I notice that my CSS that is imported in the header file only works on my home.php template and not on my other ones. The html/php from header works fine, it's just the css that isn't working.
My files:
site
assets
less
styles.less
templates
_includes
_head.php
_foot.php
home.php
basic-page.php
I tried:
Change to css instead of less
Changing css import with ../ instead of site/
Copying all content of home.php into basic-page.php to see if the
problem was in the template.
part of header:
<?php namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><?php echo $page->title; ?></title>
<meta name="description" content="<?php echo $page->summary; ?>" />
<!-- MDB icon -->
<!-- <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"> -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
<!-- Material Design Bootstrap -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
<!-- Your custom styles (optional) -->
<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
</head>
<body>
part of footer
</footer>
<!--/.Footer-->
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="site/assets/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="site/assets/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="site/assets/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="site/assets/js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript" src="site/assets/js/main.js" ></script>
<!-- Import less file -->
<script type="text/javascript" src="/site/assets/js/less.js" ></script>
</body>
</html>
template home.php
<?php include('./_includes/_head.php'); // include header markup ?>
<main>
<!--Main layout-->
<div class="container">
<!--First row-->
<!--/.First row-->
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--Test columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--Test columnn-->
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.4s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(1).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.6s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(4).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<?php include('./_includes/_foot.php'); // include footer markup ?>
template basic-page.php
<?php include('./_includes/_head.php'); // include header markup ?>
<main>
<!--Main layout-->
<div class="container">
<!--First row-->
<!--/.First row-->
<hr class="extra-margins">
<!--Second row-->
<div class="row">
<!--Test columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--Test columnn-->
<!--First columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.2s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(3).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--First columnn-->
<!--Second columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.4s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(1).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--Second columnn-->
<!--Third columnn-->
<div class="col-lg-4">
<!--Card-->
<div class="card wow fadeIn" data-wow-delay="0.6s">
<!--Card image-->
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Architecture/4-col/img%20(4).jpg" alt="Card image cap">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">This is title</h4>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Read more
</div>
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<?php include('./_includes/_foot.php'); // include footer markup ?>
Thank you for taking the time to read this. Any help is appreciated.
instead of this
<?php namespace ProcessWire; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><?php echo $page->title; ?></title>
<meta name="description" content="<?php echo $page->summary; ?>" />
<!-- MDB icon -->
<!-- <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon"> -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Google Fonts -->
<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/bootstrap.min.css" />
<!-- Material Design Bootstrap -->
<link rel="stylesheet" type="text/css" href="site/assets/css/bootstrap/mdb.min.css" />
<!-- Your custom styles (optional) -->
<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
</head>
<body>
change
<link rel="stylesheet" type="text/css" href="site/assets/less/styles.less" />
to
<?php include 'site/assets/less/styles.less'; ?>
that should work, and make sure you have
<?php include '/path/to/header.php'; ?>
in all of your files as well that works for me at least.
Related
I'm trying to center my div content responsively with a sidebar menu and a top menu using bootstrap. But my div content is placed at the bottom of my page when I require the side-menu file and I don't know why. I'm not using any CSS file, just Bootstrap 5.2, but if your solution requires CSS that's okay.
INDEX
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TESTE</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?php echo $base_url . 'assets/css/bootstrap.min.css'; ?>">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="<?php echo $base_url . 'assets/css/all.min.css'; ?>">
</head>
<body>
<!-- NAVIGATION -->
<?php require 'application/views/menu/side-menu.php'; ?>
<div class="container justify-content-center">
<!-- AGENDAMENTOS -->
<div class="row mt-5 me-4">
<div class="col-md-12 offset-md-auto">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-calendar-days"></i> TO DO - 27 </h4>
</div>
</div>
</div>
</div>
<!-- end agendamentos -->
<!-- FEITOS -->
<div class="row mt-5">
<div class="col-md-12 offset-md-auto">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-check"></i> DONE - 27 </h4>
</div>
</div>
</div>
</div>
<!-- end feitos -->
</div>
<!-- Bootstrap Bundle JS -->
<script src="<?php echo $base_url . 'assets/js/bootstrap.bundle.min.js'; ?>"></script>
<!-- Fontawesome JS -->
<script src="<?php echo $base_url . 'assets/js/all.min.js'; ?>"></script>
</body>
</html>
SIDE MENU
<div class="d-inline-block">
<nav class="bg-dark text-white" style="max-height: 100%; height: 100vw; max-width: 10vw;">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
</nav>
</div>
This is what it was supposed to look like, but with the sidebar:
And this is what happens when I require my sidebar file:
I tried using position-absolute and d-inline-block, which resulted on other pages, but this isn't working on this one
Bootstrap is build on/with Flexbox. So a good solution for you is to use their Flex Utility classes to make the layout.
Explaining the solution
When dealing with elements that should stretch the entire viewport height it's good practice to set a min-height of 100vh to html and body.
Note in the CSS I also added min-height: -webkit-fill-available. They are commented out because they don't work in the iFrame, at least for me they don't. I recommend removing the comment block if you use this code; they're useful because Safari (iOS mostly) handles 100vh a little different than the other browsers which can cause some issues.
I then made the body a flex container so its direct children elements (flex items) will stack horizontally (by default). I used the class d-md-flex so all elements will stack vertically below the medium break point. Use d-flex if you want your sidebar to always stick to the left.
If you don't want body to be flex, a 'wrapper' <div class="d-md-flex">...</div> that spans all the (necessary) elements is a good alternative. Just add the CSS for it, setting it to height: 100%; or 100vh.
Speaking of sidebar; making it flex will now make it stretch the whole viewport, since it's a flex item of a flex container (body) that has a height of 100vh.
And that's it. Snippet is best viewed using the full page option.
html {
/*min-height: -webkit-fill-available;*/
}
body {
height: 100vh;
/*height: -webkit-fill-available;*/
max-height: 100vh;
overflow: auto;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!DOCTYPE html>
<html lang="pt">
<head></head>
<body class="d-md-flex">
<!-- SIDEBAR -->
<nav class="d-flex flex-row flex-column flex-shrink-0 p-3 text-bg-dark" style="min-width: 10vw;">
hello
</nav>
<!-- END SIDEBAR -->
<!-- MAIN -->
<main class="container">
<div class="row mt-5 row-cols-1 row-cols-md-3 g-4 justify-content-center">
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-calendar-days"></i> TO DO - 27 </h4>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h4 class="text-center"><i class="fa fa-check"></i> DONE - 27</h4>
</div>
</div>
</div>
</div>
</main>
<!-- END MAIN -->
</body>
</html>
Your card layout
I changed your two cards layout to make it easier to control how they behave, using row columns and the gap g-* utility class. It has no effect on how the sidebar behaves, so if it's of no use; just ignore it.
I would like to align my paragraphs on the same horizontal line but I can't find my error do you have a solution?
foreach ($articles as $article): ?>
<div class="container" id="presentation">
<div class="row">
<div class="col-12 mb-4"></div>
<div class="col-12 col-md-6">
<div class="media my-3">
<span><i class="fas fa-check"></i></span>
<div class="media-body ml-3">
<h5 class="mt-0"><?= $article['name'] ?></h5>
<p class="text-justify"><?= $article['content'] ?></p>
</div>
</div>
</div>
</div>
<?php endforeach ?>
.col-12 {width: 100%;}
This means that col-12 will take up the whole div block in one line. Try changing it to .col-6
Working Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="presentation">
<div class="row">
<?php
$articles=array(array("name"=>"name1111","content"=>"content1111"),array("name"=>"name222","content"=>"content222222"),array("name"=>"name333333","content"=>"content333333"));
foreach ($articles as $article): ?>
<div class="col-md-6">
<div class="media my-3">
<span> <i class="fas fa-check"></i></span>
<div class="media-body ml-3">
<h5 class="mt-0"><?= $article['name'] ?></h5>
<p class="text-justify"><?= $article['content'] ?></p>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
</body>
</html>
show function can't get the files in public
I tried in other controller without resources it can read the css at img in public sorry for my english
public function show($id)
{
$brand = Brand::where('c_id', $id)->get();
return view('brand.pick')->with('brand',$brand);
}
This is my HTML blade file
#extends('layouts.app')
#section('content')
#foreach($brand as $b)
<option value="{{$b->b_name}}" selected>{{$b->b_name}}
</option>
#endforeach
the page don't have css and image
This is in Index function the css is working when I run in show function
This is my Blade file Layout.app
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<title>{{config ('app.name')}}</title>
<link rel="icon" href="img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- animate CSS -->
<link rel="stylesheet" href="css/animate.css">
<!-- owl carousel CSS -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- themify CSS -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- flaticon CSS -->
<link rel="stylesheet" href="css/flaticon.css">
<!-- font awesome CSS -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- swiper CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- style CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
#include('inc.nav');
#yield('content');
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<!-- footer part start-->
<section class="footer-area section_padding">
<div class="container">
<div class="row">
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-
widget">
<h4>Top Products</h4>
<ul>
<li>Managed Website</li>
<li>Manage Reputation</li>
<li>Power Tools</li>
<li>Marketing Service</li>
</ul>
</div>
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-widget">
<h4>Quick Links</h4>
<ul>
<li>Jobs</li>
<li>Brand Assets</li>
<li>Investor Relations</li>
<li>Terms of Service</li>
</ul>
</div>
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-
widget">
<h4>Features</h4>
<ul>
<li>Jobs</li>
<li>Brand Assets</li>
<li>Investor Relations</li>
<li>Terms of Service</li>
</ul>
</div>
<div class="col-xl-2 col-sm-4 mb-4 mb-xl-0 single-footer-
widget">
<h4>Resources</h4>
<ul>
<li>Guides</li>
<li>Research</li>
<li>Experts</li>
<li>Agencies</li>
</ul>
</div>
<div class="col-xl-4 col-sm-8 col-md-8 mb-4 mb-xl-0 single-
footer-widget">
<h4>Newsletter</h4>
<p>You can trust us. we only send promo offers,</p>
<div class="form-wrap" id="mc_embed_signup">
<form target="_blank"
action="https://spondonit.us12.list-manage.com/subscribe/post?
u=1462626880ade1ac87bd9c93a&id=92a4423d01" method="get" class="form-
inline">
<input class="form-control" name="EMAIL"
placeholder="Your Email Address" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Your Email Address '" required=""
type="email">
<button class="click-btn btn btn-default text-
uppercase">subscribe</button>
<div style="position: absolute; left: -5000px;">
<input
name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value=""
type="text">
</div>
<div class="info"></div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="copyright_part bottom">
<div class="container">
<div class="row align-items-center ">
<p class="footer-text m-0 col-lg-8 col-md-12"><!-- Link back
to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script>
All
rights reserved | This template is made with <i class="ti-heart" aria-
hidden="true"></i> by <a href="https://colorlib.com"
target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC
BY
3.0. --></p>
<div class="col-lg-4 col-md-12 text-center text-lg-right
footer-social">
<i class="ti-facebook"></i>
<i class="ti-twitter"></i>
<i class="ti-instagram"></i>
<i class="ti-skype"></i>
</div>
</div>
</div>
</footer>
<!-- footer part end-->
<!-- jquery plugins here-->
<!-- jquery -->
<script src="js/jquery-1.12.1.min.js"></script>
<!-- popper js -->
<script src="js/popper.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- aos js -->
<script src="js/aos.js"></script>
<!-- easing js -->
<script src="js/jquery.magnific-popup.js"></script>
<!-- swiper js -->
<script src="js/swiper.min.js"></script>
<!-- swiper js -->
<script src="js/masonry.pkgd.js"></script>
<!-- particles js -->
<script src="js/owl.carousel.min.js"></script>
<!-- carousel js -->
<script src="js/swiper.min.js"></script>
<!-- swiper js -->
<script src="js/swiper_custom.js"></script>
<!-- custom js -->
<script src="js/custom.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Use asset helper of laravel.
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
By default asset helper will search path inside public folder, or you can configure asset url in .env file.
https://laravel.com/docs/5.8/helpers#method-asset
I'm making some php page : file_header.php, file_footer.php, file_index.php, and I load them all in the browser one by one, and the result is fine (as i want). But, the problem appears when i combine file_header.php and file_footer.php in file_index.php.
Here is the problem : there are two buttons in page file_header.php (these are bootstrap button), and i give my custom style to them, i want the buttons looks slim, so i give margin and padding attribute in the css style, and finally i load file_header.php in the browser normally (result is fine / as i want). But, when i combine file_header.php and file_footer.php in file_index.php these two buttons turns into the original bootstrap button (buttons looks fat).
why did it happen ?
<!-- This is file_header.php -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
</body>
</html>
<!-- This is file_footer.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Page Title</title>
<style>
footer{
background-color: #f4f4f4;
}
.container{
padding: 20px;
}
</style>
</head>
<body>
<footer>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Service</h5>
<div class="row">
<div class="col">
<p>About Us</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Success Story</h5>
<div class="row">
<div class="col">
<p>Let Me See</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Help</h5>
<div class="row">
<div class="col">
<p>Terms and Condition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<!-- This is file_index.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<?php include 'file_header.php' ?>
<div>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
</div>
<?php include 'file_footer.php' ?>
</body>
</html>
I expected the style of every buttons element in the page file_index.php is fine (buttons looks slim / as i want).
OR
I expected the style of every page (file_header, file_footer, file_index) doesn't change at all
When you combine the header, main and footer in the index file, you need to make sure that you have everything just once. Meaning, the doctype, the style, the opening body tag, etc.
So, I'd restructure a little bit your code, your 'file_header' should contain all what's in the <head>, I'd create a separate 'file_nav.php' where your navigation code sits, remove all the wrapping content from the 'file_footer' and leave there only the footer code.
Somehow like this:
<!-- This is file_header.php -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
footer{
background-color: #f4f4f4;
}
.container{
padding: 20px;
}
</style>
</head>
<!-- This is file_nav.php -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
<!-- This is file_footer.php -->
<footer>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Service</h5>
<div class="row">
<div class="col">
<p>About Us</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Success Story</h5>
<div class="row">
<div class="col">
<p>Let Me See</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Help</h5>
<div class="row">
<div class="col">
<p>Terms and Condition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- This is file_index.php -->
<!doctype html>
<html lang="en">
<?php include 'file_header.php' ?>
<body>
<?php include 'file_nav.php' ?>
<div>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
</div>
<?php include 'file_footer.php' ?>
</body>
</html>
Your file_header.php and file_footer.php are entire HTML page structures. They should be partials of just the HTML markup you want to include in the place they are PHP "include"ed.
An example of file_header.php without the doctype, head, html tag, or body:
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
The reason your styles are being overridden when file_footer.php is included is because you are again for the second time including the bootstrap CSS in a <link /> tag. Part of the cascading in CSS is that the last declared rule takes priority and so the second inclusion overrides your custom styles.
You should include your bootstrap <link /> tag in your file_index.php head only.
This question already has an answer here:
laravel blade #include not working
(1 answer)
Closed 5 years ago.
I am learning larval and following video on laracasts.com , In lecture 10 regarding layout and structure , I was trying the #include but it is not working .
Below are my files :
/views/layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Album example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href=" {{ URL::asset('css/album.css') }}" rel="stylesheet" >
</head>
<body>
<div class="collapse bg-inverse" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
#inlcude('layouts.nav') <!-- This is not working -->
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
Main call to action
Secondary action
</p>
</div>
</section>
<div class="album text-muted">
<div class="container">
<div class="row">
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card">
<img data-src="holder.js/100px280/thumb" alt="Card image cap">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</body>
</html>
/views/layouts/nav.blade.php
<div class="navbar navbar-inverse bg-inverse">
<div class="container d-flex justify-content-between">
Album
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
/views/posts/index.blade.php
#extends('layout')
Route is properly set:
Route::get('/','PostsController#index');
That's because that file is not in the app/views directory.
When you call #include('layouts.nav'), Blade automatically looks for any file with that name, inside the app/views directory.
Blade looks for the files in the paths array in /app/config/view.php , Adding one more resource path does the trick as following:
'paths' => [
resource_path('views'),
resource_path('/../views/layouts')
],