Topic: Styling Group and Members Headers · BuddyPress.org

Skip to:: Content; Pages; Categories; Search; Top; Bottom

Styling Group and Members Headers

hughshields
Participant

@hughshields

10 years, 6 months ago

I am trying to increase the width of the Group header description using CSS but it is the same ID as the Profile header description so it extends the profile description field also and is creating conflicts with the side-bar. I am using:

#item-header-content {width: 120%;}

I tried dropping in a new class into the <div> in my childtheme/groups/single/group-header.php file:

<div id=”item-header-content” class=”mygroupcss”>

I then tried styling the new class but it doesn’t work:

.mygroupcss {width: 120%;}

Any ideas or help is much appreciated!

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

@mercime
Keymaster

@mercime

10 years, 6 months ago

@hughshields BP generates the “groups” body class for all groups pages. So just add .groups before the element in your stylesheet for example:
.groups #item-header-content {
color: #000033;
}

hughshields
Participant

@hughshields

10 years, 6 months ago

Thanks for the tip. I included your CSS in my theme style sheet and it works, but it throws off the styling for my theme (suffusion) and puts 5-6 blank lines at the top of the group header.
I believe this is an issue with my theme’s template pack which is outdated since Buddypress 1.8.1.
I will try and resolve this on the Suffusion forum.
Thanks
Hugh

@mercime
Keymaster

@mercime

10 years, 6 months ago

puts 5-6 blank lines at the top of the group header

@hughshields you can always add negative top margin to correct the issue, like:
.groups #item-header-content {
margin-top: -20px;
}

hughshields
Participant

@hughshields

10 years, 6 months ago

Thanks for that tip also. It seems the margin is only appearing in IE 10 browser for some reason. It works fine in Firefox and Chrome and there is no unwanted margin with the Buddypress Default theme. I even deleted out the suffusion buddypress template pack group-header-php so that it would revert to the theme default and the margin is still there but only in IE.

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

The topic ‘Styling Group and Members Headers’ is closed to new replies.