Skip to:
Content
Pages
Categories
Search
Top
Bottom

Buddypress groups styles

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

  • jessicana
    Participant

    @jessicana

    @danbp

    @modemlooper

    Hi, it looks that http://mydomain.com/groups/any-group-name/ reads the styles of the home page, it also copies every customization I have done to the home page. For example, I changed the background of the home page to black, the group page also went black. Any help with this regard?


    danbp
    Moderator

    @danbp

    BuddyPress Templaters are @mercime and @hnla.


    jessicana
    Participant

    @jessicana

    mercime and @hnla I would appreciate any insights from your part as I need to finish my project and buddypress groups page is reading the home page customized styles.

    Thanks


    @mercime
    Keymaster

    @mercime

    For example, I changed the background of the home page to black, the group page also went black.


    @jessicana
    That is the default behavior as BP adds rudimentary styles to the components in BP pages.
    BP injects BP classes in the <body> tag. View > Source or use FF/Chrome inspector and you’ll find numerous classes e.g. in a Group named “The Godfather”, you’ll find the following classes you can use for the single group home page or for the rest of the Groups component pages:
    <body class="single-item groups group-the-godfather group-home home buddypress ... etc.>
    so you can use e.g.

    body.buddypress {
    /* for all BP pages */
    }

    or

    body.groups {
    /* for all groups */
    }

    or

    body.group-home {
    /* for the single group's home page */
    }

    etc.


    @mercime
    Keymaster

    @mercime

    Didn’t get notification for your mention, but thanks @danbp 🙂


    reivilob
    Participant

    @reivilob

    I have the same problem: i want “custom-img-header” and “siteinfo” only on the home page

    i modify my custom CSS as following but the custom-img-header and siteinfo appear on the home page and on all group pages (not on the list of groups or group edition)

    exactly as /groups/*/ inherit of the home page properties ….
    /groups/ is ok
    /groups/*/* is also ok

    any help would be appreciated

    #custom-img-header {
    display:none;
    }
    body.groups #custom-img-header {
    display:none;
    }
    body.home #custom-img-header,body.home-page #custom-img-header {
    display:block;
    }
    
    #siteinfo {
    display:none;
    }
    body.home #siteinfo,body.home-page #siteinfo {
    display:block;
    }
    
    

    danbp
    Moderator

    @danbp

    What if you add !important ? ie.

    display:block!important;

    Is this path correct ?
    body.home #custom-img-header,body.home-page #custom-img-header


    reivilob
    Participant

    @reivilob

    I already try to add !important but no change

    What is your idea for the path ?
    (probably correct because work fine for all other pages of the site)

    Olivier


    danbp
    Moderator

    @danbp

    My idea is that you use a wrong declaration.

    Normally, the group cover image comes is a background image of a link to the group.
    This means, if you respect BP’s original html & css in your custom work, that you have:
    <a id="header-cover-image" href="..../groups/GROUP_NAME/"></a>

    By default, if the cover image doesn’t exist or is removed, you see a grey background.
    This CSS will remove that and the second rule will reduce the empty height of the whole header, and ONLY on the group home page (if Home is the landing tab you use for groups).

    .group-home a#header-cover-image {
       background-image:none!important;
    /* remove the default grey background */
       background-color: transparent!important;
    }
    
    /* this should probably be adjusted to your theme */
    .group-home #item-header {
       margin-top: -150px!important;
    }

    reivilob
    Participant

    @reivilob

    it seams a little different in the theme i use (Mesocolum)

    The siteinfo and custom-img-header are not in backgroud but normal div:

    <div class="header-inner">
    <div class="innerwrap">
    <div id="siteinfo">
    <h1 ><a href="http://www.xxxxxxxx.com/" title="Linkedbyroad" rel="home">Linkedbyroad</a></h1 ><p id="site-description">La communauté motorisée</p>
    </div>
    <!-- SITEINFO END -->
    <div id="custom-img-header"><img src="http://www.xxxxxxxx.com/wp-content/uploads/2016/07/Image2-1200x300.jpg" alt="Linkedbyroad" /></div></div>
    </div>

    same source code in all pages, and same calculated CSS …


    danbp
    Moderator

    @danbp

    This is confusing. Do we talk about group header image or site header image ?

    The first post of the thread mention group header. You added yours saying “i have the same problem”.
    It is not the same problem apparently !

    As example, when i go to Lotus group, the group header image is in
    <a id="header-cover-image" href=..../groups/lotus/"></a>

    So i’m pretty sure my solution should work for the group header image.

    Your custom-header-image is in a div, that’s right, but it is the general site header image.

    You received an answer on your theme support, but i suggest you try it without the error:

    The single group page
    body.single-item.groups #custom-img-header

    instead of (which is the group directory page)
    body.directory.groups #custom-img-header

    This one is working on my theme
    body.single-item.groups img.header-img


    reivilob
    Participant

    @reivilob

    You are a king !
    It works now
    But this very strange the necessity to specify it just for this single group page …

    Anyway… one problem resolved
    Thanks
    Olivier


    danbp
    Moderator

    @danbp

    No it’s not strange. It’s due to the fact that all BP “pages” have dynamic content.

    – a BP page is just a sort of placeholder, it’s not an usual WP static page. There is no template for the page, but you have for each page different templates, depending the context.

    – so it is very normal to have to declare styles separatly, for each context.

    – by that, you have also much more flexibility to style quasi individually each content

    – and finally, that’s why you can use almost any existing wp theme (respecting wp coding standarts) with BP.

    Elle est pas belle la vie ?


    reivilob
    Participant

    @reivilob

    Yes i know that but it seems that the theme i user is note really respecting all BP standards i am afraid…

    Stupid question, where can i found a list of all the elements of BP ?
    example: “body.single-item.groups”
    (i do not find it in the Documentation section)

    Oui la vie est belle !

    Olivier


    danbp
    Moderator

    @danbp

    Almost in bp-templates/bp-legacy/css/buddypress.css

    Aside, if you use a tool like Firebug, you may be able to work easier with html, css or js.

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