Skip to:

CSS Tweaking in BP Member Theme

  • 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


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

  • Lance Willett


    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.



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




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



    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)



    Thanks much Wythagy that is helpful!



    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)
  • The topic ‘CSS Tweaking in BP Member Theme’ is closed to new replies.
Skip to toolbar