I have created a bbPress starter theme with a phpBB look and feel
-
Hey all,
I thought I would have a go at creating a quick and easy theme for people to get started using bbPress. This was built fairly quickly using one of my other themes (which are based off the default bbPress files).
If you want to check it out then have a look at: http://www.epicwebs.co.uk/content/bbpress-theme-invision-or-phpbb-feel or check it out on github https://github.com/EpicWebs/bbPress-starter-theme-epicwebs.
The theme allows you to get more of a phpBB or invision look to your forum. It uses the functions I posted previously on bbPress.org along with some css to get the forum looking nice by installing the theme. The forum should be pretty fluid so it will fit any width of site.
Good luck, I hope this helps!
-
This is a fantastic change, just what i was looking for, having recently moved from a Webwiz forum, I was looking to gove my users a similar experiance to what they had there, BUT……
My avatars are looking strange, and the Catogories are not lining up properly.Most are correct, but some are different widths.
Please have a look at and let me know what I need to change. This is a test site, running WordPress 3.8.1 and the Klein 2.0.2 theme and bbPress Version 2.5.3. with Buddypress Version 1.9.2.
Thanks once again for the fantastic work you have done.
here is the link to the test site
link hereHi, I tried your “bbPress starter theme with a phpBB look and feel” (downloaded from github), I have placed all files in my theme folder, but I have several problems:
1. On forum index http://batman.scifi-guide.net/forums you can see title of the last Forum on the very top.
2. If there is no topic in forum section, freshness link is displayed and heads to the Category
3. sub forums page looks very strange http://batman.scifi-guide.net/forums/forum/arkham-seria when compared to http://teamoverpowered.com/forums/forum/general-forums/
I am using latest WP and bbpress.
How to fix these issues?
Thank you.
I have followed the directions on how to get the files into my theme page but WP and I are not friends and I am completely lost. I purchased a theme called Gamecenter. That is where I uploaded the files for this starter theme. In the bbPress Theme Options area I need to enter IDs or classes to hide sidebar options. I have no idea what the IDs or classes are. In the dashboard the theme has its own settings and I can change the look to no sidebar, left sidebar, right sidebar, etc. I want a right sidebar for the site except for the forums. I have looked in all the templates that are listed on the right but I have no idea what I am looking for. Here is the page where the forums are – http://www.thepsijicorder.com/psijic-order-forums/ – please help a lost soul who can’t figure this out!
Still looking for help on figuring out the IDs to see if the experimental removal of sidebars will work for my forums page. Please help.
@foxden vixen
make custom post/page template without sidebar, name it bbpress.php and place into your themes root
thats what I did http://batman.scifi-guide.net/forums
@foxden-vixen try:
DIV.sidebar.right.clearfix
or
DIV.sidebar.right
If that doesn’t work in the experimental section, try pasting this in your style.css:
.forum-archive DIV.sidebar.right { display: none !important; }
Halo thank you! I used the CSS code you provided. That worked for the front page of the forums. When I go to categories the sidebar is back. So any more code that you can throw at me to prevent the sidebar for other parts of the forum?
@foxden-vixen try adding a comma and:
.bbpress .single-forum DIV.sidebar.right, .bbpress .single-topic DIV.sidebar.right
after where you already have in the css:
.forum-archive DIV.sidebar.right
so it says:
.forum-archive DIV.sidebar.right, .bbpress .single-forum DIV.sidebar.right, .bbpress .single-topic DIV.sidebar.right { display: none !important; }
Thanks again Halo. I will have to wait to test this out as bluehost.com has my site down…in fact a bunch of sites are down. Once the site comes back up, I will test it!
The site is back up today and I tested it out. It did not work the way you wrote the code.
.forum-archive DIV.sidebar.right, .bbpress .single-forum DIV.sidebar.right, .bbpress .single-topic DIV.sidebar.right { display: none !important; }
should be
.forum-archive DIV.sidebar.right, .bbpress.single-forum DIV.sidebar.right, .bbpress.single-topic DIV.sidebar.right { display: none !important; }
Just taking out the spaces between bbpress and single worked. The syntax was incorrect.
One other stupid question…at the bottom of the main page, which I guess now is called the archive page, there is the “read more” tag. How do I get rid of that? Doesn’t that have to do with the loop?
@foxden-vixen That’s awesome you figured it out! Often it is hit and miss for me too.
I use FireFox FireBug and right-click, “Inspect Element” anywhere on a webpage and it tells me what that element is called. The “Read More” element on your page is called a.readmore and the ‘display none’ css should work for that. Maybe:
.forum-archive a.readmore { display: none; }
I should encourage you to start a new thread for topics that don’t go with the topic you are in, though 🙂
Thank you again Halo. This worked for me. I use the Google inspect element and kept trying all sorts of things but nothing was working for me. I will remember in the future to place a different question in a different topic!
Hi, i installed the theme and now it looks like this, the avatar is very bad looking.
http://mmo4teens.netai.net/forums/forum/main-discussion/main/. Anyone can help me fix this ?Hmm… not sure what’s going on here. Have you tested it on a default theme?
My avatars were not doing that the last I checked. I’m pretty sure they were auto-resizing smaller, and fitting in quite nice. But, I stopped using this bbPress theme before the last couple WordPress updates because it’s not responsive, and the default bbPress is. It’s possible something changed in the WordPress code to make it act different.
If you can make a child theme, you could try this to change the avatars’ size on the page where they’re squished with css:
bbp-topic-meta .avatar { width: 30px; height: 30px; }
sr, my site is now here http://mmo4teens.netai.net/forum/forums/main-discussion/main/.
This is what Im asking for. The double avatars. Can you help me with it ?
And the theme works normal for me if anyone is wondering.Sr for double posting but I dont really need the avatar except for inside the topic itself so if anyone can provide me with a way to disable the avatars, that would be good too. Although if possible, a nice configure avatar woyuld be a lot better. Thanks in advance.
You have not created the css to align the elements inside the UL
Try to add a float:left on .bbp-topic-counts
Check Chrome and use the inspect element with right mouse, there you can play a bit with css.
Good luck
P.H.Sorry Peter but I’m not a programmer or such so I cannot understand what you’re saying, can you provide a step by step for me ?
I can use custom css plugin but that’s all.
I tried your code with custom css and now it looks different but still weird nonetheless. Any suggestions ?
@gogitossj34 this code is what your problem is, it changes the size of all avatars in your site.
.avatar { width: 60px; height: 60px; margin: 0 0 1.5rem; border: 1px solid; border-radius: 50%; }
the distorted avatar image is because there is a function in your templates that is used to call the user avatar , and in the function it is proportioned to be at 14px X 14px. your css code stretches this out 14px avatar to be 60px X 60px causing a distorted avatar image.
to remove the distorted image just add this to custom css
.avatar-14 { display: none !important; }
it should work
i dont know what exactly is causing your double avatars though , i would guess that it is the “started by” avatar like how these forums have.
But i am not for sure.
If you want to keep the avatar next to freshness only tell me
I’m not a programmer or such so I cannot understand what you’re saying
im no programmer i had practice with trial and error, and all this is basically common sense
Thanks a lot, I’ll give it a try. And I do agree on the practice with trial. I’ll report back soon.
It successfully removed all avatars from the forum. So, what if I want to keep the one at freshness ?
well if you want the 14px avatars by started by and the freshness try this instead
remove the code i gave you before and add this
.avatar { width: auto; height: auto; margin: 0 0 1.5rem; border: 1px solid; border-radius: 50%; }
and then you can resize certain avatars by providing their class then .avatar then the css
The double avatar was fine, because there were two instances on that page that were calling for the avatar; If there were more posters there could be two different avatars there.
The only problem I saw was that they were too large on the one page and it was nerfing your layout. The code I gave you above worked when I tested it, what was it doing that wasn’t working for you? If you have Gyazo or some other way to show a screenshot, that would be helpful, since you are still playing with it and it’s changing when we go to look.
My opinion is that the larger avatars looked great in the other areas of your forum, and that you only needed small avatars in that one spot so that they didn’t make your layout look wonky.
OK, the way I see it is like this.
There are two avatars cause the forum/topic list has two elements that use an avatar.
1. the avatar from the poster of the topic, this avatar is there with the topic title.
2. there is in the freshness an avatar displayed for the reply poster.In between the topic title and topic freshness there is an element that handles reply, post and/or voice count.
This makes three elements inside this forum list, two with an avatar, hence two avatars.
The list itself is situated in an UL (unordered list in a bbpress php file called loop-single-reply.php).
This ul has three LI (list) elements inside it, the first topic-title, second topic-count, and third topic-freshness.
btw, you have a cache plugin that prevents s to check your CSS in chrome etc.
This line of code will put the avatars where they need to be, you just add this to your themes CSS file, and remove the display:none from your .avatar CSS.
#bbpress-forums li.bbp-body ul.topic {
border-top: 1px solid #eee;
overflow: hidden;
padding: 8px;
float: left;
width: 100%;
}Here is how it looked for me after adding this.
good luck
Peter HamiltonYour instruction was great, the avatars looks great. Is there anyway to make them look slightly bigger ?
Nvm, I figured it out
- You must be logged in to reply to this topic.