Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Переоформление форума в структурированную галерею


Переоформление форума в структурированную галерею

Сообщений 1 страница 20 из 49

1

Присоединяюсь к спасибкам!  Мне дзен-код подошел в самый раз :yep:
--------------------------------
И есть такой запрос: хочу переоформить один форум в структурированную галерею, где названия категорий - картинками, названия форумов/подфорумов - тоже картинками, даже названия тем - и те картинками. Для категорий что-то подобное встречал (надо будет поискать), а для более мелких структур такое возможно?

0

2

Millafan
Насчет подфорумов не знаю, насчет форумов и тем точно можно. Описание форума поддерживает HTML, для тем тоже можно сделать картинки, есть скрипт.

+1

3

Millafan

Покопался в персональной коллекции скриптов и кодов (кстати, натырил их, в основном из огромных запасов ЕФП) и нашёл интересную штучку для замены названий категорий своими произвольными картинками (у меня она с далёкого 2014-го, а написана, может, ешё раньше). Жалко, что не помню ник автора, - сейчас бы можно было прицельно поискать, нет ли новой версии...

Ставить в самое начало хтмл-низ, если я правильно помню инструкцию:

Код:
<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 правильно сказала: скрипт есть, я его даже помню чисто визуально, но... пока не нашёл.
Попробуй пошарить по ключевым словам, мабуть, найдёшь быстрее всех  :flag:

+1

4

Mirra Bell
Подфорумы - не суть, их можно ваще упразднить, как лишнюю ступеньку, распределив темы внутри самих форумов по визуально различимым блокам. За скрипт для картиночных заголовков тем и форумов буду благодарен :yep:

Pasteur
Скрипт-код "картинки для категорий" уже опробовал, работает классно, спасибо, что подогнал (и заочное спасибо автору!)  :cool: Начинаю склеивать панорамные картинки для заголовков категорий. И по ходу буду искать такую же фичу для форумов и тем  :yep:

0

5

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;}

То, что красным - меняете на своё, первый параметр - номер форума, остальные регулируют положение и размер картинки.

+3

6

Mirra Bell
Большущее спасибо за помощь  :flirt:
По прикидкам получается, что это именно то, что требовалось.
Тут, правда по ходу возникли доп. проблемы со скриптами "сворачивание категорий" и "форумы в два столбца"  :dontknow:
Я тут пока поварюсь в собственном соку, попробую совместить все эти дизайнерские навороты в одном форуме,
а если уж не получится самостоятельно, то снова вылезу с кучей вопросов и уточнений  :flag:

0

7

Millafan
Это если надо оформить каждый форум своей картинкой, если же хотите просто оформить все форумы одинаковыми картинками, то лучше взять это.

+2

8

Mirra Bell
Да, каждый форум своей картинкой (хотя по типу они все будут одинаковые - высота 100пкс, ширина 1200пкс для категорий и 600пкс для форумов, если удастся сделать их в два столбца).
Результат пока нулевой, а где-то даже на минус  :dontknow:  Пытаюсь выяснить, кто кому из скриптов жить не даёт, но чувствую, что сам не докопаюсь.

0

9

Ого!  :tired: Если, скажем, 10 категорий да по 6-8-10 форумов в каждой, это ж будет тот самый самолёт, который мы обхихикали в теме Улыбнуло-2: Юмор наносит ответный удар.  :D  - не взлетит, короче.
Попробуй для облегчения главной страницы задействовать скрипт "сворачивание категорий". В своё время я его юзал (правда, не с картиночными названиями), впечатления самые положительные  :yep:

Ставишь в хтмл-низ. И не забудь поменять ссылки на картинки кнопок "закрыто/открыто" (рекомендовал бы поставить прозрачные полоски, как у меня были, но не знаю, как они себя поведут с картинкой-названием
Код:
<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>

+2

10

Millafan
У меня есть и сворачивание, и форумы в 2 столбца, и картинки в форумы вставлять могу без проблем.
Если для категорий ширина в 1200, попробуйте для форумов сделать не 600, а меньше.

+1

11

Millafan написал(а):

Да, каждый форум своей картинкой (хотя по типу они все будут одинаковые - высота 100пкс, ширина 1200пкс для категорий и 600пкс для форумов, если удастся сделать их в два столбца).

Сделайте скриншот "что хочу", уберите предыдущие скрипты, чтобы был форум как до этого, и киньте ссылку на форум, но чтобы было видно из под гостя.. Попробую сделать, что вы хотите..

+3

12

Millafan
Возможно экономичнее по длине на главной сделать меньше категорий, а вместо мелкой категории делать форум с подфорумами - кратко на главной и полным отображением по ссылке на основной форум

Отредактировано Deff (Чт, 14 Июл 2022 18:28:22)

+3

13

Pasteur
Mirra Bell
kolobdur74
Deff
Ребята, спасибо, что откликнулись :flag:
Я эту ночку посижу, поколдую, чтобы ничего не упустить, а завтра где-то до обеда выложу перечень проблем  :yep:

0

14

Спасибо Pasteur за помощь в составлении макетов для ТЗ.
Адрес форума -

Это исходное состояние форума. Из хтмл-верх и хтмл-низ убраны АБСОЛЮТНО ВСЕ коды.
Первые три категории доступны для чтения всем (по умолчанию), четвёртая категория (p a r l o r) открыта временно, - в норме будет видна только админам
Здесь отмечены все элементы, которые необходимо удалить с главной страницы (в общем-то и с других тоже, там, где эти элементы вылазят.
Из скриптов, меняющих архитектуру форума, планируется задействовать "Сворачивание категорий" и "Форумы в 2 столбца"
И, наконец, макеты главной страницы форума, когда заголовки категорий и форумов заменены картинками

Инфа не в тему: тестирую сейчас Betternet в Хромиуме, похоже, он обошел iTopVPN по скорости и стабильности

Отредактировано Millafan (Пт, 15 Июл 2022 14:17:05)

+2

15

Millafan, насчёт тотальной зачистки хтмл верх/низ - это ты погорячился :D
Скрипты Deff и kolobdur74 можешь смело вставлять обратно: они никогда ни с чем не конфликтуют, поскольку написаны грамотно  :cool:   


А то, что притырил картинки под хайды - одобряю, сам такой  :yep:

Отредактировано Pasteur (Пт, 15 Июл 2022 14:50:41)

0

16

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>

+4

17

Вчера 17:09:01
kolobdur74,
все замечательно  :cool:  Подробно отвечу завтра, щас уже выключат свет (ремонтируют)  :flag:

Отредактировано Millafan (Сб, 16 Июл 2022 18:46:04)

0

18

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>

Использованы для наглядности для всех категорий и форумов картинки с первой категории и ее форумов.

+2

19

kolobdur74
Пока наш фанат Милки-Йо сидит в какой-то глухомани без света и интернета (я б не выжил :tired: ), решил примерить твой блок кодов у себя на тестовике. И знаешь, тоже подпишусь на это дело, ибо зело удобная конструкция получилась для экспонирования картиночного массива  :yep: (у меня ведь тоже есть накопительный форум "киношной" направленности, не всё же время учебными проектами заниматься  ;)  )
Вооот. А как примерил, сразу заметил, что Миллафан кое-что не учёл в ТЗ: стартовая страница гостя с одной кнопкой входа/выхода - это нормально, но когда уже входишь как админ, там же на главной должна появляться ещё и кнопка доступа в админку, без неё никак  :nope:
Второй моментик, который я бы скорректировал: ширина панорамы или коллажа для замены названия категории - 1200рх, а для форума - 600рх. Вроде, оно и нормально смотрится на главной, когда форумы идут в 2 столбца, НО при заглублении в категорию и переходе на какой-то отдельный форум, его название-картинка занимает всего половину зарезервированной ширины, - не очень эстетично. Может, картинки для названий форумов сделать такими же, как для категорий - 1200рх? - На главной странице они автоматически обрежутся по правому краю до нужных 600рх, а когда заходишь на форум, займут по ширине всё отведённое для них верхнее поле страницы этого форума (на странице конкретной темы, по-моему, те же стандарты).
И третья настройка, которая у меня не применима: заданная ширина форума (а значит, и картинок). У Миллафана на ноуте (или планшете?) вероятно установлено разрешение 1280 на 1024 (или на 960), а я уже маленько подслеповат, поэтому все делишки делаю и все настройки затачиваю под fullHD, то бишь, мои панорамные картинки будут почти по 2 тыщи пикселей в ширину  :O  Думаю, ничего в кодах под этот габарит менять не придётся, - тупо воткну нужные по ширине, и оно всё впишется.

Затравка ))

...А насчёт кнопок "вход/выход" и "админка", которые при любом раскладе будут неприкаянно торчать на своём пустом поле, как мухи на заборе, у меня есть полуфантастическая идея...  :rolleyes:  - Ближе к финалу я подробно опишу это " :glasses: KnowWhatButDontKnowHow :dontknow: "

0

20

Pasteur написал(а):

стартовая страница гостя с одной кнопкой входа/выхода - это нормально, но когда уже входишь как админ, там же на главной должна появляться ещё и кнопка доступа в админку, без неё никак  :nope:

Желательно под нее иконку или значок..

Pasteur написал(а):

Второй моментик, который я бы скорректировал: ширина панорамы или коллажа для замены названия категории - 1200рх, а для форума - 600рх. Вроде, оно и нормально смотрится на главной, когда форумы идут в 2 столбца, НО при заглублении в категорию и переходе на какой-то отдельный форум, его название-картинка занимает всего половину зарезервированной ширины, - не очень эстетично. Может, картинки для названий форумов сделать такими же, как для категорий - 1200рх? - На главной странице они автоматически обрежутся по правому краю до нужных 600рх, а когда заходишь на форум, займут по ширине всё отведённое для них верхнее поле страницы этого форума (на странице конкретной темы, по-моему, те же стандарты).

Нужна картинка в 1200px..

Pasteur написал(а):

И третья настройка, которая у меня не применима: заданная ширина форума (а значит, и картинок). У Миллафана на ноуте (или планшете?) вероятно установлено разрешение 1280 на 1024 (или на 960), а я уже маленько подслеповат, поэтому все делишки делаю и все настройки затачиваю под fullHD, то бишь, мои панорамные картинки будут почти по 2 тыщи пикселей в ширину  :O  Думаю, ничего в кодах под этот габарит менять не придётся, - тупо воткну нужные по ширине, и оно всё впишется.

Форум я сделал по ширине шапки, исходя из того стандартного диза, что у него был предустановлен - он у него резиновый и для переделки удобный.. Если ты используешь тот же стандартный дизайн, то поставить можно любую нужную ширину, главное, чтобы картинки тоже были такой же ширины..

0


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Переоформление форума в структурированную галерею