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

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

Тема в разделе "Модификации шаблонов", создана пользователем Herurg, 12 июн 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 КБ
      Просмотров:
      956
    • 2011-06-12_152119.png
      2011-06-12_152119.png
      Размер файла:
      91,8 КБ
      Просмотров:
      963
    Edward_Smith, lik20041986, RedCobra и 4 другим нравится это.
  2. Romchik®

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

    Регистрация:
    26.09.10
    Сообщения:
    5.740
    Симпатии:
    5.269
    Версия XF:
    1.5.11
    Пару замечаний.
    Вместо:
    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;
    }
     
    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 
     
  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>



     
  5. Omega

    Omega Тараканчег

    Регистрация:
    21.10.10
    Сообщения:
    84
    Симпатии:
    67
    Версия 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> 
     
  6. merci

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

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

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