Присоединяюсь к спасибкам! Мне дзен-код подошел в самый раз
--------------------------------
И есть такой запрос: хочу переоформить один форум в структурированную галерею, где названия категорий - картинками, названия форумов/подфорумов - тоже картинками, даже названия тем - и те картинками. Для категорий что-то подобное встречал (надо будет поискать), а для более мелких структур такое возможно?
Переоформление форума в структурированную галерею
Сообщений 1 страница 20 из 49
Поделиться1Вс, 10 Июл 2022 15:49:18
Поделиться2Пн, 11 Июл 2022 08:19:41
Millafan
Насчет подфорумов не знаю, насчет форумов и тем точно можно. Описание форума поддерживает HTML, для тем тоже можно сделать картинки, есть скрипт.
Поделиться3Пн, 11 Июл 2022 15:00:36
Millafan
Ставить в самое начало хтмл-низ, если я правильно помню инструкцию:
Код:<script type="text/javascript"><!--Своя картинка в каждую категорию --> $(document).ready(function(){ myarray=new Array( "Категория №1", "http://mybb.ru/f/collection/0208.gif", "Категория №2", "http://mybb.ru/f/collection/0211.gif", "Категория №3", "http://mybb.ru/f/collection/0213.gif", "Категория №4", "http://mybb.ru/f/collection/0214.gif", "Статистика форума", "http://mybb.ru/f/collection/0217.gif" //Последний элемент без запятой! ) $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) { for(q=0;q<myarray.length;q++){ var cssObj = { "height":"50px", "background-color": "transparent", "background-image":"url("+myarray[q+1]+")", "background-position":"50% 50%", "background-repeat":"no-repeat" //Последний элемент без запятой! } if($(this).children("span").text()==myarray[q])$(this).css(cssObj); q++} }); }); </script>В кодах просто заменяешь адреса картинок на свои, а клише "Категория №..." на реальные названия (они, между прочим, никуда не деваются, а вписываются в твою картинку, так что, если захочешь извести текст "под нолик", надо будет искать доп.код)
"height":"50px" - высота твоих картинок-названий, - как по мне, 50 пикселей надо бы заменить хотя бы на 75-80, чтобы картинка не выглядела бордюром, но тут уж смотри сам, как оно будет эстетичнее.
В отношении кодов для перевода в картинки названий форумов и тем Mirra Bell правильно сказала: скрипт есть, я его даже помню чисто визуально, но... пока не нашёл.
Попробуй пошарить по ключевым словам, мабуть, найдёшь быстрее всех
Поделиться4Вт, 12 Июл 2022 06:17:01
Mirra Bell
Подфорумы - не суть, их можно ваще упразднить, как лишнюю ступеньку, распределив темы внутри самих форумов по визуально различимым блокам. За скрипт для картиночных заголовков тем и форумов буду благодарен
Pasteur
Скрипт-код "картинки для категорий" уже опробовал, работает классно, спасибо, что подогнал (и заочное спасибо автору!) Начинаю склеивать панорамные картинки для заголовков категорий. И по ходу буду искать такую же фичу для форумов и тем
Поделиться5Вт, 12 Июл 2022 09:28:13
Millafan
Для вставки картинки в описание форума (Администрирование - Форумы - нужный форум):
<a target="_blank" href="ссылка на тему или форум"><img src="ссылка на картинку" alt="название ссылки"></a>
Для картинки темы в определенном форуме (в окно Цвета style_cs.css - второе окно стиля или в HTML-верх в тегах <style></style> )
div#forum_f72 div.icon{
background-image : url('ссылка на картинку');
float: left;
margin-left: 20px;
background-repeat: no-repeat;
width: 75px;
height: 120px;}
То, что красным - меняете на своё, первый параметр - номер форума, остальные регулируют положение и размер картинки.
Поделиться6Вт, 12 Июл 2022 18:45:38
Mirra Bell
Большущее спасибо за помощь
По прикидкам получается, что это именно то, что требовалось.
Тут, правда по ходу возникли доп. проблемы со скриптами "сворачивание категорий" и "форумы в два столбца"
Я тут пока поварюсь в собственном соку, попробую совместить все эти дизайнерские навороты в одном форуме,
а если уж не получится самостоятельно, то снова вылезу с кучей вопросов и уточнений
Поделиться7Ср, 13 Июл 2022 08:48:43
Millafan
Это если надо оформить каждый форум своей картинкой, если же хотите просто оформить все форумы одинаковыми картинками, то лучше взять это.
Поделиться8Ср, 13 Июл 2022 23:45:44
Mirra Bell
Да, каждый форум своей картинкой (хотя по типу они все будут одинаковые - высота 100пкс, ширина 1200пкс для категорий и 600пкс для форумов, если удастся сделать их в два столбца).
Результат пока нулевой, а где-то даже на минус Пытаюсь выяснить, кто кому из скриптов жить не даёт, но чувствую, что сам не докопаюсь.
Поделиться9Чт, 14 Июл 2022 10:42:56
Ого! Если, скажем, 10 категорий да по 6-8-10 форумов в каждой, это ж будет тот самый самолёт, который мы обхихикали в теме Улыбнуло-2: Юмор наносит ответный удар. - не взлетит, короче.
Попробуй для облегчения главной страницы задействовать скрипт "сворачивание категорий". В своё время я его юзал (правда, не с картиночными названиями), впечатления самые положительные
Код:<script type="text/javascript"><!--Cворачивание категорией Ч1--> //cookies function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;} function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;} var aimg = { close: 'https://d.radikal.ru/d30/2106/b0/17594fdf3dee.gif', open: 'https://d.radikal.ru/d25/2106/1d/de05ad851c34.gif' } </script> <script type="text/javascript"><!--Cворачивание категорией Ч2--> $('#pun-main div.category > h2 div.catleft').after('<span class="offctgr" style="float: right;"><img src="'+aimg.open+'" title="показать/cкрыть" /></span>'); $('#pun-main div.category').each(function (i) { var ctgId=$(this).attr('id'); if(getcookie(ctgId)=='close'){ $('#'+ctgId+' > div.container').css({display: 'none'}); $('#'+ctgId+' > h2 > .offctgr img').attr("src",aimg.close)} }); $('span.offctgr').click(function(){ var cat=$(this).parents('div.category').attr('id'); $(this).parents('div.category').children('div.container').toggle('slow'); var s = $(this).find("img").attr("src") == aimg.open ? aimg.close : aimg.open; $(this).find("img").attr("src",s) var catc = getcookie(cat); catc = catc == 'close' ? 'open' : 'close'; setcookie(cat,catc,3600*24*30*1000); return false; }); </script>
Поделиться10Чт, 14 Июл 2022 12:52:12
Millafan
У меня есть и сворачивание, и форумы в 2 столбца, и картинки в форумы вставлять могу без проблем.
Если для категорий ширина в 1200, попробуйте для форумов сделать не 600, а меньше.
Поделиться11Чт, 14 Июл 2022 14:19:16
Да, каждый форум своей картинкой (хотя по типу они все будут одинаковые - высота 100пкс, ширина 1200пкс для категорий и 600пкс для форумов, если удастся сделать их в два столбца).
Сделайте скриншот "что хочу", уберите предыдущие скрипты, чтобы был форум как до этого, и киньте ссылку на форум, но чтобы было видно из под гостя.. Попробую сделать, что вы хотите..
Поделиться12Чт, 14 Июл 2022 18:28:06
Millafan
Возможно экономичнее по длине на главной сделать меньше категорий, а вместо мелкой категории делать форум с подфорумами - кратко на главной и полным отображением по ссылке на основной форум
Отредактировано Deff (Чт, 14 Июл 2022 18:28:22)
Поделиться13Чт, 14 Июл 2022 22:05:30
Pasteur
Mirra Bell
kolobdur74
Deff
Ребята, спасибо, что откликнулись
Я эту ночку посижу, поколдую, чтобы ничего не упустить, а завтра где-то до обеда выложу перечень проблем
Поделиться14Пт, 15 Июл 2022 14:07:11
Спасибо Pasteur за помощь в составлении макетов для ТЗ.
Адрес форума -
Первые три категории доступны для чтения всем (по умолчанию), четвёртая категория (p a r l o r) открыта временно, - в норме будет видна только админам
Инфа не в тему: тестирую сейчас Betternet в Хромиуме, похоже, он обошел iTopVPN по скорости и стабильности
Отредактировано Millafan (Пт, 15 Июл 2022 14:17:05)
Поделиться15Пт, 15 Июл 2022 14:49:18
Millafan, насчёт тотальной зачистки хтмл верх/низ - это ты погорячился
Скрипты Deff и kolobdur74 можешь смело вставлять обратно: они никогда ни с чем не конфликтуют, поскольку написаны грамотно
А то, что притырил картинки под хайды - одобряю, сам такой
Отредактировано Pasteur (Пт, 15 Июл 2022 14:50:41)
Поделиться16Пт, 15 Июл 2022 17:09:01
Millafan, пока без картинок (нужны картинки), в НТМЛ верх:
<style> /* Убираем лишнее */ .title-logo, #pun-navlinks li:not(#navlogin):not(#navlogout), #pun-ulinks, #pun-status, #pun-break1, #pun-crumbs1, #pun-index .category th, #pun-index .tc2, #pun-index .tc3, #pun-index .tcr, #pun-index .icon, #pun-stats {display: none;} /* В две колонки */ #pun-index .hasicon { display: grid; } #pun-index .hasicon tr.alt2 {grid-column: 1 / 2;} #pun-index .hasicon tr.alt1 {grid-column: 2 / 3;} #pun-index.punbb .main td.tcl { display: grid; width: 100%; padding: 0; } </style>
Поделиться17Сб, 16 Июл 2022 18:42:01
Вчера 17:09:01
kolobdur74, все замечательно Подробно отвечу завтра, щас уже выключат свет (ремонтируют)
Отредактировано Millafan (Сб, 16 Июл 2022 18:46:04)
Поделиться18Вс, 17 Июл 2022 11:49:41
Millafan, вместо предыдущего кода:
Код:<style> /* Убираем лишнее */ #pun-title .title-logo, #pun-navlinks li:not(#navlogin):not(#navlogout), #pun-navlinks li span, #pun-ulinks, #pun-status, #pun-break1, #pun-crumbs1, #pun-index .category th, #pun-index .tc2, #pun-index .tc3, #pun-index .tcr, #pun-index .icon, #pun-stats {display: none;} /* Убираем бордюры */ #pun-title, #pun-navlinks, #pun-index.punbb .main td.tcl, #pun-index .container, #pun-index .category, #pun-index .category h2 {border: none;} /* Убираем пробелы */ #pun-index .section, #pun-index .main {margin-bottom: 0;} #pun-index .category {margin-top: 0;} /* Убираем фон в меню */ #pun-navlinks .container {background: none;} /* Выставляем ширину форума */ .punbb { width: 1200px; float: none; margin: 0 auto; } /* Высота шапки */ #pun-title {height: 350px;} /* Настраиваем меню */ #pun-navlinks li {float: right;} #navlogin a, #navlogout a { display: block; border-radius: 20px; width: 20px; height: 20px; } #navlogin a {background: green;} #navlogout a {background: red;} /* В две колонки */ #pun-index .hasicon { display: grid; } #pun-index .hasicon tr.alt2 {grid-column: 1 / 2;} #pun-index .hasicon tr.alt1 {grid-column: 2 / 3;} #pun-index.punbb .main td.tcl { display: grid; width: 100%; padding: 0; } /* Убираем текст в категории и форуме */ #pun-index .category {font-size:0;} /* Высота категории */ #pun-index .category h2{height: 100px;} /* Настраиваем форумы */ #pun-index .tcl h3 a { display: block; width: 600px; height: 100px; } /* --------------------------------------------------------------------------- */ /* Категория 1 */ #pun-category1 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg) no-repeat;} /* Форум 1 */ #forum_f1 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 11 */ #forum_f11 {background: url(https://i.imgur.com/L44EkIc.jpg) no-repeat;} /* -------------------------------------------------------------------------- */ /* Категория 2 */ #pun-category2 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg) no-repeat;} /* Форум 2 */ #forum_f2 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 14 */ #forum_f14 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 13 */ #forum_f13 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 12 */ #forum_f12 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* --------------------------------------------------------------------------- */ /* Категория 3 */ #pun-category3 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg) no-repeat;} /* Форум 19 */ #forum_f19 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 3 */ #forum_f3 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 17 */ #forum_f17 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 15 */ #forum_f15 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 18 */ #forum_f18 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* Форум 16 */ #forum_f16 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} /* --------------------------------------------------------------------------- */ /* Категория 4 */ #pun-category4 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg) no-repeat;} /* Форум 20 */ #forum_f20 {background: url(https://i.imgur.com/VonPyqd.jpg) no-repeat;} </style>
Использованы для наглядности для всех категорий и форумов картинки с первой категории и ее форумов.
Поделиться19Вс, 17 Июл 2022 16:19:55
kolobdur74
Пока наш фанат Милки-Йо сидит в какой-то глухомани без света и интернета (я б не выжил ), решил примерить твой блок кодов у себя на тестовике. И знаешь, тоже подпишусь на это дело, ибо зело удобная конструкция получилась для экспонирования картиночного массива (у меня ведь тоже есть накопительный форум "киношной" направленности, не всё же время учебными проектами заниматься )
Вооот. А как примерил, сразу заметил, что Миллафан кое-что не учёл в ТЗ: стартовая страница гостя с одной кнопкой входа/выхода - это нормально, но когда уже входишь как админ, там же на главной должна появляться ещё и кнопка доступа в админку, без неё никак
Второй моментик, который я бы скорректировал: ширина панорамы или коллажа для замены названия категории - 1200рх, а для форума - 600рх. Вроде, оно и нормально смотрится на главной, когда форумы идут в 2 столбца, НО при заглублении в категорию и переходе на какой-то отдельный форум, его название-картинка занимает всего половину зарезервированной ширины, - не очень эстетично. Может, картинки для названий форумов сделать такими же, как для категорий - 1200рх? - На главной странице они автоматически обрежутся по правому краю до нужных 600рх, а когда заходишь на форум, займут по ширине всё отведённое для них верхнее поле страницы этого форума (на странице конкретной темы, по-моему, те же стандарты).
И третья настройка, которая у меня не применима: заданная ширина форума (а значит, и картинок). У Миллафана на ноуте (или планшете?) вероятно установлено разрешение 1280 на 1024 (или на 960), а я уже маленько подслеповат, поэтому все делишки делаю и все настройки затачиваю под fullHD, то бишь, мои панорамные картинки будут почти по 2 тыщи пикселей в ширину Думаю, ничего в кодах под этот габарит менять не придётся, - тупо воткну нужные по ширине, и оно всё впишется.
...А насчёт кнопок "вход/выход" и "админка", которые при любом раскладе будут неприкаянно торчать на своём пустом поле, как мухи на заборе, у меня есть полуфантастическая идея... - Ближе к финалу я подробно опишу это " KnowWhatButDontKnowHow "
Поделиться20Вс, 17 Июл 2022 19:50:13
стартовая страница гостя с одной кнопкой входа/выхода - это нормально, но когда уже входишь как админ, там же на главной должна появляться ещё и кнопка доступа в админку, без неё никак
Желательно под нее иконку или значок..
Второй моментик, который я бы скорректировал: ширина панорамы или коллажа для замены названия категории - 1200рх, а для форума - 600рх. Вроде, оно и нормально смотрится на главной, когда форумы идут в 2 столбца, НО при заглублении в категорию и переходе на какой-то отдельный форум, его название-картинка занимает всего половину зарезервированной ширины, - не очень эстетично. Может, картинки для названий форумов сделать такими же, как для категорий - 1200рх? - На главной странице они автоматически обрежутся по правому краю до нужных 600рх, а когда заходишь на форум, займут по ширине всё отведённое для них верхнее поле страницы этого форума (на странице конкретной темы, по-моему, те же стандарты).
Нужна картинка в 1200px..
И третья настройка, которая у меня не применима: заданная ширина форума (а значит, и картинок). У Миллафана на ноуте (или планшете?) вероятно установлено разрешение 1280 на 1024 (или на 960), а я уже маленько подслеповат, поэтому все делишки делаю и все настройки затачиваю под fullHD, то бишь, мои панорамные картинки будут почти по 2 тыщи пикселей в ширину Думаю, ничего в кодах под этот габарит менять не придётся, - тупо воткну нужные по ширине, и оно всё впишется.
Форум я сделал по ширине шапки, исходя из того стандартного диза, что у него был предустановлен - он у него резиновый и для переделки удобный.. Если ты используешь тот же стандартный дизайн, то поставить можно любую нужную ширину, главное, чтобы картинки тоже были такой же ширины..