...

View Full Version : Resolved Overall Header Help



Tech.Inno
07-12-2011, 05:17 PM
Hello,
My goal is to make an "overall header" for my website. Basically, I need one file to act as my header for every page. I noticed the benefits of this when working with phpBB - fast, saves bandwidth, easy global editing. I've been fairly successful so far. I have it nearly complete and can just include it at the top of each page. But I need to solve an issue before I implement it.

The problem I'm running into is the keywords, description, and title. I need these to be unique for each page, but I'm not sure how to go about this. I've been searching for solutions/tutorials online, but haven't come up with anything.

Any help with this would be greatly appreciated!

*Resolved*
Thanks for the help!
~Tech.Inno

abduraooft
07-12-2011, 05:33 PM
I have it nearly complete and can just include it at the top of each page. But I need to solve an issue before I implement it.
It'd be easy for us, if you share what you've achieved so far.

Tech.Inno
07-12-2011, 06:30 PM
It'd be easy for us, if you share what you've achieved so far.

Here's what I have so far. This is overall_header.php:


<?php
//Include phpBB
define('IN_PHPBB', true);
$phpbb_root_path = './forum/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);
// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();
?>
<!-- Start WP Include -->
<?php
//Include WordPress
define('WP_USE_THEMES', false);
require('./blog/wp-load.php');
query_posts('showposts=3');
?>
<!-- End WP Include -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- start java form -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./layout/form_wizard.css" />
<script src="./layout/form_wizard.js" type="text/javascript">
</script>
<script type="text/javascript">
var myform=new formtowizard({
formid: 'menuwizard',
persistsection: true,
revealfx: ['slide', 500]
})
</script>
<!-- end java form -->

<!-- start rating java -->
<div class="rw-js-container">
<script type="text/javascript">
// Async Rating-Widget initialization.
function RW_Async_Init(){
RW.init("16F2B7B8131E68A5B9E658404FB9C6F8",
{
theme: "star_darkglass",
type: "star"
});
RW.render();
}

// Append Rating-Widget JavaScript library.
if (typeof(RW) == "undefined"){
(function(){
var rw = document.createElement("script");
rw.type = "text/javascript"; rw.async = true;
rw.src = "http://rating-widget.com/js/external.min.php?t=js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(rw, s);
})();
}
</script>
</div>
<!-- end rating java -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="./images/Main/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="./images/Main/favicon.ico" rel="icon" type="image/x-icon" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
margin: 20px 0;
background-color:#2B2B2B;
background-image: url(../images/Main/bg/bg_Large.jpg);
background-repeat:;
background-position: top;
background-attachment:;
}

body, th, td, input, textarea {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2B2B2B;
}

form {
}

fieldset {
}

h1, h2, h3 {
margin-top: 1.5em;
color: #2B2B2B;;
}

h1 {
font-size: 3em;
}

h2 {
font-size: 1.1em;
font-weight: bold;
color: #2B2B2B;;
}

h3 {
font-size: 1em;
}

ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
}

ul, ol {
margin-left: 3em;
}

blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
text-decoration: none;
}

a:hover {
border: none;
}

h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
}

/* Wrapper */

#wrapper {
}

/* Header */

#header {
width: 980px;
margin: 0 auto;
}

#menu {
float: right;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: right;
}

#menu a {
display: block;
float: right;
height: 25px;
margin-right: 1px;
margin-top: 20px;
padding: 10px 20px 0 20px;
text-decoration: none;
font-size: 1.1em;
font-weight: bold;
color: #CCCCCC;
}

#menu a:hover {
background: #F3F3F3;
color: #2B2B2B;
}

#menu .current_page_item a {
background: #F3F3F3;
color: #2C2E22;
}
/* Logo */

#logo {
width: 978px;
height: 200px;
margin: 0 auto;
height: 263px;
border: 20px solid #F3F3F3;
}

#sys_banner {
width: 978px;
height: 200px;
margin: 0 auto;
height: 263px;
}

#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0;
}

#logo h1 {
padding: 100px 5px 0 20px;
color: #FFFFFF;
}

#logo h2 {
padding: 115px 0 0 0;
font-style: italic;
}

#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
}

#logo a {
color: #FFFFFF;
}

/* Page */

#page {
width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: #FFFFFF;
border: 20px solid #F3F3F3;
border-top: none;
}

/* Content */

#content {
float: left;
width: 938px;
padding: 0px 0px 0px 20px;
}

/* Footer */

.sys_footer {
text-align: center;
padding: 5px 0 0 5px;
font-size: 10px;
color: #CCCCCC;
}

.sys_footer a {
color: #FFFFFF;
}

.sys_txt{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2B2B2B;
padding : 1px 0 0 0;
font-size-adjust: none;
font-style : normal;
font-variant : normal;

}

a{color:#3C7BCF;}

.sys_txt a img{

border : none;
}

.sys_txt a{

text-decoration: none;
}

.sys_txt a:hover{

text-decoration: none;
}

.sys_txt h1, .sys_txt h2, .sys_txt h3 {
margin-top: 1.5em;
}

.sys_txt h1 a, .sys_txt h2 a, .sys_txt h3 a {
border: none;
text-decoration: none;
}

.sys_txt h1 a:hover, .sys_txt h2 a:hover, .sys_txt h3 a:hover {
background: none;
}

.sys_txt h1 {
letter-spacing: -.075em;
font-size: 3em;
}

.sys_txt h2 {
letter-spacing: -.05em;
font-size: 1.1em;
font-weight: bold;
color: #2B2B2B;
}

.sys_txt h3 {
font-size: 1em;
}

.sys_txt h4{
margin:0;
padding:10px 0 10px 0;
}

.sys_txt h5{

margin:0;
padding:10px 0 10px 0;
}

.sys_txt h6{
margin:0;
padding:10px 0 10px 0;
}

.sys_txt p{

margin:0;
padding:5px 0;
}

.sys_txt blockquote {

margin: 0 20px;
padding:15px 0 15px 30px;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}

.sys_txt ul{

margin : 15px 5px;
padding : 0 35px;
line-height:normal;
}

.sys_txt ul li{

margin : 0;
padding : 2px 0;
line-height:normal;
}

</style>
<link rel="stylesheet" type="text/css" href="/layout/Default.css" />
</head>

<body id="sys_background">
<a name="top"></a>
<!-- start header -->
<div id="header">
<div id="menu">
<ul class='sys_navigation'>

<li><a href="./contact-us.php" title="Contact us">Contact us</a></li>

<li><a href="./blog" title="News">News</a></li>

<li><a href="./forum" title="Forum">Forum</a></li>

<li><a href="./photos.php" title="Photos">Photos</a></li>

<li><a href="./projects.php" title="Projects">Projects</a></li>

<li><a href="./about-us.php" title="About us">About us</a></li>

<li><a href="./" title="Home">Home</a></li>

</ul>
</div>
</div>

<div style="clear:both;"></div>
<div id="logo">
<div id="sys_banner" name="banner" style="background: url(./images/Main/Banner_Large.jpg) no-repeat left top;" >
<h1><a id="sys_heading" href="./"></a></h1>
</div>
</div>
<!-- end header -->

<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">


Here's how I will implement it once it's done:


<?php include('./template/overall_header.php'); ?>


I just don't know how to make keywords, description, and title unique to each page.

Tech.Inno
07-12-2011, 07:12 PM
I just remembered another issue I'm having. In the css I have a thing for the current page:


#menu .current_page_item a {
background: #F3F3F3;
color: #2C2E22;


I don't know how I could make use of this if every page shares the same header. Maybe I could use a php 'if statement' around each item to check the current url, but that'd be a lot of redundant code.
Solved the above. Still having title, keyword, description issue, probably an easy fix - I'm just inexperienced.

Any ideas? phpBB uses lines like <title>{SITENAME} - <!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}</title>

But I don't know what exactly this is or how to implement it...

Tech.Inno
07-12-2011, 08:15 PM
Any suggestions at all would be helpful, anything to get me started.

tracknut
07-12-2011, 08:22 PM
In each page:


$title = "title for this page";
include ("overall_header.php");


In overall_header.php:


<title><?php echo $title ?></title>


Dave

Tech.Inno
07-12-2011, 08:37 PM
In each page:


$title = "title for this page";
include ("overall_header.php");


In overall_header.php:


<title><?php echo $title ?></title>


Dave

Thanks for the suggestion. Works great, very easy. Here's the final result.

In overall_header.php:

<title><?php echo $title ?></title>
<meta name="description" content="<?php echo $description ?>" />
<meta name="keywords" content="<?php echo $keywords ?>" />

At the top of each page:


<?php
$title = "Whatever the title is here - My site name";
$description = "Description of page here";
$keywords = "key, words, here";
include('./template/overall_header.php');
?>


With these changes I reduced each one of my pages by 445 lines!

tracknut
07-12-2011, 08:42 PM
You could also enhance overall_header with something like:


if (!isset($title)) $title = "Generic title name in case I don't set one";


That way, if you don't feel the need to set $title, $description, or $keywords specifically for a particular page, you'll have a default value to use across the whole site.

Dave

Tech.Inno
07-12-2011, 08:52 PM
You could also enhance overall_header with something like:


if (!isset($title)) $title = "Generic title name in case I don't set one";


That way, if you don't feel the need to set $title, $description, or $keywords specifically for a particular page, you'll have a default value to use across the whole site.

Dave

Very nice addition, works perfect. Thanks again for all your help, it is very much appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum