Reflection Avatar

[Neo2099]

thank you! nice mod!

Only a question...
Why in Firefox, Opera, safari  animated gif don't work?
In IE with animated gif there are no problem.

Thank you, bye 

[qubbah]

ho do i align center the avatar? the avatar align center in IE but left align in FF

[M-DVD]

thank you! nice mod!

Only a question...
Why in Firefox, Opera, safari  animated gif don't work?
In IE with animated gif there are no problem.

Thank you, bye 

Thank you.

So far i know, is "problem" of the browsers, not the script.

ho do i align center the avatar? the avatar align center in IE but left align in FF

Already did this?

http://www.simplemachines.org/community/index.php?topic=262194.msg1792608#msg1792608

and Refresh your site with: Ctrl+F5

and tell me if it works.

[spiritualyouth]

i've tried to install this, but it installs straight to the default theme, and i'm using a custom one. what do i need to edit in my theme to get this to work?

Hi
   
Is very easy

You must edit the "index.template.php"

Find

Code Select Expand

</head>

and put before

Code Select Expand


<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/reflection.js?fin11"></script>

or in SMf beta 2

Code Select Expand


<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/scripts/reflection.js?b4"></script>

Never worked for me, I'm using MysticOpal and I don't have any other java problems or java based mods installed. Any ideas?

[M-DVD]

But possibly your host has adds, js, popups.

URL of your forum?

[spiritualyouth]

Hey, I've closed the forum now, but no there was no popups or js from the host, thanks anyway

[Lord Anubis]

Nope this mod still doesn't center the avatars for Chrome or FF3, it instead left aligns them

[M-DVD]

Nope this mod still doesn't center the avatars for Chrome or FF3, it instead left aligns them

Hi.

Edit your style.css

Search:

.avatar { overflow: hidden; }

Replace:

.avatar { overflow: hidden; margin: auto }

Important: Save and Refresh your Browser with Ctrl+F5 (clear your browser cache) before you will be able to see the changes.

[Lord Anubis]

Worked like a charm, I did all the edits except in the style.css

Edit: I noticed that the new package doesn't include the added margin:auto in the style.css

[Nao 尚]

Oh, funny, just found out about this other mod of yours, M-DVD...

I actually first saw reflection.js being used on another board (passion-xbmc.org), and thought they'd installed it manually. Maybe they used your mod, I'm not sure...
I installed the thing manually and it didn't work under Opera. I modified reflection.js to relocate the created canvas's paddingTop to (divHeight-reflectionHeight)+'px' and then it worked. Just so you know... There may be themes where reflections appear right beneath the avatar (behind it), instead of below it. I think it's because reflection.js expects the image's div container to not have specific sizes.

My goal was to make my user info appear on top of the reflection, I made it work but it wasn't too readable, and changing the reflection's alpha to something lighter wouldn't look too good, so I gave up for now. I may work on it again in the future though. If I have some spare time

[M-DVD]

Oh, thank you.

If you find flaws or improvements, you can contact the author of reflect.js, sure you appreciate.

Also, I will be careful of what you say it can occur in some themes.

I have also been working a bit with this code, especially to change the DIV, and change that 'Image with Reflection', for an not element block, but I have not had time.

[Lord Anubis]

This is a personal theme problem lol, but if you can help.....on my PMs it is centering the avatars

Screenshot: HERE

It covers all the buttons for the PM section

any idears on how to fix that easily?

[M-DVD]

This is a personal theme problem lol, but if you can help.....on my PMs it is centering the avatars

Screenshot: HERE

It covers all the buttons for the PM section

any idears on how to fix that easily?

Sorry, i haven't much idea.

You can edit the file PersonalMessage.template.php, find the variable of the avatar and put some <br /> after or before, depending. Thing is, try and test. It is everything that I can think of.

And that template of PM is different, I have never seen anything like this. 

[Apllicmz]

Nice work
good mod

[M-DVD]

Nice work
good mod

Thanks for your comment

[Rehash D Internet]

All thought this installed fine it isn't actually having any effect. Can you help, please?

[M-DVD]

All thought this installed fine it isn't actually having any effect. Can you help, please?

Sure.

Have you edited your theme? Does work in default theme?

URL?

[crazyASD]

Well all work fine, exept userprofile avatar at top of page (index.template.php):

Code Select Expand

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">', $context['user']['avatar']['image'], '</td>';
Here effect isn`t appear

[M-DVD]

Well all work fine, exept userprofile avatar at top of page (index.template.php):

Code Select Expand

if (!empty($context['user']['avatar']))
echo '
<td class="windowbg" valign="middle">', $context['user']['avatar']['image'], '</td>';
Here effect isn`t appear

Ok, because there is no reflection here XD

1 .- Because all themes not show the avatar here.
2 .- Because it wasn't looked good in default theme.

If you want to add this, then do this change:

Edit he Subs.php

Search:

Code Select Expand

if (!empty($context['user']['avatar']))
$context['user']['avatar']['image'] = '<img src="' . $context['user']['avatar']['href'] . '"' . (isset($context['user']['avatar']['width']) ? ' width="' . $context['user']['avatar']['width'] . '"' : '') . (isset($context['user']['avatar']['height']) ? ' height="' . $context['user']['avatar']['height'] . '"' : '') . ' alt="" class="avatar" border="0" />';

Replace:

Code Select Expand

if (!empty($context['user']['avatar']))
$context['user']['avatar']['image'] = '<img src="' . $context['user']['avatar']['href'] . '"' . (isset($context['user']['avatar']['width']) ? ' width="' . $context['user']['avatar']['width'] . '"' : '') . (isset($context['user']['avatar']['height']) ? ' height="' . $context['user']['avatar']['height'] . '"' : '') . ' alt="" class="avatar reflect" border="0" />';

Note: In the next version, i will add this feature as: enable/disable. The current reflect also will be enable/disable.

[kromonos]

Works nice with Linux Browsers: Epiphany 2.26.0 2.27.2-WebKit and Midori 0.1.5.
Thank you for this nice mod