• Registered: 2006-08-30
  • Posts: 12

Topic: PunBB with Wordpress theme.

Hello, I am trying to integrate PunBB into the wordpress theme I'm using.  I can?t seem to get it right and I was wondering if you could help.  The site I am working on ishttp://www.gvsuceo.com .  The forums are located at http://www.gvsuceo.com/forums/ . 

I found this...
http://www.almosteffortless.com/2005/09 … and-punbb/
but I I must have done it wrong.  Also, I think the sidebar (with the links) needs to be removed in order for the forum to display properly.


If there is anyway you could help me, I would really appreciate it.  Thanks a lot.



-Pete

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

I'd fix the HTML validation errors first

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

I'm a n00b -  I'm not much of a coder.  Could you please advise me on how I do this?

  • From: U.S.A.
  • Registered: 2005-08-26
  • Posts: 1,607

Re: PunBB with Wordpress theme.

waazzuup wrote:

I'm a n00b -  I'm not much of a coder.  Could you please advise me on how I do this?

http://validator.w3.org/check?verbose=1 … Fforums%2F

Looking for a certain modification for your forum? Please take a look here before posting.
  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

Never used Wordpress I'm afraid wink

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

the main site (gvsuceo.com) now validates.  I figured that out.  The forums has a ton of errors though.  I'm going to try to work on that now, but I'm sure you have way more experience than me. smile  If you have any idea/tips, please let me know

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

Ok - the forums html now validates as well. smile

It still looks the same though.  Any ideas?

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

Well, the reason for the squeeze is because you put PunBB inside your content div. Your content div is fixed width. Put PunBB outside of that div.
Then it looks like there's a couple other things interfering with PunBB's display and making it look odd. You'll have to take a look at your stylesheet

Last edited by Smartys (2006-08-30 01:50:33)

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

Aha, a little more info for you

<!-- SIDEBAR -->
    
    <hr/>
<div id="sidebar">


    <br style="clear:both" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
</div>

Ditch that bit

And a quick fix for the navlinks (the better way would be to do something like this in the stylesheet):

                <li id="navindex" style="background:none;"><a href="index.php">Index</a></li>
                <li id="navuserlist" style="background:none;"><a href="userlist.php">User list</a></li>
                <li id="navsearch" style="background:none;"><a href="search.php">Search</a></li>
                <li id="navregister" style="background:none;"><a href="register.php">Register</a></li>
                <li id="navlogin" style="background:none;"><a href="login.php">Login</a></li>

Last edited by Smartys (2006-08-30 01:55:40)

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

And you have 5 closing divs after the Wordpress footer. Put two of them before the wordpress footer. I think that should solve all the issues

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

Anyways, lets see if I can format a main.tpl to deal with most of my suggestions:

<!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>

<!-- Wordpress Template CSS -->
<link rel="stylesheet" href="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/style.css" type="text/css" media="screen" title="Freshy"/>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://rose.asmallorange.com/~gvsuceo/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://rose.asmallorange.com/~gvsuceo/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://rose.asmallorange.com/~gvsuceo/?feed=atom" />

<link rel="pingback" href="http://rose.asmallorange.com/~gvsuceo/xmlrpc.php" />
    <link rel='archives' title='August 2006' href='http://rose.asmallorange.com/~gvsuceo/?m=200608' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://rose.asmallorange.com/~gvsuceo/xmlrpc.php?rsd" />

    <style type="text/css">
    .menu li a {
        background-image:url("http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/menu/menu_triple_blue.gif");
    }
    .menu li a.first_menu {
        background-image:url("http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/menu/menu_start_triple_blue.gif");
    }
    .menu li a.last_menu {
        background-image:url("http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/menu/menu_end_triple_blue.gif");
    }
    .menu li.current_page_item a {
        color:#FFFFFF !important;
    }
    
    .description {
        color:#4B78E2;
    }
    #content .commentlist dd.author_comment {
        background-color:#0F80D8 !important;
    }
    html > body #content .commentlist dd.author_comment {
        background-color:#0F80D8 !important;
    }
    #content .commentlist dt.author_comment .date {
        color:#0F80D8 !important;
        border-color:#0F80D8 !important;
    }
    #content .commentlist .author_comment .author,
    #content .commentlist .author_comment .author a {
        color:#0F80D8 !important;
        border-color:#0F80D8 !important;
    }
    #sidebar h2 {
        color:#0f80d8;
        background-color:#FFFFFF;
        border-bottom-color:#0f80d8;
    }
    #brdmenu li
    {
        background: none;
    }
    #sidebar {
        background-color:#DBEFFF;
    }
    *::-moz-selection {
        background-color:#0F80D8;
    }

    #content a:hover {
        border-bottom:1px dotted #0F80D8;
    }

    #sidebar a:hover,
    #sidebar .current_page_item li a:hover,
    #sidebar .current-cat li a:hover,
    #sidebar .current_page_item a,
    #sidebar .current-cat a ,
    .readmore,
    #content .postmetadata a
    {
        color : #0F80D8;
    }
    
    #title_image {
        margin:0;
        text-align:left;
        display:block;
        height:95px;
                background-image:url("http://rose.asmallorange.com/~gvsuceo/other/header.jpg");
            }
    
    </style>

    </head>
<body>

<div id="page">



<!-- Wordpress Template CSS -->

<!-- Mint -->
<!-- <script src='/mint/mint.js.php' type='text/javascript' language='javascript'></script> -->
<!-- Mint -->



<!-- Wordpress Template Header -->
<div id="header">

        <div id="title">
            <h1>
                <a href="http://rose.asmallorange.com/~gvsuceo">
                    <span></span>
                </a>
            </h1>
            <div class="description">
                <small></small>
            </div>

        </div>
        <div id="title_image"></div>
    </div>
    
    <!-- main div -->
    <div id="frame">

    <!-- main menu -->
            <ul class="menu">
            
            <li class="current_page_item">

                <a class="first_menu" href="http://rose.asmallorange.com/~gvsuceo">
                    Home                </a>
            </li>
                    
            <li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=2" title="About">About</a></li>
<li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=5" title="Projects">Projects</a></li>
<li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=4" title="E-Board">E-Board</a></li>
<li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=3" title="Contact">Contact</a></li>
                
            <li class="last_menu">

                
                <!-- if an email is set in the options -->
                                <!-- put an empty link to have the end of the menu anyway -->
                    
                <a class="last_menu_off">
                </a>
                    
                                    
            </li>

        </ul>

<!-- Wordpress Template Header -->



<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>

<!-- Wordpress Template Footer -->
<hr style="display:none"/>

<div id="footer">
    <small class="footer_content">
        <a href="http://rose.asmallorange.com/~gvsuceo/?feed=rss2"><img alt="rss" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/rss_blog.gif"/></a>
        <a href="http://rose.asmallorange.com/~gvsuceo/?feed=comments-rss2"><img alt="Comments rss" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/rss_comments.gif"/></a>
        <a href="http://validator.w3.org/check?uri=referer"><img alt="valid xhtml 1.1" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/valid_xhtml11_80x15_2.png"/></a>

        <a href="http://www.jide.fr"><img alt="design by jide" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/micro_jide.png"/></a>
        <a href="http://wordpress.org/"><img alt="powered by Wordpress" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/get_wordpress_80x15_2.png"/></a>
        <br/>Copyright © 2006  Grand Valley State University Collegiate Entrepreneurs' Organization
    </small>
<!-- Wordpress Template Footer -->

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

</body>
</html>

Oddly enough, I couldn't find the sidebar bit here

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

Wow - thanks a lot!

I put PunBB outside of the content div.  (width issue corrected!)

I also deleted that sidebar code smile

I'm confused where that navlinks code goes though.

EDIT: WOW - 2 more posts.  I need to catch up to you smile

im working - you are awesome

Last edited by waazzuup (2006-08-30 02:11:43)

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

It looks good!!

THANK YOU SO MUCH!!!!!!!!!!!!

Really - I couldn't have asked for more.  thank you, thank you, thank you!!!!!!!!!!!!!!

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

No problem smile

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

Mmm, there still are a few issues I see:
1. http://www.gvsuceo.com/forums/viewforum.php?id=1
Take a look at Index and Test Forum.
2. Look at the new post icon on index.php
A new main.tpl to address the first issue (I can't see why issue 2 is happening):

<!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>

<!-- Wordpress Template CSS -->
<link rel="stylesheet" href="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/style.css" type="text/css" media="screen" title="Freshy"/>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://rose.asmallorange.com/~gvsuceo/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://rose.asmallorange.com/~gvsuceo/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://rose.asmallorange.com/~gvsuceo/?feed=atom" />

<link rel="pingback" href="http://rose.asmallorange.com/~gvsuceo/xmlrpc.php" />
    <link rel='archives' title='August 2006' href='http://rose.asmallorange.com/~gvsuceo/?m=200608' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://rose.asmallorange.com/~gvsuceo/xmlrpc.php?rsd" />

    <style type="text/css">
    .menu li a {
        background-image:url("http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/menu/menu_triple_blue.gif");
    }
    .menu li a.first_menu {
        background-image:url("http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/menu/menu_start_triple_blue.gif");
    }
    .menu li a.last_menu {
        background-image:url("http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/menu/menu_end_triple_blue.gif");
    }
    .menu li.current_page_item a {
        color:#FFFFFF !important;
    }
    
    .description {
        color:#4B78E2;
    }
    #content .commentlist dd.author_comment {
        background-color:#0F80D8 !important;
    }
    html > body #content .commentlist dd.author_comment {
        background-color:#0F80D8 !important;
    }
    #content .commentlist dt.author_comment .date {
        color:#0F80D8 !important;
        border-color:#0F80D8 !important;
    }
    #content .commentlist .author_comment .author,
    #content .commentlist .author_comment .author a {
        color:#0F80D8 !important;
        border-color:#0F80D8 !important;
    }
    #sidebar h2 {
        color:#0f80d8;
        background-color:#FFFFFF;
        border-bottom-color:#0f80d8;
    }
    .pun li
    {
        background: none;
    }
    #sidebar {
        background-color:#DBEFFF;
    }
    *::-moz-selection {
        background-color:#0F80D8;
    }

    #content a:hover {
        border-bottom:1px dotted #0F80D8;
    }

    #sidebar a:hover,
    #sidebar .current_page_item li a:hover,
    #sidebar .current-cat li a:hover,
    #sidebar .current_page_item a,
    #sidebar .current-cat a ,
    .readmore,
    #content .postmetadata a
    {
        color : #0F80D8;
    }
    
    #title_image {
        margin:0;
        text-align:left;
        display:block;
        height:95px;
                background-image:url("http://rose.asmallorange.com/~gvsuceo/other/header.jpg");
            }
    
    </style>

    </head>
<body>

<div id="page">



<!-- Wordpress Template CSS -->

<!-- Mint -->
<!-- <script src='/mint/mint.js.php' type='text/javascript' language='javascript'></script> -->
<!-- Mint -->



<!-- Wordpress Template Header -->
<div id="header">

        <div id="title">
            <h1>
                <a href="http://rose.asmallorange.com/~gvsuceo">
                    <span></span>
                </a>
            </h1>
            <div class="description">
                <small></small>
            </div>

        </div>
        <div id="title_image"></div>
    </div>
    
    <!-- main div -->
    <div id="frame">

    <!-- main menu -->
            <ul class="menu">
            
            <li class="current_page_item">

                <a class="first_menu" href="http://rose.asmallorange.com/~gvsuceo">
                    Home                </a>
            </li>
                    
            <li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=2" title="About">About</a></li>
<li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=5" title="Projects">Projects</a></li>
<li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=4" title="E-Board">E-Board</a></li>
<li class="page_item"><a href="http://rose.asmallorange.com/~gvsuceo/?page_id=3" title="Contact">Contact</a></li>
                
            <li class="last_menu">

                
                <!-- if an email is set in the options -->
                                <!-- put an empty link to have the end of the menu anyway -->
                    
                <a class="last_menu_off">
                </a>
                    
                                    
            </li>

        </ul>

<!-- Wordpress Template Header -->



<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>

<!-- Wordpress Template Footer -->
<hr style="display:none"/>

<div id="footer">
    <small class="footer_content">
        <a href="http://rose.asmallorange.com/~gvsuceo/?feed=rss2"><img alt="rss" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/rss_blog.gif"/></a>
        <a href="http://rose.asmallorange.com/~gvsuceo/?feed=comments-rss2"><img alt="Comments rss" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/rss_comments.gif"/></a>
        <a href="http://validator.w3.org/check?uri=referer"><img alt="valid xhtml 1.1" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/valid_xhtml11_80x15_2.png"/></a>

        <a href="http://www.jide.fr"><img alt="design by jide" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/micro_jide.png"/></a>
        <a href="http://wordpress.org/"><img alt="powered by Wordpress" src="http://rose.asmallorange.com/~gvsuceo/wp-content/themes/freshy/images/get_wordpress_80x15_2.png"/></a>
        <br/>Copyright © 2006  Grand Valley State University Collegiate Entrepreneurs' Organization
    </small>
<!-- Wordpress Template Footer -->

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

</body>
</html>
http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

I uploaded the new main.tpl file.  It did fix the first issue (I don't see the second issue???).

I just realized that it looks really messed up in Internet Explorer.  Could it have something to do with that sidebar code that you said to delete???

  • Smartys
  • Former PunBB Developer
  • Offline
  • Registered: 2004-04-30
  • Posts: 7,844

Re: PunBB with Wordpress theme.

The fact that your HTML validates means IE is looking at the page in strict mode as opposed to quirks mode tongue
Take out the declaration at the very top, IE will look fine (and it doesn't seem to affect anything elsewhere)

And as for the second thing, in Firefox, the new post icon is up higher than the text as opposed to inline with it

http://fluxbb.org

Free PunBB Hosting - lots of mods, easy to customize

Smartys's Website

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

awesome - thanks.

I got rid of the declaration at the top and it looks right for the most part now.  The only thing is that there is a "line" at the bottom of the page when viewed in IE.  Any idea how to get rid of that?

  • Registered: 2006-08-30
  • Posts: 1

Re: PunBB with Wordpress theme.

Wow! I also use the freshy theme. How did you do this? Any help appreciated.

  • Registered: 2006-08-30
  • Posts: 12

Re: PunBB with Wordpress theme.

ColinBrady wrote:

Wow! I also use the freshy theme. How did you do this? Any help appreciated.

Basically, I followed this guy as closely as I could...

http://www.almosteffortless.com/2005/09 … and-punbb/

and then I posted here (and Smartys worked some magic)

Last edited by waazzuup (2006-08-30 21:44:01)

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

Re: PunBB with Wordpress theme.

wazzz, look at the footer of the forum there is an extra image at the bottom.
u need to close that footer in the style i think..lol.

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-30
  • Posts: 12

Re: PunBB with Wordpress theme.

quaker wrote:

wazzz, look at the footer of the forum there is an extra image at the bottom.
u need to close that footer in the style i think..lol.

I can't seem to find it (not much of a programmer) - could anyone please help?

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

Re: PunBB with Wordpress theme.

i used Kontrast css as a example to fix a site footer.
this is the
code

#brdfooter {
    margin-left: -40px;
    padding: 0 40px 40px 40px;
    width: 870px;
    margin-bottom: 0;
    background-repeat:  no-repeat;
    background-position: bottom left;
}
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-30
  • Posts: 12

Re: PunBB with Wordpress theme.

quaker wrote:

i used Kontrast css as a example to fix a site footer.
this is the
code

#brdfooter {
    margin-left: -40px;
    padding: 0 40px 40px 40px;
    width: 870px;
    margin-bottom: 0;
    background-repeat:  no-repeat;
    background-position: bottom left;
}

I'm so confused.  I'm not sure what I am supposed to take from this.

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

Re: PunBB with Wordpress theme.

post ya #brdfooter css and cs.css

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