Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS Tweaking in BP Member Theme

  • Avatar of Scotm
    Scotm
    Participant

    @scotm

    I’m trying to add a border to the main profile area within the Buddypress member theme but it’s proving difficult. Adding a border to the ‘main’ element in css/base.css only picks up the header area, and a border added to the ‘innertube’ element only captures the main activity area of the profile (excludes the optionsbar and userbar).

    I’ve tried a few attempts at a new ‘wrap’ element that successfully places a border around the entire profile area, but can’t seem to make it work for just the area under the ‘content-header.gif’ which includes the large avatar and the profile summary (base, activity, wire, etc.).

    Anyone have an idea how to solve this? You can view at http://blogpei.com/members/admin/

    Cheers

Viewing 6 replies - 1 through 6 (of 6 total)
  • Avatar of Lance Willett
    Lance Willett
    Participant

    @lancewillett

    Hi Scotm,

    For custom CSS, it’s best to create a file called “custom.css” in your theme — see the “custom-sample.css” in the theme (you can copy that file, rename it to “custom.css”, and modify it).

    For the border, you can probably use the #main element, like:

    #main {
    overflow: hidden;
    border: 1px solid red;
    }

    The reason the border doesn’t go all the way to the bottom of the element in your current setup is that there are floated elements inside of it — meaning that the parent element does not wrap them. Using “overflow:hidden” is a nice way to wrap those floats.

    Avatar of Scotm
    Scotm
    Participant

    @scotm

    Makes perfect sense…I’ll give that a whirl.

    Cheers

    Avatar of Mawjoud
    mawjoud
    Participant

    @mawjoud

    Is there a way to edit the relevant templates (and .css) right from the dashboard, as there is within the single user WordPress?

    Avatar of Wythagy
    Wythagy
    Participant

    @wythagy

    I don’t think there is Mawjoud, but you can use any simple text editor for something like a simple CSS file. There are also lots of free text editors like TextWrangler that are good for code editing (nice and color coordinated)

    Avatar of Mawjoud
    mawjoud
    Participant

    @mawjoud

    Thanks much Wythagy that is helpful!

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    Dear Lance,

    Talking about CSS, where could you modify the My profile page?

    It\’s a bit different from other pages as it has 4 columns — at least it looks like so.

    My problem precisely is that I want to resize my site to 800px width.

    I was able to do this in genetal but My profile still shows a widescreen.

    How I can handle this?

    Btw, IE6 automatically gives me the desired with no modification in any file,

    and I have noticed that there is specific CSS file for IE6.

    So I was wondering whether copying ie6.css to some other file would give the 800px display in Firefox, Chrome, etc as well?

    Can you help me?

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

You must be logged in to reply to this topic.