PDA

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.