BuddyPress formatting

[jmellicker]

We just switched our website from the Avada theme by Theme Fusion to Dante and are having issues with the way it formats Buddypress groups.

Here’s a side-by-side, Avada then Dante:
https://www.dropbox.com/s/q714db7c7wbtazt/Screenshot%202014-03-17%2015.59.47.png

Is there a feature in Dante that would help clean up some of the eyesores? (Differentiate each group with horizontal lines, ensure images retain correct size, different font size and color for title, description, etc.)

Many thanks for your time. Aside from the default BuddyPress formatting, we really love this theme!

[Swift Ideas – Ed]

Hi @jmellicker,

Can you provide a link to your site so that I can check this out? Will get this in the update that’s due for release this week.

Thanks!

– Ed

[jmellicker]

Thanks Ed! Melanie helped us with some custom CSS that improved the formatting significantly, but here’s the page in question:

Groups

And here is the custom CSS we added and are tweaking:

.even public is-admin is-member {
padding:​ 30px !important;​
margin:​ 20px !important;​
}

.even public is-admin is-member {
background:​ #f0f0f0 !important;​
}

.item-avatar {
float:​ left !important;​
margin-right:​ 20px !important;​
}

.item-title {
font-size:​ 24px !important;​
font-weight:​ 700 !important;​
}​

.item-meta {
font-size:​ 12px !important;​
}

.action {
font-size:​ 12px !important;​
}​

[jmellicker]

Update: that added CSS did not change formatting.

[jmellicker]

I just bought the Dante theme and was kind of surprised to find there was no styling on the Buddypress group listing page at all!

Here’s what our website’s group page looked like before:
https://www.dropbox.com/s/ggsyyrbxlqbtpwp/Screenshot%202014-03-18%2020.07.25.png

After a couple hours work, I whipped it into some kind of shape:
https://www.dropbox.com/s/n37z1ldbjl5j35h/Screenshot%202014-03-18%2020.07.04.png

As you can see, there are still problems – the two “create a group” buttons at the top of the page, and the controls are still jumbled, but it is way better.

Haven’t touched the other Buddypress pages, which all need major work.

Nice theme otherwise! Looking forward to Buddypress updates soon.

Here’s the CSS I added to the child theme:

#groups-list {
margin-top: 40px;
}

.public {
padding: 24px;
}

.even {
background: #f0f0f0;
}

.even, .odd {
border: solid 1px #ccc;
margin: 10px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.item-avatar {
float: left;
margin-right: 12px;
}

.item-title {
font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
font-size: 20px;
letter-spacing: -1px;
}

.item-desc {
}

.item-meta {
font-size: 11px;
float: right;
}

.action {
font-size: 11px;​
}

.group-button, .bp-title-button {
float: right;
padding: 4px;
background: #859FC6;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 0px solid #000000;
font-family: Raleway;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #FFF;
}

.bp-title-button {
margin-left: 48px;
padding: 0 24px;
}

.group-button:hover {
color: #C3D6FF;
}

[Melanie – SUPPORT]

Hey, thanks for posting back! The developer will sure add some styling to the next update!

[Swift Ideas – Ed]

@jmellicker – apologies for that, somehow the group pages were missed / weren’t included with the standard buddypress demo content import. Sorted this for the update that is due for release on Friday 🙂

– Ed

[jmellicker]

Thanks! Marking this resolved. The CSS I posted above has a nice button rather than the text link in cast anyone is in need.

[Swift Ideas – Ed]

Great 🙂

– Ed