• Registered: 2006-08-21
  • Posts: 4

Topic: How to add a navbar

I am a newbie in punbb and I really need a help. I have a navbar created in Adobe Photoshop and I sliced it in Imageready, how can i add it to my punBB.
Thanks. I hope you can help me.

  • From: Leuven, Belgium
  • Registered: 2005-06-14
  • Posts: 2,653

Re: How to add a navbar

I suggest you replace <pun_navlinks> with the HTML of your slice in main.tpl wink

3 Reply by chr05210084 (edited by pogenwurst 2006-08-22 18:58)

  • Registered: 2006-08-21
  • Posts: 4

Re: How to add a navbar

Sir thanks for the hint but I cant get it to work, please help me, this my navbar html code.

<html>
<head>
<title>navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (navbar.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        home_over = newImage("images/home-over.gif");
        tech_over = newImage("images/tech-over.gif");
        support_over = newImage("images/support-over.gif");
        contact_over = newImage("images/contact-over.gif");
        forum_over = newImage("images/forum-over.gif");
        preloadFlag = true;
    }
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (navbar.psd) -->
<table id="Table_01" width="760" height="111" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/logo3.gif" width="273" height="46" alt=""></td>
        <td colspan="5">
            <img src="images/logo4.gif" width="487" height="46" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/logo.gif" width="273" height="65" alt=""></td>
        <td colspan="5">
            <img src="images/logo2.gif" width="487" height="41" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
                onmouseout="changeImages('home', 'images/home.gif'); return true;"
                onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
                onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
                <img name="home" src="images/home.gif" width="60" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('tech', 'images/tech-over.gif'); return true;"
                onmouseout="changeImages('tech', 'images/tech.gif'); return true;"
                onmousedown="changeImages('tech', 'images/tech-over.gif'); return true;"
                onmouseup="changeImages('tech', 'images/tech-over.gif'); return true;">
                <img name="tech" src="images/tech.gif" width="139" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('support', 'images/support-over.gif'); return true;"
                onmouseout="changeImages('support', 'images/support.gif'); return true;"
                onmousedown="changeImages('support', 'images/support-over.gif'); return true;"
                onmouseup="changeImages('support', 'images/support-over.gif'); return true;">
                <img name="support" src="images/support.gif" width="82" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('contact', 'images/contact-over.gif'); return true;"
                onmouseout="changeImages('contact', 'images/contact.gif'); return true;"
                onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"
                onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;">
                <img name="contact" src="images/contact.gif" width="72" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('forum', 'images/forum-over.gif'); return true;"
                onmouseout="changeImages('forum', 'images/forum.gif'); return true;"
                onmousedown="changeImages('forum', 'images/forum-over.gif'); return true;"
                onmouseup="changeImages('forum', 'images/forum-over.gif'); return true;">
                <img name="forum" src="images/forum.gif" width="134" height="24" border="0" alt=""></a></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

I got a single html file and 14 sliced image, where should I put the image, which folder?

Thanks and more power.

4 Reply by chr05210084 (edited by pogenwurst 2006-08-22 18:58)

  • Registered: 2006-08-21
  • Posts: 4

Re: How to add a navbar

This is my main.tpl, what should I do sir? Should I erase the <pun_navlinks> and replace by these codes, in which folder should I put the sliced images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

</body>
</html>


Should I do it this way sir?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <html>
<head>
<title>navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (navbar.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        home_over = newImage("images/home-over.gif");
        tech_over = newImage("images/tech-over.gif");
        support_over = newImage("images/support-over.gif");
        contact_over = newImage("images/contact-over.gif");
        forum_over = newImage("images/forum-over.gif");
        preloadFlag = true;
    }
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (navbar.psd) -->
<table id="Table_01" width="760" height="111" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/logo3.gif" width="273" height="46" alt=""></td>
        <td colspan="5">
            <img src="images/logo4.gif" width="487" height="46" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/logo.gif" width="273" height="65" alt=""></td>
        <td colspan="5">
            <img src="images/logo2.gif" width="487" height="41" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
                onmouseout="changeImages('home', 'images/home.gif'); return true;"
                onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
                onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
                <img name="home" src="images/home.gif" width="60" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('tech', 'images/tech-over.gif'); return true;"
                onmouseout="changeImages('tech', 'images/tech.gif'); return true;"
                onmousedown="changeImages('tech', 'images/tech-over.gif'); return true;"
                onmouseup="changeImages('tech', 'images/tech-over.gif'); return true;">
                <img name="tech" src="images/tech.gif" width="139" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('support', 'images/support-over.gif'); return true;"
                onmouseout="changeImages('support', 'images/support.gif'); return true;"
                onmousedown="changeImages('support', 'images/support-over.gif'); return true;"
                onmouseup="changeImages('support', 'images/support-over.gif'); return true;">
                <img name="support" src="images/support.gif" width="82" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('contact', 'images/contact-over.gif'); return true;"
                onmouseout="changeImages('contact', 'images/contact.gif'); return true;"
                onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"
                onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;">
                <img name="contact" src="images/contact.gif" width="72" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('forum', 'images/forum-over.gif'); return true;"
                onmouseout="changeImages('forum', 'images/forum.gif'); return true;"
                onmousedown="changeImages('forum', 'images/forum-over.gif'); return true;"
                onmouseup="changeImages('forum', 'images/forum-over.gif'); return true;">
                <img name="forum" src="images/forum.gif" width="134" height="24" border="0" alt=""></a></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

</body>
</html>

Thanks again, your help is highly appreciated. more power guys.

  • From: Leuven, Belgium
  • Registered: 2005-06-14
  • Posts: 2,653

Re: How to add a navbar

Please use code tags. Then I'll take a look.

  • quaker
  • quaker
  • Senior Member
  • Offline
  • From: USA
  • Registered: 2006-02-22
  • Posts: 1,783

Re: How to add a navbar

This is my main.tpl, what should I do sir? Should I erase the <pun_navlinks> and replace by these codes, in which folder should I put the sliced images.

This is my main.tpl, what should I do sir? Should I erase the <pun_navlinks> and replace by these codes, in which folder should I put the sliced images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

</body>
</html>


Should I do it this way sir?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body>

<div id="punwrap">
<div id="pun<pun_page>" class="pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <html>
<head>
<title>navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (navbar.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        home_over = newImage("images/home-over.gif");
        tech_over = newImage("images/tech-over.gif");
        support_over = newImage("images/support-over.gif");
        contact_over = newImage("images/contact-over.gif");
        forum_over = newImage("images/forum-over.gif");
        preloadFlag = true;
    }
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (navbar.psd) -->
<table id="Table_01" width="760" height="111" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img src="images/logo3.gif" width="273" height="46" alt=""></td>
        <td colspan="5">
            <img src="images/logo4.gif" width="487" height="46" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/logo.gif" width="273" height="65" alt=""></td>
        <td colspan="5">
            <img src="images/logo2.gif" width="487" height="41" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('home', 'images/home-over.gif'); return true;"
                onmouseout="changeImages('home', 'images/home.gif'); return true;"
                onmousedown="changeImages('home', 'images/home-over.gif'); return true;"
                onmouseup="changeImages('home', 'images/home-over.gif'); return true;">
                <img name="home" src="images/home.gif" width="60" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('tech', 'images/tech-over.gif'); return true;"
                onmouseout="changeImages('tech', 'images/tech.gif'); return true;"
                onmousedown="changeImages('tech', 'images/tech-over.gif'); return true;"
                onmouseup="changeImages('tech', 'images/tech-over.gif'); return true;">
                <img name="tech" src="images/tech.gif" width="139" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('support', 'images/support-over.gif'); return true;"
                onmouseout="changeImages('support', 'images/support.gif'); return true;"
                onmousedown="changeImages('support', 'images/support-over.gif'); return true;"
                onmouseup="changeImages('support', 'images/support-over.gif'); return true;">
                <img name="support" src="images/support.gif" width="82" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('contact', 'images/contact-over.gif'); return true;"
                onmouseout="changeImages('contact', 'images/contact.gif'); return true;"
                onmousedown="changeImages('contact', 'images/contact-over.gif'); return true;"
                onmouseup="changeImages('contact', 'images/contact-over.gif'); return true;">
                <img name="contact" src="images/contact.gif" width="72" height="24" border="0" alt=""></a></td>
        <td>
            <a href="#"
                onmouseover="changeImages('forum', 'images/forum-over.gif'); return true;"
                onmouseout="changeImages('forum', 'images/forum.gif'); return true;"
                onmousedown="changeImages('forum', 'images/forum-over.gif'); return true;"
                onmouseup="changeImages('forum', 'images/forum-over.gif'); return true;">
                <img name="forum" src="images/forum.gif" width="134" height="24" border="0" alt=""></a></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>
</div>

</body>
</html>

Thanks again, your help is highly appreciated. more power guys.

much better elbekko?

My stuff or my style might sux, but atleast I'm willing to help when I can.
Don't be stupid and help ! We are the stupid one's !!!

quaker's Website

  • Registered: 2006-08-21
  • Posts: 4

Re: How to add a navbar

thanks quaker, I dont know how to do that, the image is not showing, here is my forum
http://chr05210084.awardspace.com/forum/

please help me.
thanks