Skip to:
Content
Pages
Categories
Search
Top
Bottom

Extending login-search-bar to width of browser page?

  • Avatar of KitWit
    KitWit
    Participant

    @kitwit

    Sorry if this is answered elsewhere … I looked through the forum but could not find an answer. And a second apology in advance since this is obviously a basic CSS question. Have pity on me!

    I’ve modified my BP installation so that my login-search-bar at the top has a different color scheme, but now the bar does not extend to the full width of the browser opening (which makes it look funny).

    Any pointers to get this bar to extend to full width? See here if you want to see what I’m talking about: http://business.mountainprideconnections.com

    TIA.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Avatar of John James Jacoby
    John James Jacoby
    Keymaster

    @johnjamesjacoby

    Either you fixed it, or I’m missing it, because it looks fine in Chrome, Firefox, and IE for Windows.

    Avatar of KitWit
    KitWit
    Participant

    @kitwit

    Apparently the bar doesn’t extend to the full width of the open browser even in the default installation (I assumed it did), but if you notice how this installation of BuddyPress is configured here on the BuddyPress site (the page we’re on, in BuddyPress.org), the bar at the top extends full-width! Since I can’t peer into this site’s base.css file for the theme I’m wondering how to change that attribute … ?

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Since I can’t peer into this site’s base.css file for the theme I’m wondering how to change that attribute … ?

    Ah, but you can!

    For all CSS and template design issues, I highly recommend that you use the Firefox browser with the Firebug Add-on. WIth FIrebug installed in Firefox, you can see where page elements inherit their CSS–the file names, the file contents, etcetera. You can even make changes to the CSS selector parameters and see how that affects the design.

    So, when you pull up any buddypress.org page, or any webpage at all, you can use Firebug within Firefox to see how the CSS selectors are styled.

    Avatar of KitWit
    KitWit
    Participant

    @kitwit

    Oy! Of course … I forgot to use Firebug on THIS site … sometimes the most obvious stuff trips us up! Thanks, Jeff!

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Kit-

    Is this issue resolved? If so, please set the topic as resolved!

    Avatar of KitWit
    KitWit
    Participant

    @kitwit

    Jeff–

    No, it’s not resolved yet. I can’t seem to get this to work. I’m still not sure which CSS attributes are controlling the width of the search-login-bar at the top of the page, despite having looked them over in Firebug. Here is the CSS code I see when I use the inspector to examine the Buddypress web site:

    #search-login-bar { custom.css (line 70)

    background:#EBEBEB none repeat scroll 0 0;

    border-top-color:#0090FF;

    }

    #search-login-bar { base.css (line 43)

    background:#FFF9DF none repeat scroll 0 0;

    border-top:10px solid #F7740A;

    padding:7px 10px;

    }

    And then here is the code I see when I inspect the same element in my installation:

    #search-login-bar { [base.css (line 50)]

    background:#CCCCCC none repeat scroll 0 0;

    border-top:10px solid #CA3495;

    padding:7px 20px;

    }

    Any tips would help (I know this is a totally elementary, if not kindergarten-level, question!).

    Thanks.

    Avatar of John James Jacoby
    John James Jacoby
    Keymaster

    @johnjamesjacoby

    I know you don’t believe me, but I promise you that I’ve looked this over on every Windows browser, and it looks just fine to me.

    Can you post up a link to a screen shot of what you see?

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    In FF and Safari for OSX, I see that the gray background does not extend all the way across the screen. Of course, I have a 24″ screen. If I resize my browser window, the problem “goes away.”

    What size monitor are you using?

    I see that you’ve hard-coded in base.css the maximum body tag width to 1300 pixels and the minimum width to 960 pixels. This is different than the body selector used in bp.org’s bass.css file. There are no max or min values set.

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Kit-

    Make sure that you have backups of your CSS files before trying my suggestions.

    In base.css:

    Remove max-width:1300px;

    min-width:960px;

    Then, change these two selectors as follows:

    #header {

    margin:25px auto;

    width:1245px;

    }

    #content {

    margin:10px auto;

    width:1245px;

    }

    Of course, you can set your width to whatever you like.

    You’ll also have to add back the <div class=”padder”> division to make the various form boxes within the search bar line up with your header. Using Firebug, look at how this is done in bp.org.

    Avatar of John James Jacoby
    John James Jacoby
    Keymaster

    @johnjamesjacoby

    Good find Jeff. :thumbup: I needs me one of them fancy Macintoshes. :)

    Avatar of KitWit
    KitWit
    Participant

    @kitwit

    Jeff–

    I’m also using a large 23″ monitor, but I have not changed any of the widths in the CSS that you note in your message previous to the last message. Those are the values that come “in the box” in the default BuddyPress installation. But it’s clear that the designers of the BuddyPress.org website have changed theirs … I’ll try to make those changes and see if that makes a difference.

    Isn’t there just a simple way of making this feature expandable to the width of whatever browser window my visitor may have? Like using a percentage size instead of a fixed pixel width? What if a 30″ monitor comes along and wishes to view it? :-)

    (John James J … yes, I believe you are seeing what you say you are seeing, for sure! Maybe my problem is that I have too generous a browser window … but on the BuddyPress site this top bar expands to fit whatever size window I make in my monitor … but my own version of the theme doesn’t do this, nor does the “out of box” installation of BuddyPress … there is always a gap!)

    Thanks for the code!

    Kit

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Kit-

    Okay, I just fired up the default bphome theme and see that what you’re trying to change is indeed the standard CSS setup. So, once again, you get to create a custom theme!

    Follow the same procedure as before. Make a backup of the standard bphome theme, rename it to something new, and make the changes I’ve outlines above. They should flow through to your customized bpmemebr theme as well!

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

You must be logged in to reply to this topic.