I intent to create a template PHP file, this template will only serve the design, not the content. The purpose is to decrease the development time in a sense that when creating a new PHP file or new module, I can only need to concentrate on the main function of that PHP file not the design. Once I created the new file using the template, it should be able to display the consistent design and serve its specific function.
The issue is that I am not sure on how to make the design of the template works and applied to all of the new files created regardless of the location (as long as it is within the root directory).
As an example:
root directory (www.example.com): /
homepage (www.example.com/index.php): /index.php
css file: /style/style.css
template file: /template.php
newly created file (www.example.com/subone/find/css/file.php): /subone/find/css/file.php
another newly created file (www.example.com/subtwo/locate/css.php): /subtwo/locate/css.php
Content of the homepage (which is created base on the template.php, but the CSS file location is hard coded):
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here;</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here; </div>
</body>
</html>
but, when I created a new file, /subone/find/css/file.php
the location of the css must be changed and specified manually, like this:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here;</div>
</body>
</html>
So, what I want to achieve is that, when creating a new file (/subone/find/css/file.php), I don't need to do anything, I can straight away concentrate on the main section:
<html>
<head>
<title>Testing</title>
...style.css is handled automatically
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;
<?php
//I can continue to edit the file from this line onward
echo "I am concentrating on the main function of file.php right now!!";
?>
</div>
<div id="footer">footer goes here;</div>
</body>
</html>
example page can be seen at (only the desired design): neoborn.kodingen.com
I accept any answers as long as it can achieve my intention (template).
Thank you :)
Why don't you use absolute paths when referring to CSS files and other resources in your template file?
For example:
<link rel="stylesheet" type="text/css" href="/style/style.css" />
There are 2 options,
Use absolute paths for your css files <link rel=stylesheet href="/style/style.css">
Use HTML's <base> element to cause all relative paths on the page relate to it.
I would use a easy to install template engine. That will help speed up development and still give you the freedom to do whatever PHP you like.
Try http://www.raintpl.com/ that should be quick and easy for you to install and get back to coding the pages. If you include it in your PHP inc folder, it will be available for every PHP file you create. So you won't need to add an include line at the top of each PHP file.
Index.php
<?php define('BASE_URL', 'http://localhost'); ?>
Template.php
<link rel="stylsheet" type="text/css" href="<?php echo BASE_URL; ?>/style/style.css ?>" />
Related
I have an HTML "chunk" of code with HTML and JS in it so I could easily include it with PHP. I also want it to have CSS styling but according to standards you are not "allowed" to do that - while it works it makes the page invalid. CSS is only allowed in <head> and not in the middle of the page (not untill HTML5.2 at least). So I thought about appending similarly named but separate .css file in the head, but with PHP and not JS (for performance sake)
<head>
<!-- PHP needs to include button.css here AFTER $App->INC("button"); has been called -->
</head>
<body>
<?php
$App->INC("button");
//This basically does 'require_once("button")';
//What do I need to add to the INC method to include css file in the head?
//Similar to $("head").append() but with PHP
?>
</body>
css file with the same name should be added to a <head> section.
PS:
This may seem as a design flaw and may as well be but here is the thought behind this.
I have a piece of code that when included in the right place of the
body generates a "loading screen" (or other UI elements that
can't/shouldn't be nested anywhere else but in the <body> of
the website.
It's got styling in a separate file
I send it to other user
They include it with a method of an "App" class which only does two
things: includes the file itself and css file nearby
Then they only use 1 line of code to put it where they want it and
not in 2-3 other places so the code is more manageable
Example:
You may try this:
<?php
ob_start();
$App->INC("button");
$button = ob_get_clean();
?>
<head>
<!-- Do your inclue here -->
</head>
<body>
<?= $button ?>
</body>
You can put the ob_start() / ob_get_clean() stuff inside button.php and return the content via your INC() method. Then you can save the content directly into $button like this: $button = $App->INC("button");.
But your example looks like a design problem. However I hope this will do the trick.
This could be a possible redesign:
<?php
$App->loadModule('button'); // Loads the module, the module registers stylesheets and content.
$App->loadModule('another_module'); // Load more modules ...
<head>
<?php $App->renderModuleStylesheets(); ?>
</head>
<body>
<?php $App->renderModuleContent(); ?>
</body>
If you include the CSS directly in the component itself, or expect the component to dynamically load the relevant CSS, then it could be quite difficult to maintain or customize. I am not saying you shouldn't go this route but be careful about asking your components to do too much.
A hook system as pointed out in the comments is one way to handle this.
Another simple way is to provide default styling which users can override. This is probably the simplest way to allow different styling for each component.
<head>
<!-- Provide some defaults. Users should not customize this one. -->
<link rel="stylesheet" type="text/css" href="default.css">
<!-- User's can customize this file to override the default styling.-->
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<?php $App->INC("button"); ?>
</body>
button.php - is only responsible for rendering a button. The separate CSS files will actually style it.
<?php
echo <input type"submit" class="button" value="Submit">
default.css - applies default styling
.button {
color: blue;
}
custom.css - overrides the default styling
.button {
color: red;
}
Final note, you may also want to look into using a main template file which sub-views inherit. This helps to reduce the number of full HTML files which link to your CSS files. The idea is to have 1 (or a few) template files that views inject themselves into. Here's some pseudo code.
frontend.php
<html>
<head>
<!-- Links to CSS files here. -->
</head>
<body>
<?php $placeholder('body'); ?>
</body>
Login.php
<?php inherits('frontend.php')->body; ?>
<form id="login">
...
Register.php
<?php inherits('frontend.php')->body; ?>
<form id="register">
...
About-Us.php
<?php inherits('frontend.php')->body; ?>
<p>About Us</p>
...
I want to separate my code to make it clearer. To do so, instead of having one big php file I spare them and keep one "main" file where I include the others when I need. The problem is that CSS only apply to the "main" file, but not to included files.
I'm pretty sure this is not a path issue, for I'm working with every files in the same folder (I know it's not the best way to work, but so far I only have few files so it's not a big deal). I have double checked eventual writing mistakes.
Here is my "main" php file :
<!DOCTYPE html>
<html>
<head>
<title>A very nice title</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<body>
<?php include("file2.php"); ?>
</body>
and here is my "file2.php" file :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset="utf-8" />
</head>
<div class="beer">
<img src="simple_beer.png" alt="beer picture"/>
<div class="description>
<p> a simple text </p>
<form id="add" action="[nothing interesting]">
<input type="number>
<input type="submit" value="add to card">
</form>
</div>
</div>
So i'm using the same CSS files for both php files. But it's not working on the file2.php when I have a look at it (I'm working on a local host). I've tried to delete cache from my browser (firefox). If you're wondering why I'm working on php files instead of HTML, it's simply because I intend to add php code later.
I have been looking for a solution for almost two hours, nothing seems to work. Thanks in advance !
Include everything header-related inside main.php file, remove head section from file2.php and then include file2.php in the body section of main.php. When you include that file, it will get everything that is above. That means whatever you have in main.php before include() function, will be accessible in called file (thanks to that you can link everything once and have it available in all called files).
Include() brings full code structure from the called file which you do not need (talking about head tag) if main file will hold everything that you need inside tag.
I want to add a css file to my template. I created the template.php into the folder : kohana-v3.3.5\application\views. Into this folder, I created an other folder called "css" and inside it, there is my styles.css with some code.
For now, my template file is :
<html>
<head>
<link href="/css/bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12 banner">
Persyst
</div>
</div>
<?php echo $content; ?>
</body>
</html>
I don't understand why the links for my css files aren't working.
I saw something with HTML:style() but it doesn't work either.
Thanks for your help !
Using HTML::style() is a good idea. The reason why it fails is because you put the assets folder inside the template folder. The latter is outside of web access (or should be) and is only used internally.
Kohana routes everything through the index.php file, so this is the level your stylesheets, scripts and images belong.
<html>
<head>
<?php
print HTML::style('vendor/bootstrap-3.3.6-dist/css/bootstrap.css') ."\n"
. HTML::style('assets/css/styles.css');
?>
With a directory structure like
application
modules
system
assets
css
js
vendor
bootstrap
I recently asked a question about my php includes and received the answer. Now that the include accesses the correct file, my html/css/javascript web pages show some hope. The only issue is that the php includes of the pages have this look:
Instead of this:
Is there a way for the php includes to access the css files? My current code for one page that contains the includes is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="main.js"></script>
<title> Water Polo, The Best Sport</title>
</head>
<body>
<div class="wrapper">
<?php
include'../includes/header.php';
?>
<?php
include'../includes/navbar.php';
?>
<div class= "content">
</div>
<?php
include'../includes/footer.php';
?>
</div>
</body>
</html>
Header.php
<?php echo'<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2></div>';>
To develop the website I am currently using MAMP and running the code which is in a folder by putting it in htdocs.
I took the header out of the php include and made the css file work with the document, but one thing remains the same. The code that I included in the document via php does not take on the effects of the css document, but the header, which now is out of the include and is written write in the document works. Is there a way to allow the code which has been included via php to access the working css file? If it would facilitate the answering process, I'll post any necessary pictures. Just comment below.
You have correctly identified the problem, that the HTML cannot find the CSS. That is directly because of this tag:
<link rel="stylesheet" href="styles.css" type="text/css" />
Specifically, this part of the tag:
href="styles.css"
You have told your code to look for the styles.css file in the same directory as the index.php file. Is that correct?
Usually, the web site structure looks like this:
public_html
- css
- js
- includes
- img
Your website seems to be structured like this:
includes
public_html
Imagine yourself inside the index.php file. All files that are INCLUDEd become part of index.php, as if they were there originally. So, you are expecting to find the CSS file here (as per your <link rel="stylesheet" tag):
public_html/style.css
If they are really inside a CSS folder, then perhaps this will fix it:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Update:
No need to echo out your HTML in PHP, you can literally just do this:
header.php
<div class ="header">
<h1>The Best Sport</h1>
<h1 class="sitetitle">AllWaterPolo</h1>
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" />
<h2 class="homeScreenLink"> Water Polo!</h2>
</div>
If the other include files are similar, then it appears your rendered file will all be HTML. Therefore, the next step is: where is your style sheet? Try this. In the address bar of your browser, type:
localhost/styles.css
And see if your stylesheet appears. If not, try this:
localhost/css/styles.css
If the second one works, then change this:
<link rel="stylesheet" href="styles.css" type="text/css" />
to this:
<link rel="stylesheet" href="css/styles.css" type="text/css" />
Note: I might not have your path structure correct. Amend as required.
Short answer = no.
You may want to look into using SASS. Besides minifying the css files, you can also set it up so the main (in your case styles.css) pull from several SASS files. For example you could have the following SASS files: main.scss, header.scss, navbar.scss, & footer.scss. If your IDE supports SASS, when you save any one of these files it can automatically compile all four into your styles.css file. Then all you need is to reference that one file and you are set.
http://thesassway.com/beginner/how-to-structure-a-sass-project
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