Adding a right sidebar to kakumei
Hi, all –
I’d like to look into adding a right sidebar to my kakumei. My intent is to just copy the right sidebar code from my blog, but…it’s not clear where I should insert it. The taxonomy of kakumei appears somewhat different than the theme for my blog, in that there’s no “index.php” that does all the includes for the pieces of the page.
Can someone point me in the right direction? I don’t imagine that I’m the first one to tackle this.
Oh, and…thanks to all those who created and manage bbpress. This is quite a nice tool.
When you say “copy” do you mean “have the wordpress sidebar in bbPress” so it will be dynamic, just like it is in WordPress? Or, will you just copy and paste the code for a static sidebar into bbPress and it will never change?
If you want the former, you need integration, and you need to include WordPress inside bbPress so you have access to WordPress functions, like get_sidebar();.
If you want the latter, you just need to modify your template files to include the sidebar where you want it, and then modify the CSS to allow the space to exist in your forum.
The only thing in my right sidebar is links to outside the blog. I don’t think I need any WP calls for that.
Now, having said that…how does one make WP functions available to BB? Is it just a matter of including paths to the WP files in the BB files’ headers?
Not the header files, but the wp-load.php file. You would want to include the absolute path to that file, so that your administration area is able to access it as well.
I am not at home currently but I can explain in more detail in a few hours.
Sidebar would be done in the header.php or footer.php like it’s done in WordPress usually too.
However if you need wordpress functionality in the sidebar you’ll need to do full integration (which I personally recommend against but many people do anyway).
OK, thanks, CK. I’m not sure what people mean by “wordpress functionality,” but all I’m intending to put there is a list of images with external links. Nothing particularly WP-specific.
WordPress functionality means being able to use WordPress functions, in bbPress. There are WordPress functions called
get_sidebar();that exist in WordPress. Some people would like to use call these functions in their bbPress templates so they can get the exact same footer, header and sidebar in their forum as they have in the WordPress site. To do that, you need to do “full integration” which is what _ck_ is recommending against.
To just put a list of images with links in your sidebar, you need only modify your template files. You need to create space in the template where you want the sidebar (maybe forum.php in your template folder) by creating an additional div, maybe call it
#rightsidebar. Now, you need to edit your style.css to make the other
divs smaller (less wide, and then make the
rightsidebarwider to fill the space you created. If they theme you’re using doesn’t have enough space for all that, you might need to increase the width of the whole layout.
I think the first step is to make the space on the page where you want it, get that working. Then, get the list of images and links in there. That’s how I would go about it. It doesn’t sound like you need access to specific WordPress functions.
The reason why “full integration” isn’t ‘recommended’ is because WordPress is pretty sloppy with the number of database queries that it runs, sometimes into the hundreds per page load. bbPress tends to be very efficient in this department, so going from 9 queries to 30 queries for no real reason doesn’t make sense.
_ck_ made a topic about how to create a query without doing full integration, and I highly recommend using that method in most instances. It will allow you to have much more control over what you’re doing and how it’s doing it.
For the sake of being easy, full integration will provide you with every available WordPress function and ability, many of which you will never need or use. I personally am using full integration because I’m still poking my head around trying to figure out what’s all possible to do with it, and it does work very well, just a little slower than a non-fully integrated install of bbPress.
Well…I’m running into some difficulties with this. It seems that the default theme (kakumei) doesn’t like to be compressed into any less (horizontal) space than it currently uses.
Any opinions on whether my right sidebar should be typed under main or outside of it? If I do it within, I need to chase down some width definitions, both explicit and otherwise.
That doesn’t sound right. You can cram pretty much whatever you want into whatever space you have.
Have you looked at some of the other themes that are available?
Simply look at how hot-tags are done on the front page in kakumei.
There is a #main wrapper for all the content and then hot-tags is on the left.
You can move the tags below and use the area on the left as a side bar.
If you look in header.php you’ll see where #main opens.
You can make a sidebar below there.
Here’s a first approximation of a right sidebar.
As you can see, I need just a little more room on the right than I’m getting with the current defaults for the theme. I tried altering the width parameters in style.css, but that quickly became a rat’s nest. I concluded I wasn’t approaching it correctly.
It’s really preferable (from my perspective) to shrink the width of the tags and/or discussions sections, so the right sidebar can fit. That way, the right sidebar can remain consistent between the forums and the blog.
Chris: I was unaware of the wealth of other themes available; thanks for the link. Do you have any idea whether some of those might be more flexible?
You need to move the hot-tags area to get back the width.
So, I can’t compress the middle, eh? Unfortunate, but OK…any instructions on how to move the hot-tags?
You can also compress the middle.
Knowing CSS will help a lot.
OK, I’m almost ready to deal with compressing the middle of the page. First, I want to track down the final glitch in my sidebar presentation. I’m attempting to add some padding to the text “ScopedIn’s Sponsors” at the top, which is formatted as h2. (I do this on line 822 of my style sheet.)
For some reason, though, line 822 seems to be being overridden by some code *earlier* in the stylesheet (on line 315), that undoes my padding. I thought css interpreted from top to bottom; what am I missing here?
#main #sidebar h2
and it will work.
Thanks, chris…I sort of just discovered that myself. So, what did I learn here: that CSS definitions have to “agree” with the nesting of divisions in the HTML? And…why didn’t I need a #front-page in front of the #main?
Anyway, since I finally seem to have the sidebar displaying well enough to move on…
…my first attempt to get the discussion and sidebar to fit side-by-side was to shorten the width definition on line 306 of style.css. This sort of worked, but not really. I thought that making a similar change on line 635 would help, but it didn’t seem to do anything.
Why isn’t the #forumlist id “honoring” the 550px directive?
So, what’s not working now? Latest discussions is OK, but the forum list is too wide?
Yes, and the other pages are too wide, too. I’m hoping there’s a semi-common root to this. I do see some CSS properties via web developer that I can’t find in the stylesheet, too (for the tables).
OK, then…perhaps I should consider a different template. Does anyone want to recommend one that’s a bit more flexible than the kakumei?
This is like CSS 101.
On every page in kakumei, the width is controlled by #main which is 760px
Make a new wrapper that superceeds #main (wraps #main, not replace it) and in side that wrapper make #main float:left, then create a new div for the sidebar which floats right.
Then adjust the width of main and the sidebar as necessary to fit your desired page width.
#wrapper open (forced width 960px)
#sidebar (float:right: 150px)
#main (float:left 760px)
My template already has a wrapper to main, and I’m using it. I had moved my sidebar within main (at an above recommendation), and I’ve now moved it out. I’m satisfied that there are plenty of classes/idents to get the job done.
My problem is: for compatibility purposes, I want a wrapper width of 970 and a sidebar width of 220. Therefore, I’d like to squeeze main down a little, but, as I pointed out above, it doesn’t seem to take to being squeezed. Specifically:
#front-page #discussions (line 305)
The width directive here doesn’t seem to work. I’ve plugged in smaller numbers, but the width seems to stay the same.
I imagine I can jury-rig this (already have) by squeezing the hot tags section instead, but I’m going for a clean kill here, and I don’t know what problems this approach might cause down the road. This is why I asked what I was doing wrong with changing the width directive for the discussions section.
You must be logged in to reply to this topic.