Maybe I’m misunderstanding you, not sure from your description whether or not you have already created a child theme with your own CSS file?
https://codex.wordpress.org/Child_Themes
You can just make all your styling changes in that instead of copying various whole CSS files from the BuddyPress folders (and your changes will be kept whenever WP or BP are updated).
Also double check the box for cover photo is ticked on your WP dashboard if you want your users to be able to use them.
HI ! I have the same problem … I understand what coeycoey writes , here is the explanation ;
Add BuddyPress Styles to a Theme
Everything is great and everything works , just does not appear cover image … ??? any Solution ?
Ahh I see. I haven’t used that approach personally for my custom CSS. Just got the one CSS file (style.css) for everything at the moment, WP Theme and BuddyPress. I use comments and sections to organise it.
I can only think of a few things to try, though you probably have done these already (ensure the cover image option is ticked in the WP dashboard):
1. Remove all your custom CSS files temporarily and see if the cover image appears by default. If it does, then the problem is probably isolated to your CSS rather than with BuddyPress or your main Theme.
2. Use the browser developer tools (F12) to see if the id for cover image appears in the code even if you can’t see anything on screen. If it does try manipulating its attributes to bring it to the foreground as it may be hidden beneath other layers (z-index). Or display: none layers around it to see what is hiding it.
3. Check the id’s against your CSS. New id’s were obviously introduced for the cover image which weren’t in old BuddyPress CSS files which you may have used as a base for your custom one.
4. Try another theme with your custom CSS to see if it is a theme issue
5. Put all your custom BuddyPress CSS into the standard style.css file within a child theme and see if it works that way.
Hi mcUK.., thanks for your reply … I’ve tried everything described and again shows NO cover image đ … if anyone knows what the problem ….. ????
1. Remove all your custom CSS files temporarily and see if the cover image appears by default. If it does, then the problem is probably isolated to your CSS rather than with BuddyPress or your main Theme.
When the CSS is pulled from the buddypress directory, it works as expected. When it is pulled from the theme directory, the cover image disappears. Exact same files in both places.
2. Use the browser developer tools (F12) to see if the id for cover image appears in the code even if you canât see anything on screen. If it does try manipulating its attributes to bring it to the foreground as it may be hidden beneath other layers (z-index). Or display: none layers around it to see what is hiding it.
It doesn’t appear to be loading the image at all.
3. Check the idâs against your CSS. New idâs were obviously introduced for the cover image which werenât in old BuddyPress CSS files which you may have used as a base for your custom one.
I have no idea what this means. Can you elaborate, please? I just downloaded buddypress, so everything should be up to date, no?
4. Try another theme with your custom CSS to see if it is a theme issue
Theme doesn’t make a difference, only the location of the CSS files. The CSS files have not been modified.
5. Put all your custom BuddyPress CSS into the standard style.css file within a child theme and see if it works that way.
Tried this, and same problem. Works fine when pulling from buddypress/bp-templates/bp-legacy/css, but try and pull it from anywhere else, and the cover image disappears.
Because you are using a child theme, you have to register cover image support separately.
Read this section:
https://codex.buddypress.org/themes/buddypress-cover-images/#about-buddypress-css-overrides
For $theme_handle, since you’re using a child theme, you’ll need to change this to:
$theme_handle = 'bp-child-css';
If your cover image is similar to bp-legacy, you can also change $settings['callback'] to:
$settings['callback'] = 'bp_legacy_theme_cover_image';
Otherwise, write your own callback function by copying and modifying bp_legacy_theme_cover_image(). Don’t forget to change the $settings['callback'] variable to your custom function name if you go this route.
@r-a-y
Thanks a lot!!
Had same problem and could solve it with your posting!!
Hey guys, I’m having same issue but I can’t seem to figure it out. I’ve tried messing with the code and implementing it into my child themes function.php but no luck. Can someone give me a sample of code I can try. @bertl11 how did you get it working?
OK, so this is the code I have put into my child theme:
// COVER IMAGES
// Add css style for background cover images
function bp_legacy_theme_cover_image_css( $settings = array() ) {
$theme_handle = 'bp-child-css';
$settings['theme_handle'] = $theme_handle;
$settings['callback'] = 'bp_legacy_theme_cover_image';
return $settings;
}
function bp_legacy_theme_cover_image( $params = array() ) {
if ( empty( $params ) ) {
return;
}
return '
#buddypress #header-cover-image {
height: ' . $params["height"] . 'px;
background-image: url(' . $params['cover_image'] . ');
}
';
}
add_filter( 'bp_before_xprofile_cover_image_settings_parse_args', 'bp_legacy_theme_cover_image_css', 10, 1 );
add_filter( 'bp_before_groups_cover_image_settings_parse_args', 'bp_legacy_theme_cover_image_css', 10, 1 );
I get this error: Fatal error: Cannot redeclare bp_legacy_theme_cover_image() (previously declared in /home3/xxx/public_html/mysite.com/wp-content/themes/valenti-child/functions.php:49) in /home3/xxx/public_html/mysite.com/wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress-functions.php on line 1928
Could someone point me in the right direction,…this is driving me nuts!
@mfalk75
I faced the same issue when I copied the buddypress.css from buddypress/bp-templates/bp-legacy/css to mythemes/buddypress/css
Here is the code below I used to get rid of this…
function your_theme_cover_image_css( $settings = array() ) {
/**
* If you are using a child theme, use bp-child-css
* as the theme handel
*/
$theme_handle = 'bp-parent-css';
$settings['theme_handle'] = $theme_handle;
/**
* Then you'll probably also need to use your own callback function
* @see the previous snippet
*/
$settings['callback'] = 'bp_legacy_theme_cover_image';
return $settings;
}
add_filter( 'bp_before_xprofile_cover_image_settings_parse_args', 'your_theme_cover_image_css', 10, 1 );
add_filter( 'bp_before_groups_cover_image_settings_parse_args', 'your_theme_cover_image_css', 10, 1 );
Hope it helps..
@fakrulislam thank you!! Coincidentally I was having trouble with this with twentysixteen and just creating a stylesheet in buddypress/css and now the cover image appears thanks to that code! YAY!!!!!!!!!!!!!!!!!!!!!!!
where did you place the function? When I put it in bp-custom.php the cover image still crashes when I upload copies of the css files to buddypress/css to my Kleo child theme
anyone solved this problem? When I get the css file from buddypress plugin to the css folder in my theme it doesnt show it too.It saves the cover image because when I remove the file I can see it but the problem is when i make changes on the css file I can also see the changes.
Is there any required php file to integrate it in the correct mode?
A screensho from my theme the black background is from just a css command not an image.
https://s2.postimg.org/f8lwj34o9/Schermata_2017-08-22_alle_10.37.16.png
Yes this answer solved me too. Thankyou!
Hello @mfalk75, one question, where did you put this code? I don’t have a “css” folder in mythemes/buddypress, should I create one first? And then… copy a buddypress.css file there and make the changes… Sorry, I probably miss something.
Thank you!
Cheers,
Ilya
