div.content {
background: url(_inc/images/activity-time-since.png) left center no-repeat;
padding-left:10px;
}
@shawn38, thanks for for input but thats not what am loooking for , your css will only change the background to image. what i am trying to do is to add a icon to object which already has a background e.g friendship button.
I know it should be : background-image : url(
). that is what is used for wordpress but why its not working is what i dont know.
@naijaping Oh okay, I misread the button part. If your just trying to change an image like that why not just locate the image in question in the _inc/images/activity-time-since.png and replace the image in that file giving it the same name. That should work for any image. The important thing is just naming it the same name so that the css will still pull it from the url.
Ok shawn, but am still looking to do this if anyone can help.
@mercime, please how can i add icon to a button? i have tried background-image : url(_inc/images/activity-time-since.png) no-repeat left center ! important;
padding-left:10px;} but i notice anything background-image has not been working in my child theme.
thanks
@naijaping which child theme are you using and which specific button/s? have you tried to add background targetted to the specific button link? site url?
@mercime, i created the child theme of bp default theme myself.
site url : http://suchworld.co.cc
i have tried private message button and also friendship button but not works.
Thanks for your help
@naijaping Hook the background image to your link. Add this to your stylesheet
`div#item-header #send-private-message a {
background: transparent url(_inc/images/activity-time-since.png) left center no-repeat !important;
padding-left: 25px;
}`
In addition, you have two styles for `div#item-header #send-private-message` and the second one overlaps and hides the Edit Profile link. So look for `div#item-header #send-private-message`
Keep the first one below
`div#item-header #send-private-message {
float: left;
position: absolute;
right: 330px;
top: 22px;
}`
Delete the second one below
`div#item-header #send-private-message {
right: 243px;
}`
@mercime, thanks for your help, i intentionally use the button to overlaps and hides Edit profile link i dont want it to show to you while on friends profile. i have tried your solution before but the problem is that the icon will show but will turn the button background to pure white. thats why i want to use background-image:url instead of background:url. is there any solution to use background-image:url.
Reagrds
There can only be normally one background image per element in CSS2 so when you add the icon, it will override the gradient background created in parent theme. You could add extra bg-img using pseudo-elements but that’s good for modern browsers and IE8+ only.
You can use multiple background images for one element with CSS3 compatible with most modern browsers incl. IE9 above. But if you have users who use IE8 below, it will note show up at all.
One solution for cross-browser compatibility down to IE7 is to create an image with the icon and the gradient background, e.g. activity-time-since-with-gradient-background.png, together and hook that to the link:
`div#item-header #send-private-message a {
background: transparent url(_inc/images/activity-time-since-with-gradient-background.png) left center no-repeat !important;
padding-left: 25px;
}`
Of course your image name won’t be that long.
The other solution is this: http://www.norestfortheweekend.com/2011/02/26/css3-gradients-multiple-backgrounds-and-ie7/ This is more involved but a great learning experience if you have the time.
@mercime, thanks so much. the problem has been solved. what i did was i declare them seprately and it works.
div#item-header #send-private-message a{background: url(_inc/images/plus-icon.png)no-repeat 0 2px transparent;padding-left:16px;
}
div#item-header #send-private-message {background:#ededed;background:-webkit-gradient(linear, left top, left bottom, from(white), to(#ededed));background: -moz-linear-gradient(top, white, #ededed);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#ededed’);}
You can do that. Have you checked it in IE7/8?
@mercime, thanks so much for your help so far, have given up on the button. it looks so rubbish in IE. i dont even check it until you call my attention to it.
But please is there a way to wrap the Edit Profile link which is in the item-header so that it shows on your own profile alone and not when viewing others profile. instead of hiding it under private message button.
The code am using is :
`<a class="edit-my"<a href="profile/edit”>Edit Profile`
I mean may be a wrap to declare something like if is_ user_profile
Regards
== it looks so rubbish in IE. ==
Yup, IE < 9 is bane of designer/developer 
There are still at least 2 solutions as I pointed to above if you want to pursue the buttons later.
== But please is there a way to wrap the Edit Profile link which is in the item-header so that it shows on your own profile alone and not when viewing others profile. instead of hiding it under private message button. ==
Saw your new topic and answered you there https://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/how-to-make-a-link-show-on-your-profile-alone/
