Skip to:

Bit of theme help

  • Hey everyone,

    I’ve got BP up and running, and have modified my theme to accomodate it with general success. At this point, the only thing that is bugging me are the links on profile pages. – here you can see my profile page as an example.

    What’s bothering me are the links for interaction (i.e. Activity, Profile, Messages, etc.) – for one thing, they have too much padding between where they start and where the avatar ends. And the user links (i.e. Personal, Friends, Groups, etc. – which I realize you can’t see unless you’re logged in) show up directly beneath the interaction links mentioned above.

    I’d like to create some sort of distinction between the two, because as of now they aren’t very conspicuous on their own. I think I’d prefer that the user links sit above the avatar – and it would be great to format them to look a bit nicer.

    Anyways – if you’d like, you can register on the site above, create a user page, and see exactly what I’m talking about – but I realize that may be asking a bit much. Really, I would just like a pointer in the right direction as to what CSS I need to be editing to get those links behaving a little better.

    Thank you!

    EDIT: I also just noticed that the “active 0 seconds ago” text by the avatar is not correct. Any insight into that would be helpful also. I am utilizing the tweetstream plugin if that makes any difference.

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

  • jivany


    Install Firefox (if you haven’t already) and then get the addon called Firebug. This will help you immensely when you are trying to track down what CSS to edit. You can even edit values on the fly in Firebug and see their immediate impact. Then al you have to do is take those changes and toss them in your child theme’s style.css file.

    And to be fair to Webkit-powered browsers, the “Developers Tools” menu does this and is pretty powerful, too.

    Thanks for the advice – I have used both firebug and the development tools in Chrome, but it didn’t get me where I needed to be. I probably need to put in a bit more effort, I’ve just been short on time lately. Any other suggestions?

    The issue is that whatever theme you are working with has a style.css that applies rulesets using descendant selectors and on the elements you mention your style.css describes generic styles for things like ul li elements but as child elements of parent such as #content.

    The stylesheet that appears to be created to apply the necessary styles required by buddypress i.e bp.css is styling on the class tokens.

    As an example the div.item-list-tabs ul element requires and has a margin:0 applied in bp.css however in styles.css you have #content-body ul applying large margins and this ruleset has a higher specificity or weight due to the use of the ID selector which will override the clas selector described in bp.css.

    I’m afraid that you have a little work to do to in getting whatever theme it is to work for BP, perhaps the fastest approach is open up bp.css and where you have :

    div.item-list-tabs ul {}

    Add to the beginning of the selector statement #content-body

    #content-body div.item-list-tabs ul {}

    This would enusure that the BP rules carry a higher weight and will win out or overrule.

    Thank you, hnla, that was very informative. I will give that a whirl tomorrow and report back with my progress.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Bit of theme help’ is closed to new replies.
Skip to toolbar