I am trying to create different style sheet for my pages.
I have a set header file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="/includes/main.css" rel="stylesheet" media="all"/>
</head>
<body>
then I have my main body page, I will have main.html, project.html, contact.html …etc
//php load different pages for my body
<div>….
and a footer page.
<footer>…
My question is how to swap the css file to adapt different pages for my main body page. The header and footer files are the template and I don't want to change the css file every time I load a new page. How do I accomplish this? Thanks a lot!
One simple way of doing it is by using a php function called "basename".
If you have 3 pages main.php, project.php and contact.php, you can load different resources depending upon the name of the page you are viewing.
For example
echo ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<?php if(basename($_SERVER['PHP_SELF']) == 'main.php'){ ?>
<link href="/includes/main.css" rel="stylesheet" media="all"/>
<?php }
elseif(basename($_SERVER['PHP_SELF']) == 'project.php'){
?>
<link href="/includes/project.css" rel="stylesheet" media="all"/>
<?php } ?>
</head>
<body>
Related
I am trying to create a PHP file that will contain scripts, css links and resources just like I have header.php and footer.php. However, when I create that file and include it in my <head> it does not apply to the page in question.
I have tried including it in <head> tags and <body> tags above the PHP include header.php but still no results. I tried different formats as well.
<?php include 'includes/scripts.php'; ?>
<?php include ('includes/scripts.php'); ?>
I want to inlcude files such as:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
header location for the code
index code location
scripts file
In your header.php file, and script.php file remove the <HTML>, <HEAD>, <BODY> tags, and also remove the <meta charset="utf-8">. In both of the files, keep only what you want to include into your index.php file.
You do not need to include the script.php file in the header.php file, instead include it only in the index.php file.
So you can keep only these things in your script.php file:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
Also in your header.php file you can keep only the contents which is wrapped with the <nav> element, and finally include the both files in your index.php file as below:
<!DOCTYPE html>
<html>
<head>
<?php require('includes/script.php');?>
</head>
<body>
<?php require('includes/header.php');?>
// your rest of your elements here
</body>
</html>
Building fresh from Bootstrap 3.3.4. Nav dropdown works fine on pages in the root directory, but when I call the nav in the header in a directory using:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/header.php');
?>
It pulls everything but the dropdown navs don't work.
Any ideas what could be causing it?
It seems you are calling only the header part of your page. The bootstrap and jquery breaks if their code is inserted in the page more than once. Hence,
make sure that you are calling the bootstrap libraries and relevant jquery libraries in right order and only once in any page.
Something like this :-
<!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 href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--You code -->
</body>
<!-- javascript files-->
</html>
My crazy web teacher requires a doctype.php file to be in each of my webpages to avoid repetition, like this:
<?php include 'doctype.php'; ?>
However, I also need a different title for each page.
<head>
<title>Activities at Pacific Trails Resort</title>
</head>
This doesn't pass in http://validator.w3.org/. How do I include the doctype and the title?
In your doctype.php page add the following:
<!DOCTYPE html>
(The trailing empty line is intentional, you will need to ensure it exists in the doctype.php file.)
In each of the other pages, they should look something like:
<?php include 'doctype.php'; ?>
<html>
<head>
<title>Activities at Pacific Trails Resort</title>
</head>
<body>
<!-- content -->
</body>
</html>
Then when you visit each page, the output will be something like:
<!DOCTYPE html>
<html>
<head>
<title>Activities at Pacific Trails Resort</title>
</head>
<body>
<!-- content -->
</body>
</html>
you could always make yourself a little function for the start of your page and pass the title as a variable. You would put the function in your config.php and then all you have to do is require "config.php" and start your page with startPage("your title").
function startPage($title)
{
echo<<<END
<!doctype html>
<html>
<head>
<title>$title</title>
<link rel='stylesheet' href='css/admin.css' type='text/css'>
</head>
END;
}
ETA: I've gotten 2 down-votes for this but no explanation why. It might be breaking php's style guidelines because I'm echoing html? Not sure?
I have a php file that doesn't (for now) use any php code, that holds code for the header and main menu that will be used across all pages. The CSS file has no effect, even though I've created a style class for h1. The text "TEST" shows up, but the style is not applied. How do I properly include the CSS file?
mainMenu.php
<!--This code is included within the <head> of each page, and the stylesheet for the header and main menu are included here-->
<link href="styles/headerMenu.css" ref="stylesheet" type="text/css">
<!--Header and menu code-->
<div>
<h1>TEST</h1>
</div>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>untitled</title>
<?php include ('./includes/mainMenu.php') ?>
</head>
<body>
</body>
</html>
The CSS file is not found. Double check the link and correct it:
<link href="menu.css" rel="stylesheet" type="text/css">
^- REL not REF
Also to prevent additional problems, remove the start and end tags of <head> and <body> from the code. The way you output the HTML elements, you would create wrong HTML if you keep those tags. Remove them and your page will be valid HTML again.
index.php:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>untitled</title>
<?php include ('menu.php') ?>
</html>
Valid HTML has the benefit that you can run it through a validator to spot errors early.
I think it may be because you have got your menu appearing inside your <head> tag.
The CSS needs to go inbetween the <head> and </head> but the rest needs to be inside the <body> tag
<link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
This must be at <HEAD></HEAD>
<div>
<h1>TEST</h1>
</div>
This must be at <BODY></BODY>
You have to separate this file into 2 files and include them in Head and in Body..
Don't include your HTML code in HEAD part. Only include CSS and JavaScript files in HEAD section. and you need to prefix the css or images path in some php file.
E.g.
create new php file with name "conn_path.php"
<?php
define('SITE_PATH',$_SERVER['DOCUMENT_ROOT'].'siteName/');
define('SITE_HTTP_PATH','http://localhost/'siteName/');
define('CSS_PATH','http://localhost/siteName/styles/');
define('IMAGE_PATH','http://localhost/siteName/images/');
?>
And then you path will be like below:-
mainMenu.php
<?php include "conn_path.php" ?>
<link href="<?php echo CSS_PATH ;?>headerMenu.css" rel="stylesheet" type="text/css">
It will help you in whole project…
Create a template file, with your essential (and re-used) html. Also with <html>, <head> and <body> tags and anything you must have in all pages – As your stylesheets and menu.
Then add a content section with a single variable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>untitled</title>
<link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Header and menu code-->
<div>
<h1>TEST</h1>
</div>
<?php echo $page_content; ?>
</body>
</html>
This way, any page content shoud be assigned to $page_content instead of echoed.
In my CodeIgniter application have a common header and footer view, which I include in different views. My header_view is as simple as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php echo $page_title;?></title>
<link rel="stylesheet" href="<?php echo base_url();?>/css/master.css" type="text/css" media="screen" />
<script src="<?php echo base_url();?>js/common.js" type="text/javascript"></script>
</head>
<body>
<!-- end of header -->
Now Lets suppose I have another view called form_view, where I would like to include a CSS file form.css and a javascript file form.js. Since these files are only used in form_view, I don't want to add them in the header_view, because then they will be included in all of the views in my application.
So my question remains, how can I include a specific css or a specific javascript file on a specific view, when using a common header like above.
Thanks.
You could write something like Zend_Bootstrap and run it before views. The bootstrap file will be responsible for setting css and js files so your header will just grab them from an array.
Bootstrap:
$head_array = array(
'css' => array(
'/static/css/style.css',
'/static/css/style1.css'
),
'js' => array(
'/static/js/script.js'
)
)
if($view == 'view_form') {
$head_array['css'][] = '/static/css/form.css';
}
Of course this example is very primitive but it shows the idea.