1. Не прочитали правил - получили бан! В правилах немного букв, прочитать их не составит труда

    • МУЛЬТИАККАУНТЫ - запрещены, и блокируются сразу-же.
    • "Спасипа" "давно искал" "вау" - БАН!
    • Не активировали аккаунт в течении суток, профиль удаляется.

    C уважением команда forocommander

Инструкция Увеличиваем аватары в темах форума

Тема в разделе "Плагины, модификации и скрипты", создана пользователем Forcom, 15 май 2016.

Метки:
  1. Forcom

    Forcom Администратор

    Для начала в панеле управления ищем шаблон EXTRA.CSS, после чего в нём добавляем (в самом конце)следующий код:
    
    .thread_view .messageList a.avatar img,
    .thread_view .quickReply a.avatar img,
    .conversation_view .messageList a.avatar img,
    .conversation_view .quickReply a.avatar img
    {
        width: 120px;
        height: auto;
    }
    
    Заметьте, что width: 120px; отвечает за ширину аватарки в сообщении, и редактировать вы можете на своё усмотрение.
    Далее, в поиске по шаблон ищем шаблон message_user_info, после чего в этом шаблоне ищем следующий код:
    
    <xen:avatar user="$user" size="m" />
    
    И смело заменяем его на:
    
    <xen:avatar user="$user" size="l" img="true" />
    
    Далее идём в раздел админ панели (Панели управлени) -
    Панель управления - Внешний вид - Настройки стиля - Выбираем группу опций "Макет сообщений"
    дальше в левом меню выбираем "Контейнер информации о пользователе" и в категорию "Прочее" в поле ширина вписываем 157px
    Далее в левом меню выбираем следующую группу настроек "Контейнер содержимого" во вкладке фон в категории Внешний отступ, "Слева" вписываем цифру: 175px
    Готово!
     
  2. Forcom

    Forcom Администратор

    Закругление и поворот аватара на 360 градусов при наведении курсора
    Открываем шаблон EXTRA.CSS и добавляем следующий код:
    
    .avatar img, .avatar .img, .avatarCropper {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
      border-radius: 50%;
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    
     
  3. Forcom

    Forcom Администратор

    Простой поворот на 10 градусов:В шаблоне EXTRA.CSS добавляем:
    
    .avatar img, .avatar .img, .avatarCropper {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
    
     
  4. Forcom

    Forcom Администратор

    Плавное закругление авки при наведении курсора:В шаблон EXTRA.CSS добавляем:
    
    .avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
      border-radius: 50%;
    }
    .avatar img, .avatar .img, .avatarCropper {
      -webkit-transition: border-radius 1s ease;
      -moz-transition: border-radius 1s ease;
      -o-transition: border-radius 1s ease;
      -ms-transition:border-radius 1s ease;
      transition: border-radius 1s ease;
    }
    
     
  5. Forcom

    Forcom Администратор

    Эффекты выше могут работать только по одиночке, то есть вместе весь код лепить не стоит.
    Ещё одна фишка с скрытием информации о пользователе под авкой и её появлении при наведении курсором:
    Снова правим EXTRA.CSS
    
    .messageUserBlock .extraUserInfo
    {
        opacity: 0;
        max-height: 0px;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
    }
    .messageUserInfo:hover .extraUserInfo
    {
        opacity: 1;
        max-height: 300px;
    }
    <xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        html .messageUserBlock .extraUserInfo
        {
            opacity: 1;
            height: auto;
            transition: none;
        }
        .messageUserInfo:hover .extraUserInfo
        {
            height: auto;
        }
    
    }
    </xen:if>
    
     
: аватар

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