1. Мы продолжаем публиковать интересные статьи на тему SocialEngine 4. Одна из статей посвящена правильному выбору сервера для вашей социальной сети, а другая содержит советы по увеличению производительности платформы. Также мы добавили большую статью о пользовательских уровнях. Ознакомиться со статьями вы можете в разделе Вопросы и Ответы SocialEngine 4.

  2. Вам кажется, что ваша версия SocialEngine 4, работает медленно?

    Голосуйте. Пишите свою версию системы, железо на чем работает и количество пользователей. Будем увеличивать производительность :-) Подробнее

  3. В связи с участившимися случаями попыток продажи пользователями форума различных "сборок" коммерческих социальных платформ, обычно основанных на SocialEngine 3, вводится новое правило для форума. Запрещается создание тем или размещение в уже созданных предложений о продаже или размещение ссылок на сайты, где происходит продажа "сборок". Пользователи, которые продолжат свою коммерческую деятельность в данном направлении, будут заблокированы. Подробнее.
Новые полезные статьи о SocialEngine 4 Ваш SocialEngine 4 медленно работает? Запрет на размещение информации о "Сборках"

Закругляем углы у картинок плюс бонусы.

Discussion in 'Templates' started by Gooos, Feb 21, 2011.

  1. Gooos Thread starter абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Итак, наверное, многим будет в тему у себя на сайте довольно простым методом сделать закругление по углам у аватарок, фоток и прочих картинок. А кому-то может даже понадобиться сделать внешнюю и внутреннюю тень, придать картинке вид выпуклой или вогнутой, тогда этот урок для вас.

    corner2..jpg

    Начнём:

    Для реализации всего этого вам понадобится небольшой яваскрипт и добавление некоторых классов к картинкам.
    Рассмотрим на примере использования для SE3
    Вставьте в вашу страницу header_global.tpl между <head> и </head>
    PHP:
    {* Corner *}
    <    script type="text/javascript" src="./include/js/corner.js"></script>
    {* /Corner *}
    Загрузите по FTP скрипт в папку include/js/
    Далее надо приписать class для картинок.
    Пример для аватарки в профиле:
    PHP:
      {* SHOW USER PHOTO *}
      <    table cellpadding='0' cellspacing='0' width='100%' style='margin-bottom: 10px;'>
      <    tr>
      <    td class='profile_photo'><img class='photo corner iradius16 ishade66 ishadow25' src='{$owner->user_photo("./images/nophoto.gif")}' border='0'>}</td>
      </    tr>
      </    table>
    Получится вот так:

    corner..jpg

    Где:
    corner - инициализация (обязательно)
    iradius16 - скругление углов 16px - min=0 max=100 default=0
    ishade66 - внутренняя тень (не обязательно) - min=0 max=100 default=0
    ishadow25 - внешняя тень (не обязательно) - min=0 max=100 default=0

    Дополнительно можно сделать инверсию внутренней тени, добавив класс "inverse", пример:
    PHP:

          {* SHOW USER PHOTO *}
      <    table cellpadding='0' cellspacing='0' width='100%' style='margin-bottom: 10px;'>
      <    tr>
      <    td class='profile_photo'><img class='photo corner iradius24 ishadow33 inverse' src='{$owner->user_photo("./images/nophoto.gif")}' border='0'></td>
      </    tr>
      </    table>
    Получится вот так:

    inverse..jpg
    Ну и вот собственно сам скриптик:

    Attached Files:

    Gooos, Feb 21, 2011
    #1
    Katerina likes this.

  2. Red Rabbit Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Хороший пример. Думаю многим пригодится. В прикрепленном файле мой файл, тоже самое, но упакован, и немного быстрее обрабатывается в ie.

    Attached Files:

    Red Rabbit, Feb 21, 2011
    #2
    Katerina likes this.

  3. twixi007 Famous member


    Offline
    • Знаменитый
    Message Count:
    417
    Likes Received:
    77
    My version of SE:
    4.6.0
    А как сделать так же в обзоре альбома!? Как на первом скрине!??
    twixi007, Feb 25, 2011
    #3

  4. Gooos Thread starter абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Странно, вроде всё подробно и понятно изложено о.О

    В файле browse_albums.tpl найти этот код и добавить class='corner iradius8'
    Тут уже добавлено:

    PHP:
        <div class='albums_browse_item' style='width: 415px; float: left;'>
          <    table cellpadding='0' cellspacing='0'>
          <    tr>
          <    td style='vertical-align: top;'>
            <    a href='{$url->url_create('album', $albums[album_loop].album_author->user_info.user_username, $albums[album_loop].album_id)}'><img class='corner iradius8' src='{$album_cover_src}' border='0' width='100' height='100'></a>
          </    td>
    Gooos, Feb 25, 2011
    #4

  5. ermakover Novice member


    Offline
    Message Count:
    81
    Likes Received:
    0
    Классно получается! Спасибо автору!
    ermakover, Mar 21, 2011
    #5

  6. MrKuzyа User


    Offline
    Message Count:
    59
    Likes Received:
    1
    сори, но не можно это сделать лишь при помощи css добавив в style.css строчечку)) либо обозвать его какнить img2 и подписывать к картинке class='img2'
    .img {
    border-radius: 15px;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -webkit-border-radius: 15px; }

    кстате а вот пример, чтоб закругление было тока сверху :
    .img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    }

    эксперементируйте)))
    MrKuzyа, Aug 18, 2011
    #6

  7. Red Rabbit Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Далеко не у всех браузеры поддерживают css 3.
    Red Rabbit, Aug 18, 2011
    #7

  8. Gooos Thread starter абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Кстати так правильнее и короче:
    PHP:

    .img {
               border-radius: 15px 15px 0px 0px;
           -    moz-border-radius: 15px 15px 0px 0px;
           -    webkit-border-radius: 15px 15px 0px 0px
               }
    :)
    Gooos, Aug 19, 2011
    #8

Share This Page

All rights reserved SocEngine.ru ©