Image Sizes in BuddyBoss Platforom Display

Forums

To resize images uploaded in the forums, go into Customize and Additional CSS and enter

.bb-activity-media-elem .entry-img {
	max-width: 150px;
}

Activity feed

To resize imaged in the Activity Feed, go into Customize and Additional CSS and enter

.bb-post-img-link {
	max-width: 150px;
}

BuddyBoss Activity Feed

To resize forum uploaded images (or any other ones) in BuddyPress/BuddyX, go into Additional CSS and enter

.activity-content img  {
	max-width: 150px;
}

BuddyBoss Front Page Featured Image

To resize the featured image for the blog listing on the front page with BuddyBoss/BuddyX, go into Additional CSS and enter:

.wp-block-post-featured-image img {
	max-width: 350px;
}

BuddyBoss / bbPress Topic text reformatting

To move the “Reply” Text, use the following:

/* bbPress reply label offset */
#bbpress-forums fieldset.bbp-form legend {
    padding-top: 50px !important;
}

BuddyBoss / bbPress Topic 1 of n formattting:

User the following:

/* bbPress topics viewing 1 through... */
.bbp-pagination {
    background-color: #f0f8ff;
}

BuddyBoss/bbPress topic heading styling

Add the following:

#bbpress-forums .bp-pagination.top {
	background-color:#f9fbff;
}
/* bbPress reply margins */
#bbpress-forums .bbp-reply-header {
    margin-top: 5px;
}

Remove the login/logout link from Comments

There is code to do this here:

<?php //* Mind this opening PHP tag

// Remove the logout link in comment form
add_filter( 'comment_form_logged_in', '__return_empty_string' );

Mobile Reverse Column CSS

In order to have alternating blocks with image on right then image on the left, you have to add CSS to reverse the block while in mobile size, but not resize or change if in desktop size.

In order to do this, you need to first create the CSS class which reverses the direction of the flex container (if mobile).

Then, you need to add the class to the block that you want to reverse.

This is so that you have consistent image-on-top when the columns get stacked in mobile view.

This class can also be used if you create a left sidebar as a column in the site editor. This way, you will have the content show on top in mobile view.

/* Mobile reverse column direction */
@media only screen and (max-width: 640px) {
.mobile-reverse-column-direction {
	flex-direction: column-reverse;
}
}