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:
I tried:
<?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>
</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>
<?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>
<a href="#" class="btn btn-info">Read more</a>
</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>
<a href="#" class="btn btn-info">Read more</a>
</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>
<a href="#" class="btn btn-info">Read more</a>
</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>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<?php include('./_includes/_foot.php'); // include footer markup ?>
<?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>
<a href="#" class="btn btn-info">Read more</a>
</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>
<a href="#" class="btn btn-info">Read more</a>
</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>
<a href="#" class="btn btn-info">Read more</a>
</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>
<a href="#" class="btn btn-info">Read more</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Third columnn-->
</div>
<!--/.Second row-->
</div>
<!--/.Main layout-->
</main>
<?php include('./_includes/_foot.php'); // include footer markup ?>
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.