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

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

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


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


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

Сообщений 21 страница 40 из 49

21

kolobdur74, касательно кнопок "вход/выход" и "админка" на моём форуме, - тут вопрос сложный (читай "Затравка"), я по этому поводу отпишусь или в личку или под глубоким хайдом, как тебе будет удобнее. Видишь ли, идея с супер-пупер-кнопками созрела у меня давно, но чтобы понятно её изложить, потребуется отшень многа букафф и картинкофф  :dontknow:
Что до кнопок в проекте нашего ушедшего в оффлайн собеседника, то, наверное, достаточно просто вставить кнопку админки в виде кружочка другого цвета, - он же всё равно собирался их заменять на свои значки  :yep:

По "форумам в два столбца" я понял так: втисну в код адресА картинок шириной во всю страницу (как для категорий), и ладушки: на главной они автоматически подрежутся под половинную ширину, а на своих страницах развернутся полностью. В общем, если код не надо менять, то это зае... хорошо   ;) 

По части адаптации этого симпатичного блока кодов к нуждам моего "киношного" проекта, насколько я понял, тоже проблем быть не должно: там установлен скин "Ахтунг" (ну, как на тестовике "Полигон"), он вроде тоже резиновый...  В общем, попробую, попримеряю, авось сходу и получится. Может, ещё и Миллафана обгоню, пока он в "отключке"  :D

0

22

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

касательно кнопок "вход/выход" и "админка" на моём форуме, - тут вопрос сложный (читай "Затравка"), я по этому поводу отпишусь или в личку или под глубоким хайдом, как тебе будет удобнее. Видишь ли, идея с супер-пупер-кнопками созрела у меня давно, но чтобы понятно её изложить, потребуется отшень многа букафф и картинкофф

Ну, кинь в ЛС..

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

По "форумам в два столбца" я понял так: втисну в код адресА картинок шириной во всю страницу (как для категорий), и ладушки: на главной они автоматически подрежутся под половинную ширину, а на своих страницах развернутся полностью. В общем, если код не надо менять, то это зае... хорошо

Ну, на странице форумов там темы идут, но я поправил код, добавил админку (мне посмотреть негде, так что нужны скриншоты как стало), и сделал фон для форумов размножающимся, так что если ширины картинки не хватит, она все равно заполнит пространство:

Код
Код:
<style>
/* Убираем лишнее */
#pun-title .title-logo, #pun-navlinks li:not(#navadmin):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;}
#navadmin a, #navlogin a, #navlogout a {
  display: block;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
#navadmin a {background: purple;}
#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);}

/* Форум 1 */
#forum_f1 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 11 */
#forum_f11 {background: url(https://i.imgur.com/L44EkIc.jpg);}

/* -------------------------------------------------------------------------- */

/* Категория 2 */
#pun-category2 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}

/* Форум 2 */
#forum_f2 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 14 */
#forum_f14 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 13 */
#forum_f13 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 12 */
#forum_f12 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* --------------------------------------------------------------------------- */

/* Категория 3 */
#pun-category3 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}

/* Форум 19 */
#forum_f19 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 3 */
#forum_f3 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 17 */
#forum_f17 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 15 */
#forum_f15 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 18 */
#forum_f18 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* Форум 16 */
#forum_f16 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* --------------------------------------------------------------------------- */

/* Категория 4 */
#pun-category4 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}

/* Форум 20 */
#forum_f20 {background: url(https://i.imgur.com/VonPyqd.jpg);}

/* --------------------------------------------------------------------------- */

/* Повторяем картинку категории (no-repeat - отключено повторение) */
#pun-main [id*=pun-category] h2 {background-repeat: no-repeat;}

/* Повторяем картинку форума (no-repeat - отключено повторение) */
#pun-main [id*=forum] {background-repeat: repeat-x;}
</style>

Millafan, вы тоже обновите на этот код..

P.S. Посты по этой теме перенесу чуть позже в свежесозданную тему.. А то это больше по дизайну, да и может кому еще будет интересно.. Когда перенесу Millafan, Pasteur пишите там..

P.P.S. Если кому будет интересно, изменяемый стиль: Lisa..

+2

23

https://s5.uploads.ru/3acP0.gif Отдельная тема - это есть зер гут.

А по блоку кодов я ж ещё что хотел уточнить: сворачивание категорий там никак не вписывается? А то было бы очень так недурственно, - на главной 4-6 картинок-названий, не больше, когда раскрываешь категорию, там добавляется пускай ещё 4-6, и всё (никто ж не будет без толку разворачивать все категории сразу!.. а кто будет, сам виноват, что комп подвиснет  :D )

голимый оффтоп

Отредактировано Pasteur (Пн, 18 Июл 2022 18:00:32)

0

24

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

А по блоку кодов я ж ещё что хотел уточнить: сворачивание категорий там никак не вписывается? А то было бы очень так недурственно, - на главной 4-6 картинок-названий, не больше, когда раскрываешь категорию, там добавляется пускай ещё 4-6, и всё (никто ж не будет без толку разворачивать все категории сразу!.. а кто будет, сам виноват, что комп подвиснет  :D )

Ну, поставь скрипт сворачивания категорий, проверь.. В теории не должны быть конфликты..

+1

25

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

Ну, поставь скрипт сворачивания категорий, проверь.. В теории не должны быть конфликты..

:dontknow: Не смог потестировать. Сначала поставил обновлённый блок кодов от 18.07, - получилась лажа, которую я списал на то, что затачивалось всё под другой форум/домен/скин.

Посидел, поискал, чего там можно адаптировать: изменил размеры на свои и поменял id форумов на актуальные...
Код:
<style>/* Убираем лишнее */
#pun-title .title-logo, #pun-navlinks li:not(#navadmin)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: 1900px;
  float: none;
  margin: 0 auto;
}
 
/* Высота шапки */
#pun-title {height: 208px;}
 
/* Настраиваем меню */
#pun-navlinks li {float: right;}
#navadmin a, #navlogin a, #navlogout a {
  display: block;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
#navadmin a {background: purple;}
#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: 1900px;
  height: 100px;
}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 1 */
#pun-category1 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 11 */
#forum_f1 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 12 */
#forum_f11 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}

/* Форум 13 */
#forum_f1 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 14 */
#forum_f11 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* -------------------------------------------------------------------------- */
 
/* Категория 2 */
#pun-category2 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 2 */
#forum_f2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 9 */
#forum_f14 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* Форум 15 */
#forum_f13 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 16 */
#forum_f12 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 3 */
#pun-category3 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 4 */
#forum_f19 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 5*/
#forum_f3 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* Форум 7 */
#forum_f17 {background: url(hhttps://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 8 */
#forum_f15 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 

/* --------------------------------------------------------------------------- */
 
/* Категория 4 */
#pun-category4 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 3 */
#forum_f20 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}

/* Форум 10 */
#forum_f15 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Повторяем картинку категории (no-repeat - отключено повторение) */
#pun-main [id*=pun-category] h2 {background-repeat: no-repeat;}
 
/* Повторяем картинку форума (no-repeat - отключено повторение) */
#pun-main [id*=forum] {background-repeat: repeat-x;}
</style>

0

26

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

Вывод напрашивается неутешительный: на этом домене/сервисе в сравнении с тем, где находится форум Миллафана, не прописаны какие-то скрипты и не прикручены какие-то важные моды, в результате чего тот блок кодов, что мне так понравился, не работает должным образом  :dontknow:  Нет, конечно, я там мог что-то нaxepaчить со своими коррективами, но не настолько же!

В моем коде была ошибка (поправил его), попробуй такой вариант, я и ссылку поправил, а то ты на нее ширину форума поставил:

Код
Код:
<style>/* Убираем лишнее */
#pun-title .title-logo, #pun-navlinks li:not(#navadmin):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: 1900px;
  float: none;
  margin: 0 auto;
}
 
/* Высота шапки */
#pun-title {height: 208px;}
 
/* Настраиваем меню */
#pun-navlinks li {float: right;}
#navadmin a, #navlogin a, #navlogout a {
  display: block;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
#navadmin a {background: purple;}
#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: 900px;
  height: 100px;
}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 1 */
#pun-category1 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 11 */
#forum_f1 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 12 */
#forum_f11 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}

/* Форум 13 */
#forum_f1 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 14 */
#forum_f11 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* -------------------------------------------------------------------------- */
 
/* Категория 2 */
#pun-category2 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 2 */
#forum_f2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 9 */
#forum_f14 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* Форум 15 */
#forum_f13 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 16 */
#forum_f12 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 3 */
#pun-category3 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 4 */
#forum_f19 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 5*/
#forum_f3 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* Форум 7 */
#forum_f17 {background: url(hhttps://forumupload.ru/uploads/0012/24/d4/2/710901.png);}
 
/* Форум 8 */
#forum_f15 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 

/* --------------------------------------------------------------------------- */
 
/* Категория 4 */
#pun-category4 h2 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/268380.png);}
 
/* Форум 3 */
#forum_f20 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/710901.png);}

/* Форум 10 */
#forum_f15 {background: url(https://forumupload.ru/uploads/0012/24/d4/2/931934.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Повторяем картинку категории (no-repeat - отключено повторение) */
#pun-main [id*=pun-category] h2 {background-repeat: no-repeat;}
 
/* Повторяем картинку форума (no-repeat - отключено повторение) */
#pun-main [id*=forum] {background-repeat: repeat-x;}
</style>

+1

27

Ага. в общем, тестирую вовсю  :yep:
Кое-что уже наметилось на корректировку, но, чтобы лишний раз не дёргаться, я, пожалуй, дожму, что смогу, и к "после обеда" выложу подробный отчёт со скриншотами и макетами.

Да, и если Миллафан прорежется не в теме, а в личке, подскажи ему, чтоб оставил в доступе (здесь или у себя на форуме) те блоки кодов, что у него в хтмл-верх (актуальные!) - Уж больно хочется такую же конфетку слепить  :rolleyes:

0

28

Ну, в общем, перетестировал все возможные  варианты этого кода (менял габариты форума, скины, размеры картинок, даже зачем-то форумы тасовал по категориям, заменяя id на актуальные). Кое-где даже выявил виновников тех или иных траблов  :glasses:

Если заглянешь на форум, то результат виден, но я ещё и отчётик под хайдом задвину, как и обещал.
Этот блок кодов стоит у меня в хтмл-верх после всех изменений, дополнений, откатов и т.д. Мало ли, мабуть сверить надо. Хтмл-низ по примеру М-фана очистил полностью, чтоб не отвлекал и не конфликтовал.
Код:
<style>/* Убираем лишнее */
#pun-title .title-logo, #pun-navlinks li:not(#navadmin):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: 1900px;
  float: none;
  margin: 0 auto;
}
 
/* Высота шапки */
#pun-title {height: 208px;}
 
/* Настраиваем меню */
#pun-navlinks li {float: right;}
#navadmin a, #navlogin a, #navlogout a {
  display: block;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
#navadmin a {background: purple;}
#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: 1900px;
  height: 100px;
}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 1 */
#pun-category1 h2 {background: url(https://i.imgur.com/3C2ChS2.png);}
 
/* Форум 11 */
#forum_f1 {background: url(https://i.imgur.com/AvcrSIh.png);}
 
/* Форум 12 */
#forum_f11 {background: url(https://i.imgur.com/XYEPUJV.png);}
 
/* Форум 13 */
#forum_f1 {background: url(https://i.imgur.com/AvcrSIh.png);}
 
/* Форум 14 */
#forum_f11 {background: url(https://i.imgur.com/XYEPUJV.png);}
 
/* -------------------------------------------------------------------------- */
 
/* Категория 2 */
#pun-category2 h2 {background: url(https://i.imgur.com/3C2ChS2.png);}
 
/* Форум 2 */
#forum_f2 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 9 */
#forum_f14 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* Форум 15 */
#forum_f13 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 16 */
#forum_f12 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 3 */
#pun-category3 h2 {background: url(https://i.imgur.com/3C2ChS2.png);}
 
/* Форум 4 */
#forum_f19 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 5*/
#forum_f3 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* Форум 7 */
#forum_f17 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 8 */
#forum_f15 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
 
/* --------------------------------------------------------------------------- */
 
/* Категория 4 */
#pun-category4 h2 {background: url(https://i.imgur.com/3C2ChS2.png);}
 
/* Форум 3 */
#forum_f20 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 10 */
#forum_f15 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Повторяем картинку категории (no-repeat - отключено повторение) */
#pun-main [id*=pun-category] h2 {background-repeat: no-repeat;}
 
/* Повторяем картинку форума (no-repeat - отключено повторение) */
#pun-main [id*=forum] {background-repeat: repeat-x;}
</style>
А вот туточки – моя хрюфстальная мечта  :rolleyes:

Фсё пока. Убегаю на дежурство  :flag:

0

29

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

2) форумы в два столбца ставятся некорректно. Возможно, если сам форум не будет растягиваться в ширину на два экрана, то этот дефект пропадёт автоматически;

Ты ставишь:

/* Настраиваем форумы */
#pun-index .tcl h3 a {
  display: block;
  width: 1900px;
  height: 100px;
}

Это ссылки, которые выставлены по ширине названий форумов, ты ставишь их по ширине всего форума и конечно его распирает.. Я же тебе выставил в 900px, зачем обратно поставил 1900? Соответственно в идеале ширина картинки должна быть по ширине этих форумов..

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

3) картинки форумов  распределяются не по id, как прописано в хтмл-верх, а рандомно и к тому же кучками, а не парами, как в текстовом варианте заголовков.

Не рандомно, а так, как стоят у тебя форумы.. Вот как они реально стоят:
https://i.imgur.com/R7qXyRrm.png

0

30

Погодь-погодь, чо-то я совсем запутался…  %-)

Весь этот форум со скином Кобальт – он ваще «РЕЗИНОВЫЙ» или нет? По моему опыту «резиновые» форумы пропорционально ужимаются/растягиваются по ширине экрана, так? А этот мой гадёныш торчит упорно в своих каких-то габаритах и растягивает, cцукo, экран вместо того, чтобы подгонять свои размеры под конкретные запросы браузера! Может, там в блоке кодов убрать жёсткую ширину 1900рх, а вписать какие-нибудь абстрактные 100%? (не знаю, как это при вёрстке записывается, - я это предложил по аналогии с заданной шириной таблицы в посте – типа «[table layout=fixed width=100%]»)

...а по форумам прокатит такая же гибкая установка ширины? Если да, то надо будет менять концепцию картинок для форумов…
Теперь по id форумов. У меня тут случился глубокий когнитивный диссонанс (проще говоря, мозги переклинило)

Крыша уже едет, а дело всё не движется  :dontknow:

0

31

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

Погодь-погодь, чо-то я совсем запутался…  %-)

Весь этот форум со скином Кобальт – он ваще «РЕЗИНОВЫЙ» или нет?

Он у тебя резиновый:

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  }

Ты сделал правку в мой код по ширине форума, и теперь он у тебя:

/* Выставляем ширину форума */
.punbb {
  width: 1900px;
  float: none;
  margin: 0 auto;
}

Это всё правильно, а дальше ты ширину форумов, которые в две колонки в категориях выставляешь так же в 1900px:

/* Настраиваем форумы */
#pun-index .tcl h3 a {
  display: block;
  width: 1900px;
  height: 100px;
}

Соответственно у тебя две колонки по 1900px, то бишь растягивается форум до ширины 3800px.. Я тебе и говорю, последнее значение замени на 900px..

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

Сейчас у меня какая схема в мозгу: вот есть картинки-названия конкретных форумов, они шириной во весь экран и на своих страницах («открытый форум», «открытая тема») так во всю ширину и показываются. А вот на главной странице, где названия форумов идут в два столбца, эти широкие картинки тупо автоматом обрезаются справа аж на половину их ширины (без масштабирования!)

Ты сейчас пляшешь от неправильной установки в 1900px, поправь код и всё станет на место как и должно быть..

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

Теперь по id форумов. У меня тут случился глубокий когнитивный диссонанс (проще говоря, мозги переклинило)

Вот скриншот, я подписал ID форумов первых двух категорий и посмотри как они располагаются в НТМЛ, и я специально вынес вторую колонку - она за пределом ширины форума из-за того, что ты в них выставил 1900px:
https://i.imgur.com/LCu3rJCl.png

+2

32

Привет, всем участникам беседы !  :flag:

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

Millafan, вы тоже обновите на этот код..

P.S. Посты по этой теме перенесу чуть позже в свежесозданную тему.. А то это больше по дизайну, да и может кому еще будет интересно.. Когда перенесу Millafan, Pasteur пишите там..

Тему нашел не сразу, но нашел. Идея классная, не будет "левых" постов, отвлекающих от основной тематики.
kolobdur74, спасибо за оттюнингованный блок кодов. Реально круто  :cool:  Только одно пожелание насчет кнопок есть: сместить их к правому краю вплотную и поменять местами - вход/выход будет крайняя справа, а админка - чуть ближе к центру.

И картинки для них нашел
Pasteur написал(а):

Может, ещё и Миллафана обгоню, пока он в "отключке"  :D

Ну-ну!  :D Отключка у меня еще не кончилась (заехал в город с оказией на полдня, чтоб помыться хоть , а к вечеру снова линяю в свое захолустье без света/интернета и воды, но с кучей комаров и романтики). Зато главная страница уже практически готова! - доделаю коллажи на картинки-названия и вперед, к следующим рубежам (внутренним страницам форума) :rolleyes:
И, кстати, сбрось мне в личку то, что у тебя под хайдами, - интересно же, какие проблемы могут возникнуть там, где у меня вапсче ВСЁ прошло без сучка без задоринки (еще раз спасибо kolobdur74). И тот код сворачивания категорий, который ты послал, тоже встал на место (с прозрачными кнопками!) и ни с чем не конфликтует.


Тема про "резиновый" дизайн меня тоже заинтересовала  :yep:  Это в поездках я с планшетом играюсь, а дома-то стационарный ящик стоит с монитором 27 дюймов (2560 x 1440 - не его, конечно разрешение, но держит), и "резиновая" идея меня очень даже заводит  :yep: Жалко, сегодня не успеваю потестировать на большом экране (сосед, на таратайке которого мы приехали и, соответственно, бум возвращаться, уже дохлюпывает чаек и скоро даст команду "по коням!").
Pasteur , не забудь, ты мне обещал макеты и по следующим страницам форума (такие же симпатичные и понятные, как по главной)
Где-то через недельку опять вклинюсь в беседу, может, работа уже подойдёт к финалу. Но не будем загадывать  ;)
Пока, мужики  :flag:

0

33

О, пропажа объявилась... и снова пропала  :D Millafan, подробно отвечу тебе в ЛС и захайденные материалы тоже скину. Но ты ж всё равно без интернета сидишь  :dontknow: - впрочем, не суть: как будешь онлайн, всё и найдёшь  :flag:
================================
Так, теперь по делу.
kolobdur74, я убрал из блока код "* Выставляем ширину форума *", и какая-то резиновость появилась. Странноватая, правда (описывать долго, если зайдёшь, увидишь) В полной мере отработать сегодняшнюю тестовую программу не получится, меня, блин, обрадовали, что опять заступаю в ночь на замену! (и кто придумал эти мобилы?! Вот раньше помню: ушёл человек на выходной - и всё, досвидос, пишите письма... А щас!..  :angry: Из любой дыры достанут. Отключил бы этот бесовски гаджет, но низя, - особо предупредили, чтоб не хитрожопил... ну, не меня персонально,- всех сотрудников  :sceptic: ) В общем завтра с чугунной головой сяду клепать форумные заголовки половинного размера.

А вот всё-таки нет пока у меня ясности относительно того, как поведут себя картинки-заголовки форумов, расположенных в два столбца: Будут масштабироваться, заполняя всё отведённое место? обрежутся, если его не хватает? оставят справа пустое место, если столбцы будут чересчур широкие?

Ну, поживём - увидим  :glasses:

+1

34

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

Только одно пожелание насчет кнопок есть: сместить их к правому краю вплотную и поменять местами - вход/выход будет крайняя справа, а админка - чуть ближе к центру.

Сделаю на выходных..

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

Тема про "резиновый" дизайн меня тоже заинтересовала  :yep:  Это в поездках я с планшетом играюсь, а дома-то стационарный ящик стоит с монитором 27 дюймов (2560 x 1440 - не его, конечно разрешение, но держит), и "резиновая" идея меня очень даже заводит

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

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

я убрал из блока код "* Выставляем ширину форума *", и какая-то резиновость появилась.

Зачем? Я форум специально сделал фиксированным.. Так ты резиновость никак не сделаешь..

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

А вот всё-таки нет пока у меня ясности относительно того, как поведут себя картинки-заголовки форумов, расположенных в два столбца: Будут масштабироваться, заполняя всё отведённое место? обрежутся, если его не хватает? оставят справа пустое место, если столбцы будут чересчур широкие?

Будут, если ты не будешь ломать мой код, и если будут соответствовать заданной ширине..

+1

35

kolobdur74
Ломать код?!  :O  Да ты шо! - я его боюсь https://i.imgur.com/kpFFjaI.png А фрагментик убрал только потому, что показалось, ты рекомендовал для "резиновых" свойств не сбивать настройку "100%" и не ставить себя в жёсткие рамки, иначе не влезут форумные картинки... Вот как-то так  :dontknow:  Сейчас код восстановлен в исходном виде  :yep:

Щас попытаюсь разобраться с id форумов, об успехах/неуспехах доложу.


Добавлено спустя 2 часа 54 минуты 53 секунды:


Первое, что выяснил методом подбора: разрешение экрана и реальные габариты форума на этом экране - две большие разницы  :dontknow:  Может, кто-то и в курсе, а я вот только сегодня сопоставил эти параметры. Короче, ширина форума, которую я вижу, почти на полтыщи пикселей меньше выставленной в настройках экрана, - всего 1440. А когда снимаю скриншот форума - он опять 1900! Не понятно. А главное - абыдна, да! - столько мучился, а эта ж0пa оказалась совсем рядом, - как только выставил "правильные" значения размеров категорий и форумов (и картинки под них), всё сложилось в аккуратную конфетку, как у Миллафана. Ну, и ай-дишки форумов поправил, конечно.

Приятное открытие - картинки форумов не масштабируемые, а "размножаемо-обрезаемые", то бишь, ежели чересчур короткая, то достроится повтором, а излишки обрежет, ежели сразу слишком широкая, то сразу и обрежется. Короче, то шо надо.

Остались непонятки, как будет смотреться форум на других экранах - с б0льшим разрешением и с меньшим  :dontknow:  Хотелось бы, чтоб масштабировался, как ЕФП или мой тестовик, но, боюсь, он прибит намертво к параметрам моего экрана... Есть соображения, как его и в этом аспекте "обрезинить"?

Да, ещё забыл доложить: сворачивалка категорий работает, это дополнительный плюс  :yep:

Ну, в общем, как утрясём до конца вопрос с "резиновостью" (да - да, нет - нет), можно переходить к модернизации внутренних страниц форума  :rolleyes:

Отредактировано Pasteur (Сб, 23 Июл 2022 15:14:14)

0

36

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

Приятное открытие - картинки форумов не масштабируемые, а "размножаемо-обрезаемые", то бишь, ежели чересчур короткая, то достроится повтором, а излишки обрежет, ежели сразу слишком широкая, то сразу и обрежется. Короче, то шо надо.

Ну, да, я же по твоей просьбе сделал))

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

Остались непонятки, как будет смотреться форум на других экранах - с б0льшим разрешением и с меньшим  :dontknow:  Хотелось бы, чтоб масштабировался, как ЕФП или мой тестовик, но, боюсь, он прибит намертво к параметрам моего экрана... Есть соображения, как его и в этом аспекте "обрезинить"?

Подумаю над резиновым вариантом..

+1

37

Millafan, сделал резиновым форум, поменял местами вход и админку, и вставил картинки на меню..

Вот код:

Код
Код:
<style>
/* Убираем лишнее */
#pun-title .title-logo, #pun-navlinks li:not(#navadmin):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 {
  float: none;
  margin: 0 auto;
}

/* Высота шапки */
#pun-title {height: 350px;}
 
/* Настраиваем меню */
#pun-navlinks .container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 0;
}
#navadmin a, #navlogin a, #navlogout a {
  display: block;
  border-radius: 20px;
  width: 30px;
  height: 30px;
}
#pun-navlinks #navlogin, #pun-navlinks #navlogout {padding-right: 0;}
#navadmin a {background: url(https://i.imgur.com/FQdzfhp.png) no-repeat;}
#navlogin a {background: url(https://i.imgur.com/ChOCTDX.png) no-repeat;}
#navlogout a {background: url(https://i.imgur.com/oDrZFv0.png) no-repeat;}
 
/* В две колонки */
#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: 100%;
  height: 100px;
}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 1 */
#pun-category1 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}
 
/* Форум 1 */
#forum_f1 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 11 */
#forum_f11 {background: url(https://i.imgur.com/L44EkIc.jpg);}
 
/* -------------------------------------------------------------------------- */
 
/* Категория 2 */
#pun-category2 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}
 
/* Форум 2 */
#forum_f2 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 14 */
#forum_f14 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 13 */
#forum_f13 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 12 */
#forum_f12 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 3 */
#pun-category3 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}
 
/* Форум 19 */
#forum_f19 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 3 */
#forum_f3 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 17 */
#forum_f17 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 15 */
#forum_f15 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 18 */
#forum_f18 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* Форум 16 */
#forum_f16 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 4 */
#pun-category4 h2 {background: url(https://i.imgur.com/gzz4iyh.jpg);}
 
/* Форум 20 */
#forum_f20 {background: url(https://i.imgur.com/VonPyqd.jpg);}
 
/* --------------------------------------------------------------------------- */
 
/* Повторяем картинку категории (no-repeat - отключено повторение) */
#pun-main [id*=pun-category] h2 {background-repeat: repeat-x;}
 
/* Повторяем картинку форума (no-repeat - отключено повторение) */
#pun-main [id*=forum] {background-repeat: repeat-x;}
</style>

Pasteur, твои хотелки тоже сделал - форум резиновый по ширине, картинки заполняют ширину.. Так же в категории картинки заполняют всю ширину повторением, как и форумы.. Сделал под твой форум, ID форумов можешь не менять:

Код
Код:
<style>
/* Убираем лишнее */
#pun-title .title-logo, #pun-navlinks li:not(#navadmin):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 {
  float: none;
  margin: 0 auto;
}

/* Высота шапки */
#pun-title {height: 350px;}
 
/* Настраиваем меню */
#pun-navlinks .container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 0;
}
#navadmin a, #navlogin a, #navlogout a {
  display: block;
  border-radius: 20px;
  width: 30px;
  height: 30px;
}
#pun-navlinks #navlogin, #pun-navlinks #navlogout {padding-right: 0;}
#navadmin a {background: url(https://i.imgur.com/FQdzfhp.png) no-repeat;}
#navlogin a {background: url(https://i.imgur.com/ChOCTDX.png) no-repeat;}
#navlogout a {background: url(https://i.imgur.com/oDrZFv0.png) no-repeat;}
 
/* В две колонки */
#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: 100%;
  height: 100px;
}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 1 */
#pun-category1 h2 {background: url(https://i.imgur.com/aj33Es4.png);}
 
/* Форум 11 */
#forum_f11 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 12 */
#forum_f12 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* Форум 13 */
#forum_f13 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 14 */
#forum_f14 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* -------------------------------------------------------------------------- */
 
/* Категория 2 */
#pun-category2 h2 {background: url(https://i.imgur.com/aj33Es4.png);}

/* Форум 2 */
#forum_f2 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 9 */
#forum_f9 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* Форум 15 */
#forum_f15 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 16 */
#forum_f16 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Категория 3 */
#pun-category3 h2 {background: url(https://i.imgur.com/aj33Es4.png);}
 
/* Форум 4 */
#forum_f4 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 5*/
#forum_f5 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
/* Форум 7 */
#forum_f7 {background: url(https://i.imgur.com/FZrRoXv.png);}
 
/* Форум 8 */
#forum_f8 {background: url(https://i.imgur.com/YYkAZZM.png);}
 
 
/* --------------------------------------------------------------------------- */
 
/* Категория 4 */
#pun-category4 h2 {background: url(https://i.imgur.com/aj33Es4.png);}
 
/* Форум 3 */
#forum_f3 {background: url(https://i.imgur.com/H9Dqp11.png);}
 
/* Форум 10 */
#forum_f10 {background: url(https://i.imgur.com/z2lsHjJ.png);}
 
/* --------------------------------------------------------------------------- */
 
/* Повторяем картинку категории (no-repeat - отключено повторение) */
#pun-main [id*=pun-category] h2 {background-repeat: repeat-x;}
 
/* Повторяем картинку форума (no-repeat - отключено повторение) */
#pun-main [id*=forum] {background-repeat: repeat-x;}
</style>

+3

38

kolobdur74, тут моя первая реакция на новость  :D

А это когда уже чуток успокоился  ;)

(Про следующие странички форума распишу ближе к вечеру  :yep: )

+2

39

И полсуток не прошло, а я уже снова, как огурчик (малосольный слегка, но бодрый до хруста)  :D  Вот много ли для счастья надо? - Всего-то выдрыхнуться хоть раз в неделю  :rolleyes:

Страница какого-то конкретного форума (на примере самого нижнего в админке). Это то, что мы имеем на данный момент и пометки, чего надо менять/перемещать/убирать.
А тут - многа-многа букафф в качестве комментариев к верхней и нижней картинкам (и отчасти даже к будущей картинке-макету, которую уже начал собирать из кусочков)
А вот тут - та же страница после всех модификаций (идеальный вариант... но что-то, может, придётся корректировать по причине невыполнимости задачи)

0

40

Pasteur, кинь картинки хотя бы для трех тем, чтобы я мог видеть как оно будет выглядеть..

0


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