Topic: Sizing specific avatar img · BuddyPress.org

Skip to:: Content; Pages; Categories; Search; Top; Bottom

Sizing specific avatar img

Ynasr
Participant

@ynasr

8 years, 12 months ago
Hi,

I have added the gravatar of logged in users to my menu/navbar by inserting the following code in header.php:
```
                <div class="col-lg-1">
                    <a href="<?php bp_loggedin_user_domain(); ?>">

		            <?php bp_loggedin_user_avatar( 'type=full' ); ?>

	            </a>
                </div>
```
This works just fine. However, I am not able to alter the CSS for that specific instance of the gravatar image. I could change style.css for the class “avatar user-1-avatar avatar-150 photo” but that would also change other avatar img (profile, etc). I could also add inline CSS (size=full&width=14&) but this is not what i want to do as i am trying to build a responsive site and would not be able to provide different parameters for small screens.

I thus need to somehow assign a CSS ID to <?php bp_loggedin_user_avatar( ‘type=full’ ); ?> and then edit that ID in style.css. Could anyone let me know how to do this?

FYI – i am not a developer but I usually figure things out … so any suggestions are welcome.

Best,
Yvan

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

Henry Wright
Moderator

@henrywright

8 years, 12 months ago
How about being more specific with your CSS selector?
```
.some-wrapper-class .avatar-150 {
    // ...
}
```
Ynasr
Participant

@ynasr

8 years, 12 months ago

Many thanks Henry!

Yes that is what would be needed, but how can i assign “.some-wrapper-class” to the element i am trying to resize ? I am still a newbie with wordpress and buddypress … i have looked all over the net and couldnt find anything helpful.

Best,
Yvan
Henry Wright
Moderator

@henrywright

8 years, 12 months ago
You should look at the page source and find a suitable wrapper class (that is already in existence). For example:
```
<div class="this-could-be-your-wrapper-class">
    <div class="so-could-this">
        <img src="" alt="" />
        <span class="this-would-be-useless"></span>
    </div>
</div>
```

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

The topic ‘Sizing specific avatar img’ is closed to new replies.