Interface/Layout change question

**kensha** · 01-03-2013 04:30 PM

Hey everyone I am wondering something.

I recently made mine admin section and the login page to progress to the admin section.
Coding up the forum for the query in mysql is going fine but here is mine main point question.

For example you got:

Code:

<html><head><title></title></head>
<body>
Content in here
</body>
</html>

So that's the most basic approach of starting a single html/php page until.....
I insert mine div names for the layout style that's linking to mine css.

So later I off course have made more like 50 pages and every page might have the include page or the div name on that page.

Now I'm wondering, what the hell must I do when I am going to change mine entire layout.
It might be 2 years later or 2 months but I rather be ahead of mine time and I know if I am continuing like this then I will have a lot of work just for changing a layout.

A load of content is going in to mine query, also the links but what to do with the divs?
How do I get it all to 1 page. That I only need to change instead of 50 pages to change the layout?

Maybe I am thinking wrong and I hope you understand mine issue and may be have the solution.

**Sup3rkirby** · 01-03-2013 07:01 PM

If I understood you correctly, it seems what you want is to create a set of PHP template files that you can simply include in to your pages. Then when you need to change things in the design you won't have to edit every page that uses your styling, just the main template file (which is included in every page).

Basically, you start with something like this:

PHP Code:


<?php

include("template/header.php");

?>

<!-- HTML Content for the page goes here -->

<?php

include("template/footer.php");

?>

PHP Code:


<!DOCTYPE html>
<head>
  <title>Your Website</title>
<link href="style/css.css" type="text/css" rel="stylesheet" />
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>

PHP Code:


&copy; Copyright 2012. All Rights Reserved.
</body>
</html>

You could also just include() a 3rd file (in between the header and footer) which would be a page with only content.

And so essentially this template loads a single header (and footer) in to every page you include it on. If you need to change the stylesheet for every page you just edit the header. And for more complex templates/layouts just use more include() files that break up your page in to sections. This way you can easily edit the sections of your layout by editing a single file.

**kensha** · 01-04-2013 04:26 AM

Alright at least you understood mine question but now to get things a little bit more width.

This is mine basic layout.

Code:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="header">Logo</div>
<div id="leftMenu">Links</div>
<div id="contentMenu">Content in here</div>
<div id="footer">bottom stuff</div>
</body>
</html>

How would you split it that I don't need to insert the div header. I would like the page template be empty, beside the includes.

Thanks in advance.

**Sup3rkirby** · 01-05-2013 10:35 AM

Well assuming you don't want those header and footer div tags at all for your main/basic template, you'd end up with something like this:

Main template file for each page:

PHP Code:


<?php
include("template/header.php");

// Replace this page1 include with the page file
// that contains your page content for each
// page you create
include("pages/page1.php");

include("template/footer.php");
?>

header.php file:

PHP Code:


<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

footer.php file:

PHP Code:


</body>
</html>

The page1.php (or any page) file:

PHP Code:


<div id="header">Logo</div>
<div id="leftMenu">Links</div>
<div id="contentMenu">Content in here</div>
<div id="footer">bottom stuff</div>

A couple of things to mention would be that while your header.php does not have a title for the page set, you can include javascript in the page1.php (or any of the pages) to set a window.document.title value based on which page was loaded.
Also the folder and file names can be whatever you want, I merely set them up this way because it helps to organize the template files.
Also, the page1.php isn't actually needed as you could code each page with only a header and footer, placing the content directly in the main template as html (using less files as well):

PHP Code:


<?php
include("template/header.php");
?>

<div id="header">Logo</div>
<div id="leftMenu">Links</div>
<div id="contentMenu">Content in here</div>
<div id="footer">bottom stuff</div>

<?php
include("template/footer.php");
?>

Hopefully I've made this a bit more clear. If not feel free to ask more questions.

**kensha** · 01-06-2013 05:25 AM

I understand the idea however imaging when I got like 50 pages of content.
That means I got 50 pages with all those div names.

I am more wondering, is php able to detect all files containing a certain word or scented?
So that I can add an additional div name on all of those pages.

**Sup3rkirby** · 01-06-2013 11:58 AM

You shouldn't be needing to make such drastic changes in a template for any website such as modifying element IDs or really even the class names.
For instance, if you need to change the entire layout of the site then you would work on editing your 'main.css' file instead of modifying every individual page. Using CSS you can easily rearrange an entire page's layout, color template and format. Things like this are done all the time in responsive layouts that change a page's design based on the device loading the page, rather than loading an entirely new template.

And even if for some reason you want to make things more complicated you can always go with the first example, using a 'page1.php' file (as well as page2.php, page3.php and so on). This would mean your main template files would never change, only the files added with include().

It's entirely possible to have PHP read a set of files and find certain words, sentences or phrases and then modify the file. However, it would be a terribly inefficient way of handling things.

Think of your page in terms of sections or 'modules'. You have certain modules that are included on the page, for example: your site's name/logo, a navigation bar or menu, page content and a footer. These things would be on your site regardless of which layout/template you use. They are a part of your site's basic design and so those things would not need to change just because you change your layout/template. Instead, those things would be rearranged on the page. They'd be placed in different positions and have different widths/heights as well as different color schemes and styles. So instead of worrying about editing 50 files you should be designing the pages with elements and class names that allow you to control the page's layout via CSS and not basic HTML ordering.

These sorts of things are done all the time with forum and blogging softwares such as phpBB or Wordpress. The pages are made up of individual template files and the page is merely broken up in to sections or modules. When you want to change the layout/template, a new set of files merely rearranges the sections/modules and changes color schemes, images, etc. The page still loads using the same div tags and any other elements and simply alters the CSS styling for these elements to achieve a desired layout.

**kensha** · 01-07-2013 02:04 AM

Alright so this is what I currently have done:

The content template:

Code:

<?php include("header.php"); ?>


<div id="contentMenu"></div>


<?php include("footer.php"); ?>

The header content

Code:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>


<div id="header"></div>

<div id="leftMenu"></div>

The footer content

Code:

</body>
</html>

And I finally understand you correctly.
When I add another menu, I either add it in mine header or footer depending on it's position that will be placed on the page.
Thanks to the CSS I can then move the div around the page.

Thanks a lot for getting me to understand it.

Thread: Interface/Layout change question

Thread Tools

Display

Interface/Layout change question

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions