Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Overall Header Help

    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
    Last edited by Tech.Inno; 07-12-2011 at 08:39 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    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 Code:
    <?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 Code:
    <?php include('./template/overall_header.php'); ?>
    I just don't know how to make keywords, description, and title unique to each page.
    Last edited by Tech.Inno; 07-12-2011 at 06:58 PM.

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I just remembered another issue I'm having. In the css I have a thing for the current page:
    Code:
    #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...
    Last edited by Tech.Inno; 07-12-2011 at 07:59 PM. Reason: one issue solved and added detail

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Any suggestions at all would be helpful, anything to get me started.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 285 Times in 284 Posts
    In each page:
    Code:
    $title = "title for this page";
    include ("overall_header.php");
    In overall_header.php:
    Code:
    <title><?php echo $title ?></title>
    Dave

  • Users who have thanked tracknut for this post:

    Tech.Inno (07-12-2011)

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    In each page:
    Code:
    $title = "title for this page";
    include ("overall_header.php");
    In overall_header.php:
    Code:
    <title><?php echo $title ?></title>
    Dave
    Thanks for the suggestion. Works great, very easy. Here's the final result.

    In overall_header.php:
    Code:
    <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:
    Code:
    <?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!
    Last edited by Tech.Inno; 07-12-2011 at 08:42 PM.

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,311
    Thanks
    11
    Thanked 285 Times in 284 Posts
    You could also enhance overall_header with something like:
    Code:
    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

  • Users who have thanked tracknut for this post:

    Tech.Inno (07-12-2011)

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tracknut View Post
    You could also enhance overall_header with something like:
    Code:
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •