Skip to:
Content
Pages
Categories
Search
Top
Bottom

I have created a bbPress starter theme with a phpBB look and feel


  • Lynq
    Participant

    @lynq

    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!

Viewing 25 replies - 101 through 125 (of 128 total)

  • MarkFreebs
    Participant

    @markfreebs

    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.


    MarkFreebs
    Participant

    @markfreebs

    here is the link to the test site
    link here


    davidkooo
    Participant

    @davidkooo

    Hi, 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.


    foxden vixen
    Blocked

    @foxden-vixen

    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!


    foxden vixen
    Blocked

    @foxden-vixen

    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.


    davidkooo
    Participant

    @davidkooo

    @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


    Halo Diehard
    Participant

    @halo-diehard

    @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;
    }

    foxden vixen
    Blocked

    @foxden-vixen

    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?


    Halo Diehard
    Participant

    @halo-diehard

    @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;
    }

    foxden vixen
    Blocked

    @foxden-vixen

    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!


    foxden vixen
    Blocked

    @foxden-vixen

    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?


    Halo Diehard
    Participant

    @halo-diehard

    @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 :)


    foxden vixen
    Blocked

    @foxden-vixen

    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!


    gogitossj34
    Participant

    @gogitossj34

    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 ?


    Halo Diehard
    Participant

    @halo-diehard

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

    gogitossj34
    Participant

    @gogitossj34

    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.


    gogitossj34
    Participant

    @gogitossj34

    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.


    peter-hamilton
    Participant

    @peter-hamilton

    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.


    gogitossj34
    Participant

    @gogitossj34

    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 ?


    Robkk
    Participant

    @robkk

    @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


    gogitossj34
    Participant

    @gogitossj34

    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 ?


    Robkk
    Participant

    @robkk

    @gogitossj34

    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


    Halo Diehard
    Participant

    @halo-diehard

    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.


    peter-hamilton
    Participant

    @peter-hamilton

    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.

    CSS changes on a bbpress forum

    good luck
    Peter Hamilton


    gogitossj34
    Participant

    @gogitossj34

    Your instruction was great, the avatars looks great. Is there anyway to make them look slightly bigger ?

    Nvm, I figured it out

Viewing 25 replies - 101 through 125 (of 128 total)

You must be logged in to reply to this topic.