@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?
BuddyPress Templaters are @mercime and @hnla.
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
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.
Didn’t get notification for your mention, but thanks @danbp 🙂
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;
}
What if you add !important ? ie.
display:block!important;
Is this path correct ?
body.home #custom-img-header,body.home-page #custom-img-header
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
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;
}
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 …
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
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
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 ?
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
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.
