El Dorado

almost effortless wrote:

You might have noticed the new Forum link on the top of this site. I’ve just finished integrating the lovely PunBB with the amazing Wordpress, featuring the brand new k2 theme. Visually integrating the two programs is a very easy process...

Hey Trevor,

Nice writeup. I've just installed punBB and am playing around with my CSS in main.tpl to get it to look just right. I have a fairly customized K2 install and for some reason the main.tpl won't load my css files correctly.. and the urls for the css files are correct.

Anyways, you can check my work out here http://www.paulstamatiou.com/forums

Paul, I'm not seeing the problem, I think. It looks like you have removed the padding on your blog template, which is making the forum bump up against the sides of the containing div. Perhaps you could change the #punwrap CSS in there to leave the padding/margin in, or to make the width less.

Did you copy my main.tpl file and then edit it from there? If so, you'll notice the area right beneath the <!-- Wordpress Template CSS --> at the top has links to the full CSS links that Wordpress is loading. It looks like you're pasting in the CSS by hand. That could be the problem, too, but everything looks about right to me.

Yeah, I used your main.tpl and edited it. I ended up getting everything to work just like I wanted it. I took the padding away as part of my style since my header graphic has rounded corners with the rounded part of the graphic the same color as the background and padding would break that up. Anyways I changed the padding to 0px and made the position static instead of relative and I've accomplished what I was going for. It looks great! I'm not sure what I will use it for.. I think its more of a proof-of-concept thing than anything else.. for me at least. ;-)

Yeah, I just did it for fun, too. I've been working on some Wordpress plugins, though, so I'm hoping that I can use this forum for support on those. I think doing support in comments on blog posts isn't ideal. Anyway, glad you got it working!

Does pubbb need its own database, or can it run within the database that WP uses? My host only allows me one database.

It would be better off for it to have its own database, but it will work with the same one that WP uses... just make sure in the PunBB setup that you make sure it uses table prefixes.. such as "punbb_"

Yeah, PunBB can use the same DB, just like Paul said. Make sure to set up the prefix. Your Wordpress blog will likely use "wp_" as a prefix already, so you'll be able to tell them apart.

I made a couple of changes to get things working right in IE. I updated the original post, but here's the updated bit:

ae wrote:

I made a couple of small changed to get things working properly in (boo!) Internet Explorer. My main.tpl file contains the fixes. I added this line to the CSS:

.pun { font-size: 11px !important; }

and also changed this line

#punwrap { padding: 0; padding-top: 10px; margin: 0; width: 760px; }

This sets the font size and width specifically, so if you're using the flexible width or a different font size in k2, you might need to make some tweaks.

Just read throught the instructions and got the forum integrated perfectly. Thanks for the help Trevor! Nice write-up.

www.dekeduffy.com/lounge

Thanks, Duff. Let me know if you found that you could customize the forum colors in your main.tpl file enough - and if I missed anything in my write up. Your forum looks great!

Trevor--

The only other item I wish I had easy control over is the hyperlink color. If you set #punwrap A:link to a designated color it changes almost all the links. It misses user names and table names. If you added hyperlink color to the style section of your template I think it would make forum integration even easier and more seemless.

Thanks for posting this forum here - and giving us another reference.

I agree that punBB is great - and integration is something that will help things. If any developers are reading this - I think a plugin/script that would allow easy utilization of one userbase for both WP and pubBB would be of use to many of us. I know just enough html/php to get myself into trouble, and to intergrate the two would most certainly take my site down. :-)

C.

Hi,

I am trying to integrate PunBB into my Wordpress blog.

Blog: http://www.derekrossler.com
Forum: http://www.derekrossler.com/forum/

I have downloaded your main.tpl file, but am having trouble in making it display within my WP headers.

Can you help me out and look at my code?

<!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="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<style type="text/css" media="screen">

	

		/* BEGIN IMAGE CSS */

			/*	To accomodate differing install paths of WordPress, images are referred only here,

				and not in the wp-layout.css file. If you prefer to use only CSS for colors and what

				not, then go right ahead and delete the following lines, and the image files. */

			

		  body	 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }	<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>

			#page		{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; } <?php } else { // No sidebar ?>

			#page		{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; } <?php } ?>

			#header 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }

			#footer 	{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}

			.pun { font-size: 11px !important; }

			

			

			/*	Because the template is slightly different, size-wise, with images, this needs to be set here

				If you don't want to use the template's images, you can also delete the following two lines. */

			

			#header 	{ margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }

			#headerimg 	{ margin: 7px 9px 0; height: 192px; width: 740px; } 

		/* END IMAGE CSS */

		

	

		/* 	To ease the insertion of a personal header image, I have done it in such a way,

			that you simply drop in an image called 'personalheader.jpg' into your /images/

			directory. Dimensions should be at least 760px x 200px. Anything above that will

			get cropped off of the image. */

		

		/*

		#headerimg 	{ background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}

		*/

	</style>

	<!-- Wordpress Template CSS -->

</head>

<body>

<!-- Wordpress Template Header -->

<div id="page">

<div id="header">

	<div id="headerimg">

		<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>

		<div class="description"><?php bloginfo('description'); ?></div>

	</div>

</div>

<hr />

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

<!-- Wordpress Template Footer -->

</div>

</div>

<div class="clear"></div>

</div>

<hr />

<div id="footer">

	<p>

		<a href="http://wordpress.org"><img src='http://www.derekrossler.com/wp-content/wppower.png' alt='' /></a>

		&nbsp;<a href="<?php bloginfo('rss2_url'); ?>"><img src='http://www.derekrossler.com/wp-content/rss.png' alt='' /></a>

		&nbsp;<a href="http://validator.w3.org/check/referer"><img src='http://www.derekrossler.com/wp-content/html401.gif' alt='' /></a>

		&nbsp;<a href="http://jigsaw.w3.org/css-validator/validator?ur...//www.derekrossler.com/wp-content/themes/default/style.css"><img src='http://www.derekrossler.com/wp-content/css.gif' alt='' /></a>

		<br />

		<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds.

	</p>

</div>

</div>

		<?php do_action('wp_footer'); ?>

</body>

</html>

ok. i figured it out.

How did you get rid of the title bar? The bar where it displays your forum name and slogan

Thanks!

I added some CSS in there, I think this is what does it, but you can look in my main.tpl file for details:

#brdtitle { display: none; }

#brdmenu  { padding-top: 0; }

#punwrap { padding: 0; padding-top: 10px; margin: 0; width: 600px; }

ok. thanks trevor.

I think that I got it looking good now.

http://www.derekrossler.com/forum/

looks good to me!

thanks!

(now if I could just get Gallery2 looking that good, I would be set.)

Well, I've got coppermine integrated... If you're interested, have a look and let me know if I should post the instructions:

http://www.newathens.org/photos/

Hello,

I am trying to integrate PunBB into my Wordpress blog and just have one minor glitch. My two Sidebars are loading below the Forums, but need to be on the right side. Please help.

Blog: http://knigh7s.net/blog
Forum: http://knigh7s.net/blog/wp-forums

I used your Main.tpl as a reference and this is what I had come up with.

Code:

<!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" type="text/css" href="http://www.knigh7s.net/blog/wp-content/themes/t..." media="screen" />

<!-- Wordpress Template CSS -->

</head>

<body>

<!-- Wordpress Template Header -->

<?php wp_admin_bar(); ?>

<!-- ENTIRE PAGE, CENTERED -->

<div id="blog">

	<!-- MAIN WRAPPER, CONTAINING TWO COLUMNS -->

	<div id="wrapper">

	

		<!-- LEFT COLUMN ON OUTER WRAPPER -->

		<div id="wrapperleft">

		

			<!-- MAIN CONTENT -->

			<div id="main">

				<!-- HEADER -->

				<div id="header">

				<h1></h1>

				</div>

				<div id="flickrd">

					<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?nsid=94676.../script>

				</div>

<center><div class="quote"><?php witty('"', '"'); ?></div></center>

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

<!-- Wordpress Template Footer -->

			</div>

			

			<!-- MIDDLE COLUMN -->

			<div id="middle">

				<h1>linkblog</h1>

				<h2>quickies</h2>

				<ul>

					<?php c2c_get_recent_posts(20, '<li>%post_content_sanitized% (<a href="%post_url%">%comments_count%</a>)</li>', '13'); ?>

				</ul>

<? /* REPLACE "JARK" IN THE FOLLOWING WITH YOUR del.icio.us USERNAME FOR YOUR LINKBLOG TO APPEAR */ ?>

				<h2>del.icio.us linkage</h2>

				<script type="text/javascript" src="http://del.icio.us/feeds/js/Knigh7s?count=30&qu.../script>

				

<!-- deviantART Pastie Beginning Marker -->

				<h2>visual distractions</h2>

<script type="text/javascript" src="http://backend.deviantart.com/pasties/js/?iam=f.../script>

<!-- deviantART Pastie Ending Marker -->

			</div>

		

		</div>

		

		<!-- RIGHT COLUMN ON OUTER WRAPPER -->

		<div id="right">

			<h1>respection</h1>

			<h2>quick navigation</h2>

			<ul>

				<li><a href="http://knigh7s.net/blog/">Home</a></li>

				<li><a href="/blog/archives/">Archives</a></li>

				<li><a href="/blog/plugins/">Plugins</a></li>

				<li><a href="http://www.knigh7s.net/blog/wp-content/plugins/...">Photos</a></li>

				<li><a href="/blog/wp-forums/">Forums</a></li>

				<li><a href="/blog/links/">Links</a></li>

				<li><a href="/blog/profile/">Profile</a></li>

				<li><a href="/blog/contact/">Contact</a></li>

			</ul>

			<h2>recent posts</h2>

<ul>

<? /*To show specific poll, use <?php get_poll(<ID>);?> where <ID> is your poll id. */ ?>

<?php mdv_recent_posts(15, '<li>', '</li>', true, 5, false) ?>

</ul>

			<h2>categories</h2>

			<ul>

				<?php list_cats(1, '', 'name', 'asc', '', 1, 0, 1, 0, 1, 1, 0,'','','','','') ?>

			</ul>

			<h2>poll</h2>

			<ul>

			<?php get_poll();?>

			<p><a href="wp-polls.php">Polls Archive</a></p>

			</ul>

			<h2>emergency exits</h2>

			<ul>

				<?php get_links(-1, '<li>', '</li>', '', FALSE, 'name', FALSE, FALSE, -1, FALSE); ?>

			</ul>

			<h2>adverts</h2>

			<ul>

<center><a href="http://www.continuousink.com/default.asp?PARTNE... target="_new"><img src="http://knigh7s.net/blog/wp-images/advert/Cont-i..." border="0" alt="Continuous Inks Systems" align="middle"></a></center>

			</ul>

			<h2>metadata</h2>

			<ul>

				<li><a href="<?php echo bloginfo('rss2_url'); ?>" title="RSS Feed">RSS</a>.

				<li><a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML">XHTML</a>.</li>

				<li><a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid CSS">CSS</a>.</li>

			</ul>

		</div>

	

	</div>

	

	<!-- FOOTER -->

	<div id="footer">

	<center>

	Proudly powered by <a href="http://wordpress.org/">WordPress <?php bloginfo('version'); ?></a>. <a href="http://www.jarkolicious.com/wordpress/themes/tr...">triSexuality Standard</a> theme <a href="http://www.jarkolicious.com/">designed by Scott Jarkoff</a> & modified by <a href="http://www.knigh7s.net">Knigh7s.net</a>.

	<?php do_action('wp_footer'); ?>

	</center>

	</div>

</div>

<!-- Wordpress Template Footer -->

</div>

</div>

</body>

</html>

Knigh7s

Probably your divs aren't closed up properly. Try running your site on the w3 validator and see if it comes up with errors. You could also just try close divs near the bottom of your page - I had to do some of that when I first integrated my site.

Trevor,

Sweet write up, had this up and running in 2 mins flat. I did run into one small problem.

punBB is not "taking" the footer for the K2 style that I'm using but it displays the default
K2 footer style. Been playing around with this but I can't get this to work.

Take a look at www.diaz.nu then click on Forums.

Thank you!

Hi, thanks for the guide. I've two problems, perhaps you can help?

1) using the deault settings you provide, the forum is hard left against my k2 border (pretty much default k2). How can I make it centered like yours?

2) when clicking on a forum link (from the main forum page), the whole page seems to shift right 5 or 10 pixels. Any idea why?

Thanks!

Well, for number 2, try setting your k2 options to make sure it is fixed width. I think that might be the problem.

As for number 1, I'm not 100% what's up. Perhaps you could post a link to your site?

Hi,

I have fixed width. However, I got it working by hacking your css code:

#brdtitle { display: none; }
#brdmenu { padding-top: 0; }
#punwrap { padding-top: 10px; }

is what I have instead of:

#brdtitle { display: none; }
#brdmenu { padding-top: 0; }
#punwrap { padding: 0; padding-top: 10px; margin: 0; width: 600px; }

BUT, this causes a small problem in IE, where the right side of the forum doesn't go as far as I'd like.

All very odd. Anyone else had css problems?

(im using the latest K2 btw)

ty for the help! i got the code and hacked at it.. i got my forum in my site and working out a few little bugs.. but nothing major just got a few color issues to work out...lol..
on the margin i set it to 100% instead of 760px to make it fit my theme borders.
since i used the stucco theme. from alexkings website.i had to add the main id from the style to control the border and such after that it was just cleaning up the code.

Just thinking now to added the two db to one! so that both can share the memberships!
got any thingys on how to do that?

http://hntshosting.com/forum

thanks again!
Q

trevor,can you post the coppermine and how you did the store? im really would like to know..
http://hntshosting.com/forum
i got a paypal store in my site but i really dont like the feel of it.

Last edited Thu, 23 Feb 2006, 11:58pm by quaker

Q can the punbb be made to work off any theme once you select it in the wp theme manager?
i mean a intergration completely
i know there will be issue with the css from the punbb to wp.
i guess what im asking is can punbb be made into a plugin and droped in to wp-content/plugin folder activated in wp? (wp-forum) one man's dream..lol

If you could help me out with this I will be so grateful :)

Basically I followed your instructions, but when it came to the header I got this

http://satansam.co.uk/blog/punbb

The CSS I can fix myself with time. But I'm having sever problems with the blog links, I copy over the correct section of my Wordpress header.php document but it's just ends up all funky. I know there has to be a simple way of doing this, or should I just hard link the hyperlinks rather than using the automatic PHP?