Topic: How to add a second sidebar to FishBook theme to make it 3-Columns?

How to add a second sidebar to FishBook theme to make it 3-Columns?

@synetrix

Member

13 years, 10 months ago

I hit a brick wall while trying to convert a 2 col theme to a 3 col theme

The Fishbook (BuddyPress BuddyPack) theme by Michael Kuhlmann is a very great theme and possibly the only free facebook clone theme out there. The problem is that the only version that seems to be available has one sidebar only.

I have been trying to add a second sidebar on the right but try as much as I could, I’ve not been able to. I was able to get the second sidebar to appear but not in the right place (mine appeared at the top of the page).

I even tried following the example of BP-Columns 1.2 which is a three column version of the Buddypress default theme but I still couldn’t get it to work properly.

I will be mighty glad if someone can point me in the right direction.

PS: In my search for answers I noticed that this same question has been asked several times in other threads and forums but the answer is always inconclusive. I believe that a working solution to this challenge will be GREAT news to a lot of people out there.

Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

@fishfinder

Member

13 years, 10 months ago

I have one solution here for you, although it’ll be up to you to deal with cross browser compatibility as far as the css goes. If the second sidebar is not going to be present on every page, you are going to have problems using this code. ….. be warned!!!

If you are doing this on a live site, make sure you have full backups of your template files. I set this up on an install that I’m playing around with. Its not a live site, it is a place for me to muck around with wordpress and buddypress.

This is just a starting point, but if you know your css you should be just fine

Step 1.

We’ll start with single.php here. this file is found in the bp-default theme folder

around line 57, find this code:

“

Copy that, and paste it a second time right below itself. Add a 2 to the part that says sidebar.php so your two lines now look like this:
“
“

move those two lines to lines 2 and 3, right below
“

Step 2.

Now copy and save sidebar.php as a second file called sidebar2.php. Put that file in the bp-default theme folder so that now you have sidebar.php and sidebar2.php both in there. Open sidebar2.php in a text editor and change the first div at the top from `

` to `

` and save and put this back into the bp-default themes folder.

Step 3.

Open up the style.css file in the fishbook template folder in an editor.

paste this into that css file:

`div#sidebar2 {
float: right;
width: 224px;
}`

step 4.

now we need to shrink the content area in order to make things fit.

locate: div#content in the css file you have open from fishbook.

replace the css rules with this or something similar. note that this will change the content div dimensions on all parts of your site. you will need to rework the content div structure and names if you only want this happening on certain pages in your site.

`div#content {
position:relative;

width: 55%;
float:left;

}`

this is not cross browser compliant, so you will need to know your css and how to set this up for cross browser compatibility.

Thats a bit of a place to start off anyways. I wish I could be of more help, but I’m not that great with css. If i do manage to come up with a solution that has proper css, I’ll come back and post here.

You would need to place the same code (“) into whatever other files you want to see the second sidebar in. ie. page.php, archive.php, etc.

hope that will help you out in getting started anyways!

dave

@ajmatus

Member

13 years, 9 months ago

FishFinder i would bow down to your knees if you could continue with this jaja. No man seriously, that’s an awesome start. so what would you call a complete finishing up touch to this? and cross browser compliant? I’m a mindless guy with css, i would appreciate if you could continue your tutorial. And i don’t mind if the three colums show on all pages, i think thats what i would like best.

Thanks!!

@futbolfrank

Member

13 years, 9 months ago

On the other hand…how would you make a full-width template? I’m trying to find a page.php file, but it does not seem to be included in the theme.
Shouldn’t this template be quite easy?
Thanks!

@r-a-y

Keymaster

13 years, 9 months ago

Child themes usually don’t include page.php; they usually inherit it from the parent theme, which in this case is the bp-default theme (/buddypress/bp-themes/bp-default/).

However, you can easily make such a template yourself.

Just create a page.php in your child theme and customize!

@gcortex

Member

13 years, 7 months ago

In “members/admin/activity/” When i click on a member post and it opens in a page without the sidebar, the header is cutting out the logo… do you know how do edit this header without modifing the main header ( that fits ok )

@pbarthmaier

Participant

13 years, 1 month ago

I’m using Buddypress 1.5.1 and I don’t have:

“

around line 57. On line 56, however, I have:

“

I’m not a coder, but can I put a call for sidebar1 and sidebar2? Would one go before the Content Div and one after?

I am using a Child theme, too, by the way, with bp-default as the parent theme.

@flixya4gabby

Participant

12 years, 5 months ago

Hello fishfinder. Your tutor about this is the best I have seen so far. I have spent countless hours searching on Google, bing, and Yahoo about this. Your tutor indeed is clear but my problem is that I am using the latest version of buddypress, so I am not able to see the locate template stuffs in my single.php file. Please I really do need your help here. If someone else here have found a solution, please help me by droping the link and your help will be well appreciated. Thanks.