PunBB Resource

Your ultimate PunBB resource!

You are not logged in.

Login to move these ads to the bottom of the page

Projects
» Adding a drop...

View

Description

Info

Full name:: Adding a drop-down menu to punbb
Category:: Other
Latest release:: 1, a total of 1 release(s)
Author:: Aonxe

Description

This is the first modification for punbb I have released and I didn't feel like making a punres account so sorry if the format is a little off for releasing a mod. If people like the mod I will change it to the correct format and release it to punres.

I was trying to add a drop down menu that changed states when the user was logged out, in, and when it was guest just like the normal punbb menu does and I got it to work. I figured I would share what I learned with everyone else.

Ok, step 1 make a new css file in your include/template directory, call it drop.css. Here is what you should put in it.

Code:

.menu {
width:750px; 
font-size:0.85em;
position:relative;
z-index:100;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;

}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

Now you have to open up your functions.php file in your include directory. It really doesn't matter where you put the function but I put mine after my generate_navlinks() function just to keep a little bit organized. Now, put the following function in your functions.php file.

Code:

function generate_headerlinks()
{
    global $pun_config, $lang_common, $pun_user;

    $linkz[] = '<li><a href="index.php">'.$lang_common['Index'].'<!--[if IE 7]><!--></a><!--<![endif]-->';
    $linkz[] = '<!--[if lte IE 6]><table><tr><td><![endif]-->';
        $linkz[] = '<ul>';
        $linkz[] = '<li><a href="userlist.php">'.$lang_common['User list'].'</a></li>';
        if ($pun_config['o_rules'] == '1')
            $linkz[] = '<li><a href="misc.php?action=rules">'.$lang_common['Rules'].'</a></li>';

        if ($pun_user['is_guest'])
        {
            if ($pun_user['g_search'] == '1')
                $linkz[] = '<li><a href="search.php">'.$lang_common['Search'].'</a></li>';

            $linkz[] = '<li><a href="register.php">'.$lang_common['Register'].'</a></li>';
            $linkz[] = '<li><a href="login.php">'.$lang_common['Login'].'</a></li>';

        }
        else
        {
            if ($pun_user['g_id'] > PUN_MOD)
            {
                if ($pun_user['g_search'] == '1')
                    $linkz[] = '<li><a href="search.php">'.$lang_common['Search'].'</a></li>';

                $linkz[] = '<li><a href="profile.php?id='.$pun_user['id'].'">'.$lang_common['Profile'].'</a></li>';
                $linkz[] = '<li><a href="login.php?action=out&amp;id='.$pun_user['id'].'">'.$lang_common['Logout'].'</a></li>';
            }
            else
            {
                $linkz[] = '<li><a href="search.php">'.$lang_common['Search'].'</a></li>';
                $linkz[] = '<li><a href="profile.php?id='.$pun_user['id'].'">'.$lang_common['Profile'].'</a></li>';
                $linkz[] = '<li><a href="admin_index.php">'.$lang_common['Admin'].'</a></li>';
                $linkz[] = '<li><a href="login.php?action=out&amp;id='.$pun_user['id'].'">'.$lang_common['Logout'].'</a></li>';
            }
        }
        $linkz[] = '</ul>';
    $linkz[] = '<!--[if lte IE 6]></td></tr></table></a><![endif]-->';
    $linkz[] = '</li>';

    return '<ul>'."\n\t\t\t\t".implode($linkz)."\n\t\t\t".'</ul>';
    
}

Now open up header.php and we need to do two things. Search the file for

Code:

<link rel="stylesheet"

and after you find the stylesheet section paste the following line of code in on the next line.

Code:

<link rel="stylesheet" media="all" type="text/css" href="include/template/drop.css" />

Now, search header.php for

Code:

// END SUBST - <pun_navlinks>

and put the following line of code on the next line.

Code:

$tpl_main = str_replace('<pun_toplinks>','<div class="menu">'."\n\t\t\t". generate_headerlinks()."\n\t\t".'</div>', $tpl_main);

Ok, we are almost done now. Open up your include/template/main.tpl file and search for

Code:

</head>
<body>
<div id="punwrap">

Now replace those lines of code with

Code:

</head>
<body>
<pun_toplinks>
<br /><br />
<div id="punwrap">

Now you are all done! It wont blend into your forum very well but stylizing it is your job, I just got it to work :).

The end result will look something like this when you are logged in and you mouse over.

I didnt write the code to get the drop-down menu to work. I used the menu available here. I only did the php to make it work with punbb.

I will update it so that it puts the extra links that you add through the admin console in there later today. :)

Happy coding.

Projects
» Adding a drop...

PunBB Resource

View

Description

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Code:

Board footer