Topic: [Resolved] CSS help for member directory

[Resolved] CSS help for member directory

bp-help
Participant

@bphelp

11 years, 8 months ago

Hi! I was trying to follow this tutorial for customizing the members directory:
http://wpmu.org/how-to-create-a-custom-buddypress-members-directory/
I am using WP 3.5.1 and BP 1.6.4 and a child theme of BP Default. The tutorial is for use with with Twenty Twelve Themes and BP 1.7 however I am trying to get it to work with my mentioned setup with no luck. I am using firebug but I can’t seem to get it right. Is there any CSS guru’s that can help? I have the member-loop.php working right, I just can’t seem to get the CSS adjusted. Thanks everyone!

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

@mercime
Participant

@mercime

11 years, 8 months ago

@bphelp What exactly or which part of the tutorial is not working for you? Site URL? What browser are you using?

bp-help
Participant

@bphelp

11 years, 8 months ago

@mercime Thanks for your reply. The CSS she provides on that tutorial doesn’t work in my child themes style.css based on the BP 1.6.4 Default theme. I suppose its because she is using Twenty Twelve and BP 1.7 so the CSS selectors are different. I am just on a localhost test server so far. I guess what I am asking is I need help targeting the BP Default CSS selectors that is the equivalent of the selectors she used from Twenty Twelve Theme. I hope I am making sense! FYI I am testing both in firefox and chrome. I appreciate it!

@mercime
Participant

@mercime

11 years, 8 months ago

I haven’t tested the styles in the tutorial but it looks good to me at a glance. The ID’s and classes included in BP Legacy template files used in tutorial are just the same as that of the BP Default theme. I will assume that you copied over members-loop.php from bp-default/members/members-loop.php into your child theme folder /YOUTTCHILDTHEMENAME/members/members-loop.php in server and made the revisions to that file per tutorial like removing activity items etc. If so, can you post a screenshot of your issue/s?

bp-help
Participant

@bphelp

11 years, 8 months ago

@mercime
Hi, yes I did add the members/members-loop.php to my child theme with the changes per the tutorial. That doesn’t seem to be the issue. Its the CSS styling that isn’t correct. I added the styles she had on the tutorial to my child themes style sheet. Anyway here is a pic so you can see whats going on. Thanks for your help! 🙂

bp-help
Participant

@bphelp

11 years, 8 months ago

@pollyplummer @mercime, is there anything you can help me with to get this adjusted? Thank you both very much!

Prince Abiola Ogundipe
Participant

@naijaping

11 years, 8 months ago

@bphelp,

If you are using css tutorial from wpmu and your theme is default buddypress template/child theme, Remove “#buddypress” from all the css. I think it should do the trick.

or better still a link to your site so that i can try and solve it for you.

Thanks

bp-help
Participant

@bphelp

11 years, 8 months ago

@naijaping @mercime
I removed #buddypress from the css and here is what my style.css looks like:
`
/*
Theme Name: BuddyPress Child
Theme URI: http://example.com/
Description: Child theme for the BuddyPress Default theme
Author: bphelp
Author URI: http://example.com/about/
Template: bp-default
Version: 1.0
Tags: blue, buddypress, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, fixed-width, light, right-sidebar, rtl-language-support, sticky-post, threaded-comments, translation-ready, two-columns, white
*/
/*————————————————————-
Custom CSS
————————————————————–*/

@import url(“../responsive/style.css”);

/* Custom member loop avatar styling */
#members-dir-list img.avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}

#members-dir-list a:hover img.avatar {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s ease-in-out;
-moz-transition: -moz-filter 0.2s ease-in-out;
transition: filter 0.2s ease-in-out;
}

#members-list li {
overflow: auto;
list-style: none;
float: left;
width: 30%;
margin: 20px 20px 28px 0;
border: 0;
}

#members-dir-list ul.item-list li div.item-title, #members-dir-list ul.item-list li h4, #members-dir-list ul.item-list li div.item-meta
{
width: 100%;
text-align: center;
}

#members-dir-list ul.item-list li div.item-title {
font-size: 110%;
}

#members-dir-list ul.item-list li div.item-meta {
text-transform: uppercase;
font-size: 80%;
}

#members-dir-list ul.item-list li img.avatar {
margin-bottom: 8px;
}

#members-dir-list a.friendship-button.add {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #89ac48;
font-size: 26px;
font-weight: bold;
background: #a5d156;
color: #ffffff;
line-height: 50px;
}

#members-dir-list a.friendship-button.is_friend.remove {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #CC0000;
font-size: 26px;
font-weight: bold;
background: #FF5050;
color: #ffffff;
line-height: 50px;

}

ul#members-list.item-list li div.action {
text-align: center;
overflow-y: hidden;
top: 18px;
right: 6px;
}
/* End Custom member loop avatar styling */
`
Here is another pic to see the changes but it still needs some adjusting.

Hope you guys can help! I appreciate the help you have given so far! Thanks!

Prince Abiola Ogundipe
Participant

@naijaping

11 years, 8 months ago

@bphelp,

You will need to adjust the width / line-height and margin in the below css accordingly. I think that should solve the rest.

#members-dir-list a.friendship-button.add

#members-dir-list a.friendship-button.is_friend.remove {

#members-dir-list ul.item-list li div.item-title, #members-dir-list ul.item-list li h4, #members-dir-list ul.item-list li div.item-meta
{

bp-help
Participant

@bphelp

11 years, 8 months ago

@naijaping @mercime
Okay I finally got it. Not certain it is totally right but it looks good in both chrome and firefox. I did have to create a div class in the members-loop.php called user-location surrounding the code from step 3 in the tutorial to be able to style it. The changes I made are in the below css in case anyone wants to try this. I also included a pic at the bottom to show the end result. Thank you both for your help! Cheers!
`
/*
Theme Name: BuddyPress Child
Theme URI: http://example.com/
Description: Child theme for the BuddyPress Default theme
Author: bphelp
Author URI: http://example.com/about/
Template: bp-default
Version: 1.0
Tags: blue, buddypress, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, fixed-width, light, right-sidebar, rtl-language-support, sticky-post, threaded-comments, translation-ready, two-columns, white
*/
/*————————————————————-
Custom CSS
————————————————————–*/

@import url(“../responsive/style.css”);

/* Custom member loop avatar styling */
#members-dir-list img.avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}

#members-dir-list a:hover img.avatar {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s ease-in-out;
-moz-transition: -moz-filter 0.2s ease-in-out;
transition: filter 0.2s ease-in-out;
}

#members-list li {
overflow: auto;
list-style: none;
float: left;
width: 30%;
margin: 20px 20px 28px 0;
border: 0;
}

#members-dir-list ul.item-list li div.item-title, #members-dir-list ul.item-list li h4, #members-dir-list ul.item-list li div.item-meta
{
width: 62%;
text-align: center;
}
.user-location {
width: 62%;
text-align: center;
}

#members-dir-list ul.item-list li div.item-title {
font-size: 110%;
}

#members-dir-list ul.item-list li div.item-meta {
text-transform: uppercase;
font-size: 80%;
}

#members-dir-list ul.item-list li img.avatar {
margin-bottom: 8px;
}

#members-dir-list a.friendship-button.add {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #89ac48;
font-size: 26px;
font-weight: bold;
background: #a5d156;
color: #ffffff;
line-height: 50px;
margin: 18px 102px 0 0;
}

#members-dir-list a.friendship-button.is_friend.remove {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #CC0000;
font-size: 26px;
font-weight: bold;
background: #FF5050;
color: #ffffff;
line-height: 50px;
margin: 18px 102px 0 0;
}

ul#members-list.item-list li div.action {
text-align: center;
overflow-y: hidden;
top: 18px;
right: 6px;
}

#member-dir-count-bottom {
display: none;
}
/* End Custom member loop avatar styling */
`

bp-help
Participant

@bphelp

11 years, 8 months ago