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

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

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

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

[хак] Округляем углы блоков во всех браузерах (+IE 6). CSS.

Discussion in 'Дополнения' started by Red Rabbit, Feb 20, 2011.

Page 1 of 2

  1. Red Rabbit Thread starter Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Итак, картинки мы на нашем сайте уже закруглили, идем дальше и делаем то же самое с блоками. В стандартном шаблоне от InstantCMS они округлены, но не везде, а именно - нелюбимый всеми IE 6/7/8 упорно делает всё по своему, и плавные линии по краям превращаются в нечто похожее на стиль начала 2000 года. Вообщем так жить нельзя. =) Поскольку нам приходится заботиться обо всех пользователях, даже о тех, кто использует допотопные браузеры, то приходится искать способ сделать отображение сайта одинаковым для всех, с минимальными затратами на обеспечение кроссбраузерности. Конечно, можно запретить заходить с этого браузера на сайт вообще (по наблюдениям 80% пользователей просто закрывают сайт и больше туда не возвращаются), можно просто оставить всё как есть и оставить пользователей в недоумении почему у вас такой некрасивый дизайн. Но мы так делать не будем, а постараемся решить проблему дипломатическим путем, используя css и тег IE - behavior. Этот способ стар, но он работает, универсален, и о нем здесь знают не все. Поскольку этот гайд находится в разделе посвященному InstantCMS, то именно туда мы и будем применять данный хак.

    Поехали. Шаг первый.

    Скачиваем файл из вложения. Кладем его рядом с файлами css в папке с вашим шаблоном. Не забываем извлечь файл из архива!

    Шаг второй.

    Открываем файл styles.css и ищем там

    Этот блок отвечает за стиль модулей на главной странице. Мне нужен был только он, поэтому остальное можете заменить сами, это очень просто. Или применить к другому шаблону.
    Обращаем внимание на три строки выделенные красным. Это и есть округление.

    После
    HTML:
    -moz-border-radius:8px;
    Вставляем
    HTML:
    behavior: url(border-radius.htc);
    По аналогии меняем везде где нужно.

    Всё! Теперь IE 6/7/8 имеет круглы углы без всяких туч ненужных js, картинок и шаманства. Просто, да? :)

    Attached Files:

    Red Rabbit, Feb 20, 2011
    #1

  2. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Я бы ещё добавил для Google Chrome, Safari, Konqueror и пр.:
    PHP:
        -webkit-border-radius: 8px; /* или свой радиус */
       
    Gooos, Feb 20, 2011
    #2

  3. Red Rabbit Thread starter Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Добавил для сафари.

    В нем есть поддержка css 3, т.е.
    хватит за глаза. Учитывая что обновляется он сам, то за него можно не переживать - там всё по стандарту и всё отображается правильно. =)


    upd. Я иногда пользуюсь css3pie - шикарная вещь, куда мощнее описанной, и есть реализация тени для ie6. Но он сложнее в установке, и иногда приходится допиливать руками.
    Red Rabbit, Feb 20, 2011
    #3

  4. Gooos абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Закругляем всё, что закругляется:
    в файле styles.css найти
    PHP:
    #topmenu ul li ul {
            display:none;
            position: absolute;
            top: 115px;
            //top:40px;
        //left:0;
            width: 200px;
            background: #E9E9E9;
            color: #000;
            padding:0px;
            z-index:1000;
            box-shadow:1px 1px 3px #000;
            -moz-box-shadow:1px 1px 3px #000;
    }
    заменить на
    PHP:

    #topmenu ul li ul {
            display:none;
            position: absolute;
            top: 115px;
            //top:40px;
        //left:0;
            width: 200px;
            background: #E9E9E9;
            color: #000;
            padding:0px;
            z-index:1000;
            box-shadow:1px 1px 3px #000;
            -moz-box-shadow:1px 1px 3px #000;
            -moz-border-radius-bottom-left: 8px;
        -    moz-border-radius-bottom-right: 8px;
        -    webkit-border-bottom-left-radius: 8px;
        -    webkit-border-bottom-right-radius: 8px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
    }
    Результат:

    radius..jpg
    Gooos, Feb 20, 2011
    #4

  5. Влад Novice member


    Offline
    Message Count:
    13
    Likes Received:
    0
    Чет я ваще никак не въезжаю...(((

    Вот мой блок:

    div.header {
    padding: 0px 5px 5px 0px;
    border: 0px solid #ff6400;
    font-weight: bold;
    background-repeat: repeat-x;
    color:#333333;
    }


    Как округлить его шапку???
    Влад, Feb 21, 2011
    #5

  6. Red Rabbit Thread starter Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Заменить на это.

    PHP:

    div    .header {
    padding: 0px 5px 5px 0px;
    border: 0px solid #ff6400;
    font-weight: bold;
    background-repeat: repeat-x;
    color:#333333;
    border-radius:8px;
    -    moz-border-radius:8px;
    -    webkit-border-radius: 8px;
    }
    Red Rabbit, Feb 21, 2011
    #6

  7. Влад Novice member


    Offline
    Message Count:
    13
    Likes Received:
    0
    Ничего не произошло...
    Влад, Feb 21, 2011
    #7

  8. Red Rabbit Thread starter Tough member


    Offline
    Message Count:
    898
    Likes Received:
    193
    Чистим кеш после изменения (удаляем все файлы из папки cache, кроме .htaccess).
    Какой браузер?
    Red Rabbit, Feb 21, 2011
    #8

  9. Влад Novice member


    Offline
    Message Count:
    13
    Likes Received:
    0
    Браузер у меня мозила))
    Влад, Feb 21, 2011
    #9

  10. sewgen User


    Offline
    Message Count:
    259
    Likes Received:
    40
    My version of SE:
    3.20
    А что товарищу Валидатору ответить на это?


    В глобале стоит:

    sewgen, Feb 21, 2011
    #10
Page 1 of 2

Share This Page

All rights reserved SocEngine.ru ©