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

Side By Side Nodes

Тема в разделе "Модификации шаблонов", создана пользователем adder, 24 ноя 2013.

Загрузка
  1. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Автор: Audentio
    Ссылка на официальном форуме:
    HTML:
    http://xenforo.com/community/resources/side-by-side-nodes.2449/
    Привет всем,

    Я часто вижу разговоры о разделах/категориях в 2/3 колонки. Сегодня я Вам представляю мануал от Audentio.
    Вы наверное спросите: А что тут нового? На это я могу ответить коротко и ясно: Всё!
    Во-первых, данная модификация адаптивна, а во-вторых: валидная вёрстка, что немаловажно.

    Для начала определитесь что Вы хотите: категории бок о бок или же форумы/страницы/редирект-страницы в несколько колонок? Определились? Тогда поехали.

    Все изменения делаются ТОЛЬКО через EXTRA.css!

    Метод 1: Категории бок о бок

    Шаг 1: Позиция категории в ширину 50%

    Код:
    .nodeList .node.category {
            float: left;
            width: 50%;
        }
    Вы можете встретится с такой проблемой, что одна категория выше другой, а это ой как не красиво будет выглядеть. Для этого добавим следующий код:
    Код:
    .nodeList .node.category {
            float: left;
            width: 50%;
            box-sizing: border-box;
        }
    
        .nodeList .node.category:nth-child(odd) {
            clear: left;
            padding-right: 5px;
        }
    
        .nodeList .node.category:nth-child(even) {
            padding-left: 5px;
        }
    method1_step1.jpg

    Не будем останавливаться, правда?) Продолжим!

    Шаг 2: Зачистка nodeList:

    На первом скриншоте Вы можете заметить, что SectionMain не покрывает все разделы. Это выглядит убого.
    Правим это добавляя следующий код:
    Код:
    {xen:helper clearfix, '.nodeList'}
    method1_step2.jpg

    Шаг 3: Убираем блок последнего сообщения

    Придерживаясь данного метода, оставлять блок с последним сообщением не разумно для пользователей с маленькими мониторами.
    Добавляем данный код:
    Код:
    .nodeList .node.category .node .nodeText {margin-right: 10px;}
        .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}
    method1_step3.jpg

    Шаг 4: Правим адаптивность

    Чтобы наша модификация отлично смотрелась в адаптивном варианте, добавляем следующий код:
    Код:
    /* METHOD 1: SIDE BY SIDE CATEGORIES */
    
    @media (min-width: @maxResponsiveMediumWidth) {
    
        {xen:helper clearfix, '.nodeList'}
    
        .nodeList .node.category {
            float: left;
            width: 50%;
            box-sizing: border-box;
        }
    
        .nodeList .node.category:nth-child(odd) {
            clear: left;
            padding-right: 5px;
        }
    
        .nodeList .node.category:nth-child(even) {
            padding-left: 5px;
        }
    
        .nodeList .node.category .node .nodeText {margin-right: 10px;}
        .nodeList .node.category .node .nodeLastPost, .nodeList .node.category .node .nodeControls {display: none;}
    
    }
    method1_step4.jpg

    С этим методом мы закончили. Естественно Вы можете вносить свои изменения в код, но будьте осторожны!

    Метод 2: Форумы/страницы/редирект-страницы бок о бок (в 2 колонки)

    На сколько я знаю, это самый предпочтительный вариант. Многим нравится данная модификация.

    Шаг 1: Поместим узлы рядом друг с другом

    Код:
    .nodeList .node.level_2 {float: left; width: 50%;}
    Держите в уме, что используя .level_2, это не сработает с подфорумами. Если Вы хотите, чтобы это работало и подфорумами, то Вам нужно добавить следующий код:
    Код:
    .nodeList .node.forum, .nodeList .node.link, .nodeList .node.page {float: left; width: 50%;}
    А также, чтобы иконки отображались правильно, мы добавим следующий код:
    Код:
    .nodeList .node.level_2:nth-child(odd) {
            clear: left;
        }
    Шаг 2: Зачистка nodeList:

    Как и в прошлом методе, мы правим косяк с sectionMain добавляя следующий код:
    Код:
    {xen:helper clearfix, '.nodeList'}
    method2_step2.jpg

    Шаг 3: Убираем блок последнего сообщения

    Убираем блок последнего сообщения, как и в прошлом методе для того, чтобы не было косяков у пользователей с маленькими мониторами:
    Код:
        .nodeList .node.level_2 .nodeLastPost {
            position: static;
            width: auto;
            padding-right: 20px;
            margin-top: 0;
        }
    
        .nodeList .node.level_2 .nodeText {margin-right: 26px;}
        .nodeList .node.level_2 .nodeControls {right: 8px;}
    Шаг 4: Правим адаптивность

    А чтобы данная модификация смотрелась изумительно в адаптивном варианте, мы добавим следующий код:
    Код:
    /* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */
    
    @media (min-width: @maxResponsiveMediumWidth) {
    
        {xen:helper clearfix, '.nodeList'}
    
        .nodeList .node.level_2 {float: left; width: 50%;}
    
        .nodeList .node.level_2:nth-child(odd) {
            clear: left;
        }
    
        .nodeList .node.level_2 .nodeLastPost {
            position: static;
            width: auto;
            padding-right: 20px;
            margin-top: 0;
        }
    
        .nodeList .node.level_2 .nodeText {margin-right: 26px;}
        .nodeList .node.level_2 .nodeControls {right: 8px;}
    
    }
    method2_step3.jpg

    Готово!

    Если Вы хотите сделать у последнего узла резиновую ширину, то добавьте следующий код:
    Код:
        .nodeList .node.level_2:last-child:nth-child(odd) {width: 100%;}
        .nodeList .node.level_2:last-child:nth-child(odd) .nodeText {
            margin-right: 270px;
        }
    lastoddnode.jpg

    Также мы можем сделать вид у последнего узла в стандартном стиле XenForo, для этого надо добавить следующий код:
    Код:
        .nodeList .node.level_2:last-child:nth-child(odd) .nodeLastPost {
            width: 210px;
            margin-top: 10px;
            position: absolute;
            padding-right: 10px;
            }
    
        .nodeList .node.level_2:last-child:nth-child(odd) .nodeControls {right: 242px;}
    На этом всё.
    Кстати, вот что получилось у Audentio в их основном шаблоне - UI.X.
    uix.jpg

    --- Q & A ---

    Вопрос: Очень хочу узлы в 3 колонки используя второй метод. Возможно ли это?
    Ответ: Ещё как возможно! :)

    Для этого надо заменить код:
    Код:
        .nodeList .node.level_2 {float: left; width: 50%;}
    
        .nodeList .node.level_2:nth-child(odd) {
            clear: left;
        }
    на
    Код:
        .nodeList .node.level_2 {float: left; width: 33.33%;}
    
        .nodeList .node.level_2:nth-child(3n - 2) {
            clear: left;
        }
     
    sag-sag, Nevil, st.spok и 4 другим нравится это.
  2. Freezk

    Freezk Новичок

    Регистрация:
    25.06.13
    Сообщения:
    13
    Симпатии:
    1
    Версия XF:
    1.1.5
    Здравствуйте.
    Во первых большое вам спасибо за статью:)
    А во вторых помогите мне пожалуйста:(
    Сделал все как говорится
    Метод 1: Категории бок о бок
    Но получается вот так:
    [​IMG]
    Мне бы хотелось что-бы категории пододвинулись и не было "пустоты".
    Заранее спасибо)
     
  3. Guyver

    Guyver Местный

    Регистрация:
    28.11.11
    Сообщения:
    59
    Симпатии:
    25
    Версия XF:
    1.2.0
    Freezk, подсказать тебе к сожалению не могу, но как вариант ты можешь обновить свой форум до версии 1.2 или 1.3 и скачать плагин [rellect] Nodes Grid с этой страницы: http://www.xf-russia.ru/forum/threads/rellect-nodes-grid.8407/ !
     
    Freezk нравится это.
  4. Freezk

    Freezk Новичок

    Регистрация:
    25.06.13
    Сообщения:
    13
    Симпатии:
    1
    Версия XF:
    1.1.5
    Большое спасибо. У меня как раз 1.2.5 (Уже обновился давно но тут не менял версию).
    Сейчас проверим))
    --- добавлено : 23 мар 2014 в 06:50 ---
    Смотрите что выходит:
    [​IMG]

    Мне надо убрать пустое место.
    Тоесть в данном случае что-бы раздел рынок поднимался вплотную к "Старым играм"
     
    Последнее редактирование модератором: 30 мар 2014
  5. Guyver

    Guyver Местный

    Регистрация:
    28.11.11
    Сообщения:
    59
    Симпатии:
    25
    Версия XF:
    1.2.0
    У всех разделов одинаковый номер порядка отображения или отличается?

    П.С.: Ты случайно не забыл всё вернуть в исходное состояние до того момента как вручную изменил шаблоны, т.е. перед тем, как установить новый плагин?
     
    Последнее редактирование: 23 мар 2014
  6. Freezk

    Freezk Новичок

    Регистрация:
    25.06.13
    Сообщения:
    13
    Симпатии:
    1
    Версия XF:
    1.1.5
    1 У всех разделов разные номера.
    2 Нет , не забыл
     
  7. Guyver

    Guyver Местный

    Регистрация:
    28.11.11
    Сообщения:
    59
    Симпатии:
    25
    Версия XF:
    1.2.0
    Я не уверен, но попробуй дать одному из разделов тот же номер, что и у раздела Одиночные игры.
     
  8. Freezk

    Freezk Новичок

    Регистрация:
    25.06.13
    Сообщения:
    13
    Симпатии:
    1
    Версия XF:
    1.1.5
    Результата 0
     
  9. Sergey1

    Sergey1 Местный

    Регистрация:
    28.04.13
    Сообщения:
    176
    Симпатии:
    59
    Версия XF:
    1.4.1
    @adder, работает ли это на 1.3.? Можете подытожить что куда надо вставить, чтобы появились аккуратные два столбика? Я попробовал [rellect] Nodes Grid - выводит не аккуратно:

    12121212.png
     
  10. sergei5053

    sergei5053 Пользователь

    Регистрация:
    28.10.13
    Сообщения:
    26
    Симпатии:
    2
    Версия XF:
    1.1.3

    Здравствуйте
    Подскажите как можно так реализовать Сохраненное изображение 2014-5-18_0-46-25.455.png

    сюда выводятся последние темы из указанных категорий , причем дубликат категории ,ниже есть в один столбик эти же категории...
     
    Nevil нравится это.
  11. Sergey1

    Sergey1 Местный

    Регистрация:
    28.04.13
    Сообщения:
    176
    Симпатии:
    59
    Версия XF:
    1.4.1
    Начерта такие гигантские цитирования? Емейл-оповещение о новом сообщении пришло длиной с первый том "Войны и мира". Оверквотинг (ВиКи).
     
  12. Nevil

    Nevil Пользователь

    Регистрация:
    28.05.13
    Сообщения:
    52
    Симпатии:
    13
    Скиньте пожалуйста ссылку на ресурс.
     
  13. sergei5053

    sergei5053 Пользователь

    Регистрация:
    28.10.13
    Сообщения:
    26
    Симпатии:
    2
    Версия XF:
    1.1.3
  14. Nevil

    Nevil Пользователь

    Регистрация:
    28.05.13
    Сообщения:
    52
    Симпатии:
    13
    Что то я там не увидел дизайна как на картинке.
     
  15. sergei5053

    sergei5053 Пользователь

    Регистрация:
    28.10.13
    Сообщения:
    26
    Симпатии:
    2
    Версия XF:
    1.1.3
    прошу прощения перепутал вот http://www.rango-hack.ru/
     
  16. Aheande

    Aheande Read only

    Регистрация:
    07.01.14
    Сообщения:
    10
    Симпатии:
    3
    Версия XF:
    1.2.3
    что за сайт?
     

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