How to include template with css to all pages on website


Tags: php,html,css,templates

Problem :

I have created a template.html that contains the header, navigation and footer, and i want to include that to all my other pages: html/php files on the website without having to copy all the code to all other files. Is there an easy way to do this? or is there a more proper way to handle this? I've already tried to require the page with php, but it didn't take any of the styling.

UPDATE: I ended up switching to using include function. I needed to use php in my html and if you echo out php script the code is just gonna be commented. I found that the best was using include for head, header(and nav) and footer. However to avoid making multiple opening and closing html tags, I formatted it this way:

head: <html><head>
-content for head
header: </head><body><header></header>
-content between header and footer
footer: <footer></footer></body></html>


Solution :

I'd organize my different scripts so that they are all called from an index.php (if not already done). Then, just before the logic which constructs the pages I'd include the header and nav, and the footer after.

here's a template:

<!DOCTYPE html>
<html>
<head><!-- here your header --></head>
<body>
~
<!-- here your navigation? -->
~
</body>
</html>

I put those '~' to be able to explode it:

$template = explode('~',file_get_contents('template.html'))
// that way we have our code in an array we can easily use for header, navig and footer
$html = $template[0]; // header
$html.= $template[1]; // nav

switch($action) {
case 'foo':
  $html.= file_get_contents('foo.html');// just add directly html content
  break;                                // careful that it does not have <body> tags
case 'bar':
  require_once('bar.php');
  $html.= showBar(); // if you have a function in your script, you can add it to your page that way
  break;
}

$html.= $template[2]; // footer

if your other scripts echo out content directly, change $html.= with echo


    CSS Howto..

    How to make a image css not move at text?

    CSS block link - how to get it work properly?

    jQuery how to rapidly change color on divs with click

    How to get text within div to be relative to the div's width and height, CSS, HTML

    How do you customise HTML select option menus? [duplicate]

    How can I apply a link over this entire div?

    How can we control the size of a special character?

    How to align an image to the center with css?

    How to change link color when using jquery mouseover

    how to combine the css selector using “:not”

    how to animate icon fa-circle using CSS to look as recording video blinking red dot?

    Hovering over navigation link to show a separate div

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    How to extend a div's width beyond its wrapper?

    How to 'clip away' part of a div using CSS?

    Why is last select option always shown, even when styled out

    How to display data from a file on website load? [closed]

    How to transform a button into this styled button

    Show on hover using CSS and HTML only

    how do i get css source file path from firebug?

    How to define multiple CSS attributes in JQuery?

    How to use Firebug to easily find which css file defines a particular style

    How to Make a Dropdown In a Navbar Using CSS?

    How to vertical align element relative other element with pseudo-class? [duplicate]

    How to add-class and focus the children on keydown function

    Span tag is shown as text in Drupal Bootstrap subtheme

    How to place a css button in center (horizontal) of four table columns

    How do you position divs on a line with space in the middle, without fixing the width of the container?

    How to select multiple objects of a class for css manipulation

    How to remove “padding” from ionic card