Topic: CSS Tweaking in BP Member Theme

CSS Tweaking in BP Member Theme

Scotm
Participant

@scotm

15 years, 7 months ago

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)

Lance Willett
Participant

@lancewillett

15 years, 7 months ago
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.
Scotm
Participant

@scotm

15 years, 7 months ago

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

Cheers

mawjoud
Participant

@mawjoud

15 years, 7 months ago

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

Wythagy
Participant

@wythagy

15 years, 7 months ago

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)

mawjoud
Participant

@mawjoud

15 years, 7 months ago

Thanks much Wythagy that is helpful!

Maythil
Participant

@maythil

15 years, 7 months ago

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?