Подфорумы в столбик.

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Подфорумы в столбик.

CabinetAdmin 25 июн 2013, 10:35 Сообщение

Мне стало интересно, реально ли осуществить вывод списка подфорумов не в строку, а в столбик не изменяя файлы php.

Сделать из такого:


Такое:


Оказывается реально и не так уж и сложно. Для реализации нам потребуется внести небольшую правку в шаблон forumlist_body.html и добавить несколько строк в стили.

Итак, находим в шаблоне forumlist_body.html:

Код: Выделить всё

<!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->


Меняем на:

Код: Выделить всё

<!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> <span class="sub">{forumrow.SUBFORUMS}</span><!-- ENDIF -->


    Т.е. оборачиваем {forumrow.SUBFORUMS} в тег <span> со своим классом.

И последнее что нужно, это добавить стили, можно просто в самый конец темы вашего стиля:

Код: Выделить всё

.sub { font-size: 0; margin-left: 10px; display: block; } .sub a.subforum { display: table-cell; font-size: 11px; }



Что и как у нас получилось? Получилось у нас вот что, мы задали нулевой размер шрифта для содержимого в теге <span> и размер в 11px для содержимого в теге <a>. Теперь подфорумы будут выводиться в столбик, а не через запятую, да и как бы не нужны эти запятые если список осуществляется не в одну строку.


По поводу валидации - проблем быть не должно.
По поводу правильности отображения, если верить htmlbook.ru, значение table-cell не работает в IE6 и IE7, а также в Safari 3.1 будет не корректное отображение поскольку у нас нет элементов со значениями свойства display: table и table-row.


В принципе можно осуществить и отображение в два столбца используя псевдокласс :nth-of-type:

Код: Выделить всё

.sub a:nth-of-type(odd) { float: left; margin-right: 25px; }


Получается, что каждый нечётный элемент будет иметь свойство float: left; и будет обтекаться следующим, чётным элементом.

Стоит отметить, что псевдокласс :nth-of-type входит в CSS3, которые устаревшие браузеры не понимают. IE понимает только начиная с 9 версии.

Если вы считаете это откровенным бредом и проще и правильней осуществлять этот способ внесением правок в файлы php, то ваш способ реализации на форуме гуру:
Скрытый текст. Необходимо зарегистрироваться.
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
Uzanka

Re: Подфорумы в столбик.

Uzanka 20 май 2014, 11:31 Сообщение

CabinetAdmin
Я реализовала этот вариант. Теперь только не пойму как бы в этом варианте сделать:
1) серые стрелочки рядом с каждым подфорумом
2) чтобы они становились красными, когда есть новое сообщение в подфоруме.

скрин как было с серыми стрелочками тут:
http://forumimage.ru/show/100507947

зы. я пыталась вставить картинку перед названием подфорумов, но она отображается только 1 раз.. ничего больше не смогла придумать. Буду очень признательна за помощь.
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Подфорумы в столбик.

CabinetAdmin 20 май 2014, 13:45 Сообщение

Стили - Наборы рисунков - ваш стиль - Легенда подфорума (Легенда подфорума с новыми сообщениями) - ваша картинка.

Плюс убедитесь, что в теме стиля есть такой кусок:

Код: Выделить всё

ul.topiclist li.row dt a.subforum.read {
background-image: url("{IMG_SUBFORUM_READ_SRC}");
}

ul.topiclist li.row dt a.subforum.unread {
background-image: url("{IMG_SUBFORUM_UNREAD_SRC}");
}


Он должен быть над .forum-image {, если его нет - добавьте.
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
CabinetAdmin

Re: Подфорумы в столбик.

CabinetAdmin 20 май 2014, 14:00 Сообщение

Ещё обратил внимание, что у вас между подфорумами большое расстояние, это видимо особенность вашего стиля, если не мешает, то можно оставить и так, если всё же не надо так, то находите в теме стиля:

Код: Выделить всё

dl.icon dt {
padding-left: 45px; /* Space for folder icon */
background-repeat: no-repeat;
background-position: 5px 95%; /* Position of topic icon */
font-size: 11px;
line-height: 1.3em;
}


И удаляете отсюда - line-height: 1.3em;
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
Uzanka

Re: Подфорумы в столбик.

Uzanka 20 май 2014, 22:09 Сообщение

CabinetAdmin
спасибо большое :Rose: всё получилось! :Yahoo!:

Надо сказать, что это, действительно, более изящный способ реализации, чем через скрипты. Еще раз большое спасибо!
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
Uzanka

Re: Подфорумы в столбик.

Uzanka 21 май 2014, 14:13 Сообщение

CabinetAdmin
а не подскажете еще по поводу оформления подфорумов. если бя я хотела изменить размер щрифта и его цвет (названий подфорумов), то где это настраивается в стилевом файле?
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Подфорумы в столбик.

CabinetAdmin 21 май 2014, 14:37 Сообщение

В том, который вставили:

Код: Выделить всё

.sub a.subforum { display: table-cell; font-size: 11px; }
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
Uzanka

Re: Подфорумы в столбик.

Uzanka 21 май 2014, 16:39 Сообщение

CabinetAdmin
спасибо :Rose: всё исправила на свой вкус.
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
Uzanka

Re: Подфорумы в столбик.

Uzanka 23 май 2014, 20:00 Сообщение

CabinetAdmin » 20 май 2014, 14:00 писал(а):Ещё обратил внимание, что у вас между подфорумами большое расстояние

Сегодня заметила только, что в Гугль Хроме у меня, действительно, очень большое расстояние между подфорумами. А в ИЕ почему-то всё отлично отображается. Ту строчку, про которую вы писали, я убрала. Но это не помогло. Может быть есть еще какие-то варианты как это можно исправить? Буду очень признательна :) :Rose:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Подфорумы в столбик.

CabinetAdmin 24 май 2014, 08:09 Сообщение

Стиль у вас просто такой. Добавьте line-height: 1.4em; к .sub { и .sub a.subforum {. Либо удалите line-height: 1.2em; в:

Код: Выделить всё

body { margin: 0 auto; padding: 0 8px; position: relative; min-height: 100%; font-family: Verdana,Helvetica,Arial,sans-serif; line-height: 1.2em; font-size: 12px; color: #444; }
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
Uzanka

Re: Подфорумы в столбик.

Uzanka 24 май 2014, 13:38 Сообщение

CabinetAdmin
спасибо большое! Всё прошло :Yahoo!:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
емили

Подфорумы в столбик.

емили 25 янв 2020, 14:10 Сообщение

а если у меня этого нету

Код: Выделить всё

<!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS --><br /><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}<!-- ENDIF -->
только это

Код: Выделить всё

<!-- EVENT forumlist_body_subforum_link_prepend
что делать

Аватара пользователя
CabinetAdmin

Подфорумы в столбик.

CabinetAdmin 26 янв 2020, 19:03 Сообщение

Ничего не делать. Это значит что у вас 3.1/3.2 версия и нужно установить расширение.
Хочешь поблагодарить? Есть способы - Поддержать проект

Аватара пользователя
емили

Подфорумы в столбик.

емили 27 янв 2020, 20:06 Сообщение

CabinetAdmin писал(а):Источник цитаты Ничего не делать. Это значит что у вас 3.1/3.2 версия и нужно установить расширение.
не ставиться он у меня или вы можете посоветовать , у меня 3.3

Аватара пользователя
CabinetAdmin

Подфорумы в столбик.

CabinetAdmin 27 янв 2020, 21:09 Сообщение

Завтра/послезавтра поставлю то расширение на 3.3, проверю, если заработает выложу здесь на форуме поправленную версию.
Хочешь поблагодарить? Есть способы - Поддержать проект


Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость