Skip to:

Newbie needs help with 4 design elements

  • dblast


    Hi everyone, I’m new to buddy press and .css I’ve been monkeying around for a couple of hours trying to solve these four design problems with the theme.

    Here is a screenshot;

    #1 Get rid of the title and let the header image be visible instead.

    #2 Get rid of the white border from the page that extends past the sidebar

    #3 Bring Tabs down even with the white edge

    #4 Widen the text space. Somehow while monkeying around I may have shortened the width the type extends to or the avatar at the top left is moving the text over. Is there a way to have the text run to the left side like the right and flow around the avatar box in the top left corner?

    I appreciate the help, I’m new and lost.


Viewing 10 replies - 1 through 10 (of 10 total)
  • SC just serve to show what’s wrong but aren’t much help in working out what styles need adjusting/correcting.

    If that site is live post a link to it, that way people can use debugging tools to examine and test what needs changing.





    To get rid of the title, go to your stylesheet (.css) and find #header h1



    And the title will disappear.

    A couple tips:

    1. Use Firebug or Google Chrome’s built in developer tools to troubleshoot style issues

    2. Use a child theme (search Buddypress Child theme) or you will lose your changes



    Thanks folks, so far so good. I moved the tabs over fixed the background but I still have four fixes I need to do;

    Here is an updated screenshot;

    #1 FIXED – By fixing the background graphic I exposed a rounded corner that I need to make straight. FIXED!

    #2 I want to get rid of the search field in the header

    #3 The white border from the content page extends past the sidebar. I want to get rid of that

    #4 The text seems to be forced over by the avatar (upper left) is there a way to flow the text around that? It looks goofy with the big gap on the left side of the page and it’s waste space.

    #5 Not illustrated, I’d like to move the avatar in the side menu under the Advanced text widget.

    Again thanks for the help. I’ve been over to and help over there is scarce. Nice to see you folks willing to help out a newbie.

    You mean like this? :-)

    Yeah ok it was early and I’m not a smarty-pants :-) and that url in address bar of the SC was barley legible. :-(

    I was going to have a look at the last few points for you but checking that link so neatly provided by 3sixty proved not actually to be the BP install? QED? or have you disabled BP?



    Hmm.. That’s Odd. I changed it back to the original theme but Buddy press is still running. I changed it back.

    Thanks, I appreciate the help.


    What I’m looking at needs some work before tackling the detail mentioned above.

    at the moment you have a conflict between master elements wanting to be fluid and others fixed, it’s probably easiest to simply let the layout run as fully fluid initially. I would remove or override the default.css body min/max widths and width (you can come back to body later and set appropriate min-width)

    You are calling your header graphic twice, decide on one image call and ensure it’s set to no-repeat (unless you want to repeat the name?)

    Remove the bottom margin on #header, increase it’s height to 150px set a background color to the blue and a background-position: 0 50%, these are best set as background shorthand declarations.

    Personally I would do the #header differently and would always tend to favor a image replacement technique; ‘header would simply have the background color the image would be sliced close cropped to the text and set on a span withing the anchor element that span is then positioned absolute so that it hides the anchor text .

    This starts to get the layout looking correct as long as you are after a fluid full width layout; body can always have a min-width to prevent the layout collapsing too far.

    As for the main text within .entry I’m afraid the way it’s set out doesn’t easily allow for just that text to be dragged over to the left margin. A quick fix for that would be to remove the left margin from .post-content but add left margin to .post-title and .post-date, better might be to move the .author box into the ..entry div but you’ll need to play around and find what you like best.



    Hmm.. A lot of what you just said sounds like Chinese, but I’m going to dive in later and give it a shot.

    My original blog;

    Is laid out the way I like it. But when I installed buddy press keeping it that way did not seem possible because I was over my head with the .css

    If I could get it to look like the original with the bp like this;

    That would be great. I get to have my cake and eat it too. In that capture I moved the tabs down into the content part of the page (wishful thinking since I don’t know what i am doing).

    My biggest problem is when I run my old theme through the correcting plug in all the areas such as forums, groups etc. look wonky and less colorful.

    What I would like is to get it to look like my old blog (screencapture) with the buddy press running and the elemenst (forums, groups etc) maintaining their visual appeal. Somehow the filter/plugin strips out or changes visual elements.

    Again thanks for all the help. I appreciate it.

    What I described will get the front page pretty close to your original blog layout, there will be certain compromises , possibly ,that have to be accepted, but it may also be a case that the conversion has missed a few steps? or is incomplete but I have no knowledge of the template pack plugin I’m afraid.

    There are aspects of the new layout I don’t get such as the 140px x 1000px background that exists in the new version that didn’t in the original and doesn’t look as though it’s really required, it looks as though it’s to facilitate faux columns for a layout that follows default themes body rules for min/max and main width values.

    You will be able to play around with aspects such as tab positioning and login form but I would take things a step at a time and concentrate on the primary layout elements first then come back to detail.



    Odd.. My posts are not getting posted!

    I’m trying again.

    Yessssh. I was looking at a cached version of the site and the one you were looking at was horrible. I’m not sure what happened to that theme, but I switched it to the one I was looking at.

    Take a look when you get the chance, I’d appreciate any feedback and help.

    BTW I just bought wordpress and buddypress for dummies.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Newbie needs help with 4 design elements’ is closed to new replies.
Skip to toolbar