2

I am new to css & bootsrap. I developed a small website,that has six pages, I separated header and footer in two different php files in order to make life easy. Then I call header & footer in the top and bottom of each page respectively. Based on my requirement I customize some elements design (override bootsrap design) in a separate css file called "custom.css". each time when I bring changes in that file I have to close and re open the text editor in order to see the changes. First I thought it was be due to text editor so I changed my text editor from "Sublime Text to Php Storm";however, the issue has not yet been solved.

below are code snippets of my project:

header.php

 <!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 rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/custom.css">
   <script src="js/respond.js"></script>
 </head>

footer.php

<!-- Footer -->
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
 integrity="sha384-
 KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
 crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd
/popper.min.js" integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" 
crossorigin="anonymous">
</script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

I call the above files into my pages as below: 

<? include ("header.php")?>
   <body>
    <div class="container"> 
      .
      .
      . 
      .   
    </div> <!-- end container -->
 <?include ("footer.php");?>

But if I do not separate header and footer, and write them in one page I can see changes immediately, I don't have to close and re open my text editor in order to see changes.

Could you please help me

omar
  • 23
  • 2
  • Could you outline your exact deployment procedure? Say you change a color in custom.css, then you save it, then you upload it (or do you test locally?), then you refresh your browser (strg+f5, force cache invalidation), then you don't see the changes? Then you restart PhpStorm, then you reload the page, then you see the changes? – Pharaoh Sep 27 '17 at 10:00
  • I test it locally. And the procedure you mentioned I go through each and one – omar Sep 27 '17 at 10:48
  • and the local server that I use is "OpenServer" – omar Sep 27 '17 at 10:57
  • Are you sure you refresh your browser cache? I suspect it's a browser caching problem. – Pharaoh Sep 27 '17 at 11:42
  • No, I would not refresh browser cache. I was ignorant of that. I just did it and it works. Should I refresh the browser cache each time ? – omar Sep 27 '17 at 11:47

2 Answers2

1

As determined in the comments, it's a problem with your browser cache.

You either

  • need to refresh the page with CTRL+F5 (but this depends on your OS and browser) or
  • you instruct your local server to forbid browser caching in your development environment (don't do this on production!).

To prevent browser caching, instruct your webserver to send the appropriate headers. There is a nice answer here: How to control web page caching, across all browsers?

You'll need to know how to configure your webserver - I don't know OpenServer.

Note that it is not enough to add the headers in your PHP script because you need the headers to be sent with the static CSS file.

Pharaoh
  • 3,329
  • 4
  • 21
  • 43
  • Thank you very much for the useful instructions. I could not understand your last point "Note". Could you please elaborate it further ? thanks in advance – omar Sep 27 '17 at 13:46
  • In your situation, you can't use the PHP method outlined in the link (using `header()`). You need to tell the webserver (OpenServer as you said) to send the headers with static files, in particular your CSS file. – Pharaoh Sep 27 '17 at 16:56
  • Could you possibly instruct me who to tell the webserver to send the header with static files? as I mentioned I am in learning process, your suggestions opened my eyes to many new topics, which I was ignorant of. – omar Sep 27 '17 at 17:13
  • No, I am sorry. I don't know OpenServer. But you can ask a new question about that - just be sure to describe your setup precisely (server version, etc.). If I answered this question here, you can accept the answer with the tick beside it. – Pharaoh Sep 27 '17 at 17:18
-1

Below code works perfectly

<?php include_once('header.php');?>
<body>
  :
  :
  :
some code

<?php include_once('footer.php');?>
sarvesh
  • 432
  • 4
  • 11
  • Yeah, it does. The problem is that whenever I add new style in the "custom.css" I have to restart my text editor. I was wondering if there is any solution for it – omar Sep 27 '17 at 10:46
  • I have a folder called "css" in that folder I have bootsrap and my customized css code – omar Sep 27 '17 at 11:11
  • which text editor do you use and also check the css linked directory . If problem arises try using brackets or sublime editor – sarvesh Sep 27 '17 at 11:13
  • as I mentioned in my question that I use both "Sublime and PHP Storm" in both I have the same problem. I think the problem is somewhere else. As I mentioned that if I don't separate the header, body content and footer, everything works fine. Even I don't have to restart the text editor. – omar Sep 27 '17 at 11:17
  • This is not an answer. – Pharaoh Sep 27 '17 at 11:50