Buddypress and bbpress button styling

[consciouscrafties]

Hi Harry,

Is it possible to have Buddypress and BBpress buttons to use Claue theme button styling?

For example, the search button on this Buddypress member search page:

Find a Crafties Shop

Many thanks,

Karen

[Harry]

Hi Karen,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.ow-button-base a {
	border-radius: 40px !important;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Hi Harry,

It didn’t work sadly, the button is still ugly and hasn’t inherited the Claue beautiful button theme (see screenshot)

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

I’m using the buddypress legacy template if it helps 🙂

[Harry]

Hi Karen,

Sorry because miss understood.

Please add below code

#buddypress div.dir-search input[type="text"], #buddypress li.groups-members-search input[type="text"] {
	padding: 1px 10px;
	border: none;
	background: #fff;
	border-radius: 40px;
}
#search-members-form {
	border: 1px solid #ddd;
	border-radius: 40px;
}
#members_search_submit {
	background: #222 !important;
	color: #fff !important;
	border: none !important;
	padding: 0 20px !important;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Perfect thank you soooo much Harry – it’s beautiful now <3 (see screenshot)

I’ve been struggling for days also trying to beautify the buttons alongside the members – the ‘Add Friend’ and ‘Visit My Shop’ could I ask for your help with those too pretty please?

Thank you ever so much,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

Please add more code

.send-message {
	border-radius: 40px;
	color: #fff !important;
	border: none !important;
	background: #ff6699 !important;
}

I don’t see the button Add Friend. Where to see it?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Thanks so much, that looks great 🙂

Sorry I forgot the Add Friend/Cancel Friendship button only appears when logged in.

I used your code to style up that button:

/* Buddypress Friend Button Styling */
.friendship-button {
border-radius: 40px;
color: #fff !important;
border: none !important;
background: #ff6699 !important;
}

But as the button width changes to accommodate the longer phrase ‘Cancel Friendship’ the ‘Add Friend’ button has an extra bit of pink (see screenshot)

Is there a way of stopping this happening?

Many thanks for your help,

Karen

Attachments:

You must be logged in to view attached files.

[consciouscrafties]

Oh and also, do you know how to resize the form input for search members when on mobile devices? (see screenshot)

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

1. How to show Add Friend and Cancel Friendship, I don’t see button to style

2. Please add below code

@media only screen and (max-width: 767px) {
#buddypress div.dir-search input[type="text"] {
	width: calc(100% - 88px) !important;
	margin-bottom: 0 !important;
}
#search-members-form {
	margin-top: 10px;
	margin-bottom: 20px;
}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

This reply has been marked as private.

[Harry]

Hi Karen,

Please use code

a.friendship-button {
border-radius: 40px;
color: #fff !important;
border: none !important;
background: #ff6699 !important;
}
.generic-button {
margin-bottom: 10px;
}
.generic-button a {
border-radius: 40px;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[consciouscrafties]

Thank you that’s looking gorgeous now! 🙂

[Author]

Posts