Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS question

  • Avatar of macgamer
    macgamer
    Participant

    @macgamer

    Hi
    I’ve just installed the BuddyPress plugin for my site, and updated the theme. It all works ok, but there are a couple of quirks I can’t figure out.

    First of all, hovering over a tab causes the page to shift down.
    Secondly, the selection boxes on the right (e.g. “Order by:”) don’t seem to be aligned properly.

    So far I’m struggling to see what the CSS is that’s causing these issues.

    http://www.controlcommandescape.com/members/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Avatar of stefwilliams
    stefwilliams
    Participant

    @stefwilliams

    Hi,

    Just had a quick look using dev tools in Chrome, and it looks like the hover tab issue is because you’ve got a border-bottom set on a:hover, as well as various other anchor hovers. Either look through and remove all of those, or add a bottom border to the ‘unhovered’ state.

    and the positioning of the select box is because of:

    div.item-list-tabs ul li.last {
    margin: 7px 20px 0 0;
    }

    You could try changing the right margin (the 20px one) on that…

    It’s well worth using dev tools if you don’t already. Open Chrome and press F12. For anchor hover states and such to chow, make sure you select the ‘show inherited’ box. Then, you can select the magnifying glass tool and hover over items of interest in the main region which will highlight the relevant CSS in the panel below.
    (Sorry if you know about this – don’t mean to patronize, but the info might be useful for others).

    Good luck.

    Avatar of Hugo
    Hugo
    Moderator

    @hnla

    edit// X posted with above

    There are a number of properties that won’t suit your theme such as 100% width and margin left that is causing the issue for order-by li selector.

     

    All those styles are maintained from bp.css in the template pack plugin folder, you can either try and override those styles using the themes style.css file or disable those styles and copy them over to your theme somewhere more convenient to work on. You will probably need to get comfortable with using Firebug to identify what rulesets are managing a particular aspect of layout elements.

     

    Alternatively if you can wait BP 1.7 will dispense with the need for template pack and allow BP to work with any theme making life much easier for non coders.

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

You must be logged in to reply to this topic.