Посидел ещё вечерок, сваял очередной инфобокс.
Этот инфобокс похож внешне на InfoBox в расширенном поиске , но отличается более простой реализацией, генерится меньше кода, все стили вынесены во внешний файл.
Ну и как обычно никаких яваскриптов и картинок - только css.
Для примера сделано на главной странице в блоке типа "Недавно были".
Как работает:
При наведении на аватар появляется инфобокс со ссылками на профиль и прочее, при наведении на никнейм в инфобоксе появляется увеличенный(реальный) аватар.
Курсор убираете с инфобокса или аватара всё исчезает. Инфобокс настраивается на любой вкус и цвет.
Сделано для SE3.18, стандартный шаблон.
На кроссбраузерность не проверял, тестил в FF
В общем как говорится (для лентяев) - найти и заменить.
Открываем home.tpl, находим:
PHP:
{* SHOW LAST LOGINS *}
// бла, бла, бла, куча всякого кода...
{lang_print id=672}
{/if}
</div>
<div class='portal_spacer'></div>
Заменяем на:
PHP:
{* SHOW LAST LOGINS *}
<div class='header'>{lang_print id=671}</div>
<div class='portal_content'>
{if !empty($logins)}
<table cellpadding='0' cellspacing='0' align='center'>
{section name=login_loop loop=$logins max=6}
{cycle name="startrow3" values="<tr>,"}
<td class='portal_member' valign="bottom"{if (~$smarty.section.login_loop.index & 1) && $smarty.section.login_loop.last} colspan="2" style="width:100%;"{else} style="width:50%;"{/if}>
{if !empty($logins[login_loop])}
<a href='{$url->url_create("profile",$logins[login_loop]->user_info.user_username)}'>
<div class="InfoBox">
<img class='photo corner iradius6' src='{$logins[login_loop]->user_photo("./images/nophoto.gif", TRUE)}' class='photo' width='60' height='60' border='0' alt='{$logins[login_loop]->user_displayname|truncate:15:"...":true}' title='{$logins[login_loop]->user_displayname|truncate:15:"...":true}' />
<div class='radius10'>
<p>
{capture assign=tip}<img src={$logins[login_loop]->user_photo('./images/nophoto.gif')}>{/capture}
<a href='{$url->url_create('profile',$logins[login_loop]->user_info.user_username)}' class='Tips1' title="{$tip|escape:quotes}" ><b>{$logins[login_loop]->user_displayname|truncate:20:"...":true}</b></a>
</p>
<p>
<a href="javascript:TB_show('{lang_print id=784}', 'user_messages_new.php?to_user={$logins[login_loop]->user_displayname}&to_id={$logins[login_loop]->user_info.user_username}&TB_iframe=true&height=420&width=450', '', '../images/trans.gif');" title="{lang_print id=791}"><img border="0" alt="{lang_print id=791}" class="infoboxicons" src="./images/icons/message_inbox16.gif"></a>
<a href="{$url->url_create('albums', $logins[login_loop]->user_info.user_username)}"><img border="0" src="./images/icons/photos16.gif" class="infoboxicons" title='{lang_print id=1000007} {$logins[login_loop]->user_displayname_short}' alt='{lang_print id=1000007} {$users[user_loop]->user_displayname_short}'></a>
<a href="{$url->url_create('blog', $logins[login_loop]->user_info.user_username)}"><img border="0" src="./images/icons/blog_blog16.gif" class="infoboxicons" title='{lang_print id=1500007} {$logins[login_loop]->user_displayname_short}' alt='{lang_print id=1500007} {$users[user_loop]->user_displayname_short}'></a>
<a href="profile.php?user={$logins[login_loop]->user_info.user_username}&v=game"><img border="0" src="./images/icons/game_game16.gif" class="infoboxicons" title='{lang_print id=666241} {$logins[login_loop]->user_displayname_short}' alt='{lang_print id=666241} {$users[user_loop]->user_displayname_short}'></a>
<a href="profile.php?user={$logins[login_loop]->user_info.user_username}&v=friends"><img border="0" src="./images/icons/friends16.gif" class="infoboxicons" title='{lang_print id=653} {$logins[login_loop]->user_displayname_short}' alt='{lang_print id=653} {$users[user_loop]->user_displayname_short}'></a>
</p>
<i></i>
</div>
</div>
</a>
{/if}
</td>
{cycle name="endrow3" values=",</tr>"}
{if (~$smarty.section.login_loop.index & 1) && $smarty.section.login_loop.last}</tr>{/if}
{/section}
</table>
{else}
{lang_print id=672}
{/if}
</div>
<div class='portal_spacer'></div>
в файл styles.css закидываем эти стили:
PHP:
.InfoBox{position:relative;zoom:1}
.InfoBox div{display:none}
.InfoBox:hover div{display:block;position:absolute;width:120px;background-color:#fff;border:1px solid #ddd;text-decoration:none;padding:5px;bottom:63px;right:-15px;-webkit-box-shadow:1px 1px 5px #aaa; /* красивости в виде тени */-moz-box-shadow:1px 1px 5px #aaa;box-shadow:1px 1px 5px #aaa}
.InfoBox:hover div i{position:absolute;z-index:1;bottom:-7px;right:35px;border-top:7px solid #fff;border-left:7px solid transparent;_border-left:7px solid #FDEFC6; /* цвет фона. это для ие6.*/display:block;height:0;overflow:hidden}
.radius10 {-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px}
img.infoboxicons{margin:2px}
Получаем следующее:
