Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS causing cover image to disappear.


  • CoeyCoey
    Participant

    @coeycoey

    Hello all,

    I copied the buddypress.css and buddypress.min.css from buddypress/bp-templates/bp-legacy/css to mythemes/css folder, and I began editing the file to make some changes and it worked fine. However, I noticed the cover image is missing. The profile photo is fine. I thought I did something to the CSS, so I copied it over, but it is still missing. If I disable the mytheme/css folder, it works normally. I would like to edit the css in the mythemes/css folder so I don’t lose changes on edits. Is there anything else I need to do so that the css files work correctly from outside the buddypress folder?

    Thank you

    Just updated, so latest version of WP and BP.

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

  • @mcuk
    Participant

    @mcuk

    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.


    aldin_abdagic
    Participant

    @aldin_abdagic

    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 ?


    @mcuk
    Participant

    @mcuk

    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.


    aldin_abdagic
    Participant

    @aldin_abdagic

    Hi mcUK.., thanks for your reply … I’ve tried everything described and again shows NO cover image 🙁 … if anyone knows what the problem ….. ????


    CoeyCoey
    Participant

    @coeycoey

    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.


    r-a-y
    Keymaster

    @r-a-y

    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.


    bertl11
    Participant

    @bertl11

    @r-a-y

    Thanks a lot!!
    Had same problem and could solve it with your posting!!


    mfalk75
    Participant

    @mfalk75

    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?


    mfalk75
    Participant

    @mfalk75

    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!


    fakrulislam
    Participant

    @fakrulislam

    @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..


    jameshh93
    Participant

    @jameshh93

    @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!!!!!!!!!!!!!!!!!!!!!!!


    karmatiger
    Participant

    @karmatiger

    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


    awpt
    Participant

    @awpt

    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


    awpt
    Participant

    @awpt

    Yes this answer solved me too. Thankyou!

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.
Skip to toolbar