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

Карта пользователя - закругления по углам аватара

Тема в разделе "Вопросы по стилям, изменения в CSS и шаблонах", создана пользователем Бboris, 04.09.2011.

Загрузка
  1. Бboris

    Бboris Тролль

    Регистрация:
    20.08.11
    Сообщения:
    205
    Симпатии:
    33
    Подскажите пожалуйста, как "закруглить углы аватара", на карте пользователя.

    Образец:


    Закругления в карте пользователя.gif
     
  2. Андрей Х

    Андрей Х Местный

    Регистрация:
    26.04.11
    Сообщения:
    183
    Симпатии:
    155
    Версия XF:
    1.5.11
    Вот сразу хочется задать вопрос, зачем? Кому это надо? А так почитать CSS3 на тему закругления углов.
    Например вот так
    HTML:
    <style type="text/css">
    .box {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
    </style>
    И то это чтобы все браузеры понимали, оригинал статьи у меня на форуме. http://validweb.ru/threads/4/
     
  3. Бboris

    Бboris Тролль

    Регистрация:
    20.08.11
    Сообщения:
    205
    Симпатии:
    33
    Прописал в EXTRA.css
    Код:
    .box {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    }
    Не работает!
     
  4. Андрей Х

    Андрей Х Местный

    Регистрация:
    26.04.11
    Сообщения:
    183
    Симпатии:
    155
    Версия XF:
    1.5.11
    так и не должно работать, это я для примера дал, как углы скрутить...
     
  5. Бboris

    Бboris Тролль

    Регистрация:
    20.08.11
    Сообщения:
    205
    Симпатии:
    33
    Ну так я в Firebug часа три смотрел, прежде чем на форуме спросить.
    А тут вы - ценно ответили :D
     
  6. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Код:
    .avatar img, .avatar .img, .avatarCropper, .avatarCropper a, .avatarCropper span, .avatarCropper label
    {background: transparent none;}
    
    .avatarCropper img {border-radius: 6px;}
    6px - радиус.
    Прописать код в extra.css. Если не работает, то перед ;} добавить !important (в итоге 2 раза)

    Кстати, непонятно зачем там добавлен фон, ведь без него красивее гораздо если аватар прозрачный.
     
  7. Бboris

    Бboris Тролль

    Регистрация:
    20.08.11
    Сообщения:
    205
    Симпатии:
    33
    Чуть инфаркт не случился :p
    Прописал в ЭКСТРЕ
    Код:
    .avatar img, .avatar .img, .avatarCropper, .avatarCropper a, .avatarCropper span, .avatarCropper label {background: transparent none !important}
    .avatarCropper img {border-radius: 6px !important}
    Жесть какие глюки пошли. Аватарки в сообщениях слетели (пустое место), то что должно вставляться (аватарка) в карту - тут происходит вообще что то непонятное.
    Но самое главное что округлостей так и не появилось.
    Слава Богу, что смог отмотать назад. Надо теперь это дело перекурить. У кого то есть проверенное решение?
     
  8. CyberAP

    CyberAP Местный

    Регистрация:
    05.10.10
    Сообщения:
    2 604
    Симпатии:
    1 660
    Версия XF:
    1.5.10
    Для аватарок в формате png - скругление возможно. Для всех остальных нельзя.
    Вот код для png:

    Код:
    .xenOverlay.memberCard .avatarCropper,
    .xenOverlay.memberCard .avatarCropper a.avatar
    {background-color: transparent;}
    
    .xenOverlay.memberCard img
    {border-radius: 6px;} 
     

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