MyBB Community Forums

Since The Cure is a popular theme, I was hoping someone might be able to help me here. It is the default theme for my forum with some alterations. In the header area, as demonstrated by the image below, the user's avatar is shown at the right. Unfortunately, it was intended to be (if memory serves) 68x68, whereas my members' avatars tend to be much larger.

http://i54.tinypic.com/2ewegy9.png

I'm afraid I lack CSS experience. Is there any simple way to make it so that avatars are sized to 68x68? This is the avatar shown at its original resolution, just for reference, though avatar sizes vary:



And here is a relevant snippet of the welcomeblock template:

			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
			<div class="header_side"><div id="panel">
<div style="background: transparent url({$mybb->user['avatar']}) 0 0 no-repeat;width:68px;height:68px;float:left"></div>
				<div class="panel_wrap">
					{$lang->welcome_back}

Thanks!

In the code above find;

{$mybb->user['avatar']}

and change it to;

<img src="{$mybb->user['avatar']}" width="68" height="68">

Thanks, and I'm probably doing something wrong, but it isn't working. I'll try editing it again later when my headache's gone...

---

This isn't working. Hopefully I haven't made a stupid mistake. I pasted and replaced the original code and it did not work. Any ideas?

---

Okay, this whole double post prevention thing is useful in one way, but on the other hand, it can prevent people from getting support when it shows that a thread has not been updated in the forum view.

I will now attempt to bump my thread so I can receive further support.

(2011-03-24, 10:23 PM)Fluid Mantis Wrote: [ -> ]Since The Cure is a popular theme, I was hoping someone might be able to help me here. It is the default theme for my forum with some alterations. In the header area, as demonstrated by the image below, the user's avatar is shown at the right. Unfortunately, it was intended to be (if memory serves) 68x68, whereas my members' avatars tend to be much larger.

http://i54.tinypic.com/2ewegy9.png

I'm afraid I lack CSS experience. Is there any simple way to make it so that avatars are sized to 68x68? This is the avatar shown at its original resolution, just for reference, though avatar sizes vary:



And here is a relevant snippet of the welcomeblock template:

			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
			<div class="header_side"><div id="panel">
<div style="background: transparent url({$mybb->user['avatar']}) 0 0 no-repeat;[b]width:68px;height:68px;[/b]float:left"></div>
				<div class="panel_wrap">
					{$lang->welcome_back}

Thanks!

find in your above template:

width:68px;height:68px;

Changed width and height's px,I tried on my own forum worked,should solve it.

That just makes it so all of the avatar can be rendered, and it shows outside the box and thus doesn't look nice. I want it so that uploaded avatars are displayed within the dimensions 68x68, so they are made smaller. Some avatars are rectangular so it would be nice if they could maintain the aspect ratio but whatever you guys can suggest.

What you could try is applying a div around the images with a css class.

I use this on my board:

CSS

.miniav {
border:3px solid #234b7a; padding:2px; font-size:14px; background-color:#efefef; font-family:"Lucida Grande",Lucida,verdana,sans-serif; height:40px; width:40px
}

HTML

<img src="{$mybb->user['avatar']}" class="miniav" alt=" avatar " title="User Avatar"/></a>

ETA: it still deforms rectangular avatars, but its a bit smaller so it is not so obvious....

Thanks for that, but apologies—I truly am useless with this kind of thing. (I need to buy a book on it.) I edited the CSS you provided and added it to the global CSS file for the theme. Here is the new code.

.miniav {
border:1px solid #174378; padding:2px; font-size:14px; background-color:#efefef; font-family:"Lucida Grande",Lucida,verdana,sans-serif; height:68px; width:68px
}

Now what would I need to change in the template?

Hmm, I dont have the Cure Templates, but I see its transparent - what you can do is add the background: transparent into the CSS for the miniav....

like so

.miniav {
border:none; padding:2px; font-size:14px; background:transparent; font-family:"Lucida Grande",Lucida,verdana,sans-serif; height:40px; width:40px; float:left;
}

and edit the html as so:

<div><img src="{$mybb->user['avatar']}" class="miniav" alt=" avatar " title="User Avatar"/></div>

Though of course you could also quickly change the 68px to 40 px in the first example in this thread. The CSS approach I use is because I have three different themes running on one template set.

(2011-03-28, 05:17 PM)Leefish Wrote: [ -> ]and edit the html as so:

<div><img src="{$mybb->user['avatar']}" class="miniav" alt=" avatar " title="User Avatar"/></div>

I'm interested too but really don't understand where I should add the code. Which html?

I'd like also changing user's avatar size in threads/posts. Which template should I edit? How?