1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Косметические изменения для аватара в профиле

Тема в разделе "Модификации шаблонов", создана пользователем Herurg, 12.06.2011.

Загрузка
  1. Herurg

    Herurg Местный

    Регистрация:
    20.03.11
    Сообщения:
    51
    Симпатии:
    34
    Сегодня я решил маленько изменить положение аватара в профиле, так сказать слишком не красиво он было...
    Что я сделал:
    1. Выровнял по центру
    2. Добавил красивую рамочку.
    Установка:
    1) Открываем шаблон member_view и ищем:
    HTML:
    <span class="Av{$user.user_id}l">
    Вставляем выше:
    HTML:
     <div align="center">
    Ищем там же:
    HTML:
     </span>
</xen:if>
    Заменяем на:
    HTML:
    </span>
</div>
</xen:if>
    Сохраняем .

    2) открываем xenforo.css и ищем:
    HTML:
    .avatarScaler img
{
max-width: 192px;
_width: 192px;
}
    Заменяем на:
    HTML:
    .avatarScaler img
{
max-width: 185px;
_width: 192px;
}
    3) Далее открываем EXTRA.css и добавляем в самый конец следующие:
    HTML:
     .avatarScaler {
border-bottom-color: #d7edfc;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #d7edfc;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #d7edfc;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #d7edfc;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
margin-bottom: 20px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
}
    Вот и всё, примеры выложил ниже
    Сильно не ругайте, но это мой способ сделать лучше аватар в профиле, конечно я ещё добавил затемнение на аватарку, но это на любителя.
     

    Вложения:

    • ava3.png
      ava3.png
      Размер файла:
      18,7 КБ
      Просмотров:
      980
    • 2011-06-12_152119.png
      2011-06-12_152119.png
      Размер файла:
      91,8 КБ
      Просмотров:
      987
    Herurg, 12.06.2011
    #1
    Edward_Smith, lik20041986, RedCobra и 4 другим нравится это.
  2. Romchik®

    Romchik® The Power of Dreams Команда форума

    Регистрация:
    26.09.10
    Сообщения:
    5 746
    Симпатии:
    5 311
    Версия XF:
    1.5.18
    Пару замечаний.
    Вместо:
    HTML:
     <div align="center">
    Лучше так (иначе HTML невалидный):
    HTML:
     <div style="text-align:center">
    И наверно неплохо поменять оба значения здесь:
    HTML:
    .avatarScaler img {
  max-width: 185px;
  _width: 192px;
}
    То есть так:
    HTML:
    .avatarScaler img {
  max-width:185px;
  _width:185px;
}
    И этот CSS:
    HTML:
     .avatarScaler {
border-bottom-color: #d7edfc;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #d7edfc;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #d7edfc;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #d7edfc;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
margin-bottom: 20px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
}
    можно сделать в разы короче :)
    HTML:
    .avatarScaler {
  border:1px solid #d7edfc;
  border-radius:4px;
  margin-bottom:20px;
  padding:2px 2px 0 2px;
}
     
    Romchik®, 12.06.2011
    #2
    MOHCTEP, JorJe, CyberAP и ещё 1-му нравится это.
  3. Palych

    Palych Местный

    Регистрация:
    21.12.10
    Сообщения:
    269
    Симпатии:
    59
    Версия XF:
    1.1.1
    во вы скриптоманьяки :)
    --- добавлено : Jun 12, 2011 9:21 AM ---
    У меня все-равно не по центру аватарка, но рамочка добавилась, и то хорошо.
    --- добавлено : Jun 12, 2011 9:25 AM ---
    avatar.jpg 
     
    Palych, 12.06.2011
    #3
  4. TITAN-UZ

    TITAN-UZ Местный

    Регистрация:
    14.06.11
    Сообщения:
    41
    Симпатии:
    4
    Версия XF:
    1.3.3
    Аватар центре в форуме:

    message_user_info ->

    Ищем:

    HTML:
    <div class="avatarHolder" >
    Вставляем выше:

    HTML:
    <div style="text-align:center">
    После:

    HTML:
    <!-- slot: message_user_info_avatar -->
    Вставляем ниже:
    HTML:
    </div>
     
    TITAN-UZ, 01.11.2011
    #4
  5. Omega

    Omega Тараканчег

    Регистрация:
    21.10.10
    Сообщения:
    84
    Симпатии:
    68
    Версия XF:
    1.1.3
    что бы нормально работало по центру нужно вообще то сделать код примерно такого вида

    HTML:
                <xen:if is="{$visitor.user_id} == {$user.user_id}">
<div style="text-align:center">
                <a class="Av{$user.user_id}l OverlayTrigger" href="{xen:link account/avatar}">
                    <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                </a></div>
            <xen:else />
<div style="text-align:center">
                <span class="Av{$user.user_id}l">
                    <img src="{xen:helper avatar, $user, l, 'true'}" alt="{$user.username}" style="{xen:helper avatarCropCss, $user}" itemprop="photo" />
                </span>
</div>
</xen:if>
     
    Omega, 11.03.2012
    #5
  6. merci

    merci Активный пользователь

    Регистрация:
    14.06.12
    Сообщения:
    54
    Симпатии:
    4
    Версия XF:
    1.3.2
    Ни один способ не работает. Может быть с последней версией форума, что то поменялось?
    Вопрос решен простым выравниванием аватара, в настройках стиля.
     
    merci, 21.10.2012
    #6

Поделиться этой страницей