Very quick question. I am building a site and have the header and footer as PHP includes. Is there a way to have separate external stylesheets for the header, footer and index without one overriding the others.
In your case You can try the following method:
header.php
<?php
//..some code
$style = 'main.css';
?>
somefile.php
<?php
include 'header.php';
$style = 'xx.css';
?>
index.php
<link rel="stylesheet" type="text/css" media="print" href="<?=$style?>" />
You need to have three different css files, one for each of (Header, Body and footer) and the name of Ids and Classes must be unique.
Related
So I have a webpage where I use the same header/footer for every page:
<?php include 'header.php?>
In header link to css looks like this:
<link rel="stylesheet" type="text/css" href="styles.css">
they both are in the same folder.
Problem:
When I try to load page in another folder (products/page.php) - the assets wont load properly. I put a link to header like this:
<?php include '../header.php' ?>
header and footer loads properly but the assets defined in them do not.
How can I fix the paths so I would not need to copy same files to every folder.
Sorry for noob question :)
A pssible solution is to use absolute paths:
<link rel="stylesheet" type="text/css" href="/styles.css">
This way your assets are indepent to your phps structure.
So I've recently discovered how to use php includes to include a footer and header in each of my files to avoid copy pasting all the header/footer code to each file. But let's say I have a footer.php, header.php, home.php, and about.php
Do I have my title, opening html/body tag, etc. in the header.php or home.php and about.php.
//header.php
<html>
<head>
links to header.css
links to home.css
links to about.css
</head>
<body>
//home.php
<?php include("header.php"); ?> //PROBLEM: the header.php also includes other .css such as "about.css", etc. that could result in problems later.
</body>
</html>
What Should I do to fix this? One way I thought of is to remove the beginning part(html,head,title) of the header.php file and move it home.css and about.css so they each have their own css links.
You're on the right track. Break out the stylesheets as well as the javascripts into other php files and include them as well. So all pages have the following structure.
home.php
<?php $this_page = "home.php";
include "template.php";
For other pages, just replace the $this_page variable. The structure common to all pages is actually the template.
template.php
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- CSS-->
<?php include "stylesheets.php" ?>
</head>
<body>
<!-- common header -->
<?php include "header.php" ?>
<section>
<!-- PAGE CONTENT HERE determined by $this_page value -->
<!-- 'content_home.php', 'content_about.php'... have the content-->
<?php include "content_$this_page" ?>
</section>
<!-- common footer -->
<?php include "footer.php" ?>
<!-- link javascript files -->
<?php include "scripts.php" ?>
</body>
</html>
The only thing that changes from one page to the next is the value of $this_page. It's what determines which content gets loaded in the template above, and it also determines which CSS and JS files to include.
stylesheets.php
<?php
$cssDir = "path/to/styles/"; //folder where all CSS files live
//Link each page to its CSS file
$styles = [
'home.php' => 'home.css',
'about.php' => 'about.css',
'contact.php' => 'contact.css',
];
?>
<!-- CSS common to all pages -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/$styles[$this_page]"?>>
The same approach can be used with the javascript you link to in scripts.php. Now that your HTML is into discrete modules, it is easy to edit a part of your site without worrying about another part breaking. In particular I recommend never to open a tag in one php file and close it in another because that would be a nightmare to debug, maintain and modify as your site gets bigger.
About paths:
Remember that when the browser sees the page, in place of include "stylesheets.php" and include "scripts.php", it will see the echoed contents of that file exactly as they are. So in those files you want your path to be either:
absolute paths from your domain root (simplest)
relative paths from the location of the top-level php file (eg home.php)
just the file name, if it is located in PHP's include PATH (places where PHP looks for content by default before throwing an error)
For header and nav you have to create a seperate file like nav.php which will contain only the nav and your site header not <head></head> and include it after your header.php. LIKE
//Home.php
<?php
include("header.php"); this will contain your head part mostly your .css and .js files
include("nav.php"); This will only contain header and nav
// home.php code goes here
?>
Also use below code will automatically get path to your root.
<?php
$PATH = "http://localhost/Folder/"; // change this when needed
$PAGE = basename($_SERVER['PHP_SELF']);
?>
Then Add your files like this
<link rel="stylesheet" href="<?php echo $PATH; ?>assets/plugins/font-awesome/css/font-awesome.css">
the bottom line is your code being accessible & easy to maintain, I would have a head.php, header.php & footer.php file. In the head.php you may want to include your config.php if you are connecting to a database & also have all the <html><head><title><link><script> tags you will include in every page then on your index.php or home.php
include('head.php');
include('header.php');
etc etc
I wonder whether anyone could help me resolve some problems I'm having in creating a website using HTML, CSS...and PHP for the first time. (My previous attempts at web design were only in HTML and CSS).
The problem at present is that my home-page (index.php) somehow isn't 'seeing' my stylesheet.css.
The code for the index.php is basically as follows :
<?php
$page_title='Home';
[php-code here, to call in include1.php.....Please see below for details]
?>
<div class="copy">
[page content here, in html]
</div>
<?php
[php-code here, to call in include2.php.....Please see below for details]
?>
My folder structure is :
web
css
stylesheet.css
images
logo.png
includes
include1.php
include2.php
index.php
In attempting to call in include1.php (containing doc type declaration, and Head section including reference to stylesheet.css), I've tried the following (inserted between <?php and ?>, as shown above), all without success :
$pathtoinclude1 = $_SERVER]'DOCUMENT_ROOT'];
$pathtoinclude1 .= "/includes/include1.php";
include_once($pathtoinclude1);
and
include('/includes/include1.php')
In include1.php, my reference to the stylesheet.css is :
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css"/>
When I preview the home-page, all I get is the text in default font (Times New Roman?). None of the styling via CSS is being applied.
Can anyone give me some pointers as to what I'm doing wrong?
If that first answer doesn't work, try replacing
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css">
with <?php include 'style.php'?>
And then in the style.php file include the <style> tags and then add the css regularly.
Since you say you are using php for the first time, make sure you have the correct html declaration.
although you have already worked with html,css just a reminder:
<?php
$page_title='Home';
[php-code here, to call in include1.php.....Please see below for details]
?>
<!DOCTYPE html>
<html>
<head>
<!-- MAKE SURE YOU'RE INCLUDING THE
EXTERNAL CSS FILE HERE BUT NOT TO INCLUDE YOUR PHP INCLUDES!
WHICH ACCORDING TO YOUR FILE STRUCTURE SHOULD BE -->
<link rel="stylesheet"
href="../css/stylesheet.css"
media="Screen"
type="text/css"/>
</head>
<body>
<div class="copy">
[page content here, in html]
</div>
<?php
[php-code here, to call in include2.php.....Please see below for details]
?>
</body>
</html>
When you include() the file from index.php, the path looks like:
<link rel="stylesheet" href="../css/stylesheet.css" media="Screen" type="text/css"/>
This path is going one directory back from index.php which is not a valid path. Your path in include1.php should look like this when you include it in index.php:
<link rel="stylesheet" href="css/stylesheet.css" media="Screen" type="text/css">
Also, if CSS includes properly but styles still do not show up, try removing browser cache.
Try this. It worked for me
Let's assume that you CSS file is named 'css.css'
And it is located in the same directory with you home page.
Just add this at the head tag:
Head
Style
<?php include('css.css') ?>
style
head
Don't forget to add corresponding tags
I have top section and footage section common on all pages of my website. I have css classes defined for these sections. What I want to do is to create common file of classes of these two sections and use it on every page, so that if I want to edit something in this section, I have to do it at one place only.
I have different css for middle section of each web page. So if I want create one common css file for top and bottom section, I have to have two css files for one web page. So my real question is can I have two css files for one web page? If yes, how to include and manage them? If no, is there any way to achieve my purpose?
And the best solution will be if I don't need to change html of each page also. If I can create an html page which has top and bottom section. And use this html page on every web page. It will be very useful, as it will save many edits, if I want to change something.
It is not a problem to link two different style sheets:
<link rel="stylesheet" type="text/css" href="commonStyles.css" />
<link rel="stylesheet" type="text/css" href="specificAboutUsPageStyle.css" />
You can have multiple CSS files for a web page, like so:
<link rel="stylesheet" type="text/css" href="header_footer.css"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
Within the header_footer.css, define your styles, for header and footer.
Since your using php (according to your tags) as your scripting language you can use php includes to create your header, main content and footer.
Page: MainContent.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="headerStyles.css" />
<link rel="stylesheet" type="text/css" href="mainStyles.css" />
<link rel="stylesheet" type="text/css" href="footerStyles.css" />
</head>
<body>
<?php include("header.php"); ?>
<p>Main Content</p>
<?php include("footer.php"); ?>
</body>
</html>
Your header.php and footer.php then contain your code for those respective pages.
Personally I wouldn't recommend separate style sheets as it will increase your page load time because the client needs to make separate calls to retrieve these files. I'm sure you have common styles and creating one stylesheet will be more efficient to maintain.
So I'm dividing my index.php page into three sections: top, middle, bottom. The middle section will have different html php inlude pages and therefore will require different style sheets. Do I link the specific stylesheets in the individual php include pages, or in the index page? Because in the index page, the different style sheets don't seem to take effect, why is that?
Say your about page has a custom css file it needs you could do something like this:
about.php
<?
$css = array('path_to_css_file', 'path_to_another_css_file');
require_once('header.php'); // aka the top
?>
[about page content goes here]
<?
require_once('footer.php'); // aka the bottom
?>
The in your header.php file you could do this:
header.php
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main_style_sheet.css" />
<?
if (isset($css) && is_array($css))
foreach ($css as $path)
printf('<link rel="stylesheet" type="text/css" href="%s" />', $path);
?>
</head>
<body>
This way you only load what you need for the given page.