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

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

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


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65) #2


Общие вопросы по оформлению (65) #2

Сообщений 1601 страница 1620 из 1682

Перевести1

В этой теме просим помощи в оформлении форума и его элементов

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

Вопросы по скриптам и их работоспособности, просьба, задавать в теме Запросы по скриптам #11
Вы новичок и не разбираетесь во всём этом? Загляните в наш справочный раздел. Возможно, там уже содержится ответ на ваш вопрос. Или задайте свой вопрос в теме Общие вопросы от новичков (63) #3

Важная информация перед тем, как задать вопрос:

  • Ответы дают другие участники форума по собственному желанию.

  • Администрация не может гарантировать моментальное решение или абсолютную корректность каждого ответа.

  • Пожалуйста, уважайте чужое время и усилия других пользователей, старайтесь писать грамотно и доходчиво.

  • Будьте взаимовежливы: Грубое или требовательное отношение к участникам форума неприемлемо и может привести к отказу в помощи на всём форуме.

  • Все вопросы, не касающиеся оформления, будут удаляться!

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

  • Укажите ссылку на форум: Ссылка на форум, с которым требуется помочь, позволит нам увидеть, понять контекст проблемы и предложить наиболее точное решение, не тратя время на догадки.

  • Опишите желаемый результат: Четко и конкретно объясните, чего вы хотите добиться. Например: "Мне нужно, чтобы картинка шапки была во всю ширину блока", или "Хочу увеличить размер шрифта в названиях тем". Чем детальнее вы опишете, тем проще будет помочь.

  • Сделайте скриншот и выделите элемент: Помогающему необходимо понимать с чем ему предстоит вам помочь. Укажите ссылки на схожее оформление (если вы где-то видели подобное). Это не обязательно, но значительно упростит задачу.

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

Инструменты для поиска и редактирования стиля (скриптов).

Как с помощью браузера можно определить элемент дизайна.

Каталог скриптов/CSS

Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.

Типовые Вопросы (ЧаВо)

Ответы на часто задаваемые вопросы.

Как задавать вопросы! Разница между стилем и скриптом. ( Советы)

Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

+1

Перевести1601

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

И ещё - как сделать шрифт в сообщениях ярче? Фон сообщений тёмный.

На селектор, отвечающий за текст сообщений, например post-body:

<style>
    .post-body {
  color: #000;          /* Чёрный — самый яркий/контрастный */
  font-weight: 500;     /* Увеличить насыщенность шрифта */
  text-shadow: none;    /* Убрать размытость, если есть */
}
</style>

Но если фон сильно тёмный, то это не поможет, надо менять цвет шрифта на нечёрный.

+1

Перевести1602

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

надо менять цвет шрифта на нечёрный.

Спасибо. Это я и имела в виду. Мне надо его сделать светлей. Вопрос - как и где?

0

Перевести1603

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

Спасибо. Это я и имела в виду. Мне надо его сделать светлей. Вопрос - как и где?

Если в самом комментарии, вот это .post-box

<style>
    .post-box {
  color: red;           
  font-weight: 500;     
  text-shadow: none;     
}
</style>

Поставьте и посмотрите, тексты комментариев должны стать красными:)
Вместо красного - можно поставить светлый цвет шрифта.

Отредактировано Merlin777 (Чт, 30 Окт 2025 15:30:58)

+1

Перевести1604

Спасибо. Куда вставить - HTMLверх или ещё куда?

0

Перевести1605

И что со статусом - можно его опустить под авку?

0

Перевести1606

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

как опустить статус пользователя в профиле под аватарку

Можно  сделать список (.post-author ul)  flex-контейнером с вертикальным расположением. В нём задаём свойство order, чтобы визуально переместить .pa-title сразу после .pa-avatar.

<style>
.post-author ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* По умолчанию все элементы идут в порядке 0 */
.post-author li {
  order: 10; /* отправим всё "вниз" по умолчанию */
}
/* Автор — остаётся первым */
.post-author .pa-author {
  order: 1;
}
/* Аватар — второй */
.post-author .pa-avatar {
  order: 2;
}
/* Статус  — сразу после аватара */
.post-author .pa-title {
  order: 3;
}
/* Остальные элементы — дальше по порядку, располагайте, как вам нужно */
.post-author .pa-reg { order: 4; }
.post-author .pa-posts { order: 5; }
.post-author .pa-respect { order: 6; }
.post-author .pa-positive { order: 7; }
.post-author .pa-last-visit { order: 8; }
</style>

Если нужно, чтобы между ником и аватаром был небольшой зазор (а то ник "лежит" на аватаре), задайте отступы (они задаются от предыдущего элемента в списке).
Это имеет такой вид:

.post-author li { order: 10; }
.post-author .pa-author { order: 1; margin-bottom: 5px; }
.post-author .pa-avatar { order: 2; margin-bottom: 3px; }
.post-author .pa-title  { order: 3; margin-bottom: 3px; }

Используйте margin-bottom на  элементах, где нужен отступ (если это вам нужно, конечно).

Отредактировано Merlin777 (Чт, 30 Окт 2025 15:39:08)

+2

Перевести1607

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

Спасибо. Куда вставить - HTMLверх или ещё куда?

Работает везде, но наверно, идеологически "правильно" будет его куда-нибудь в HTML низ поставить.

+1

Перевести1608

Подставила нужный цвет шрифта сразу. Получилось, спасибо огромное! Стало легче читать.

+1

Перевести1609

А вот в окне сообщений цвет текста не изменился...
В punbb textarea, .punbb select, .punbb input в коде работает. Как оформить?

Отредактировано Санна (Чт, 30 Окт 2025 15:54:09)

0

Перевести1610

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

А вот в окне сообщений цвет текста не изменился...
В punbb textarea, .punbb select, .punbb input в коде работает. Как оформить?

Вы имеете в виду окошко формы ответа, где мы комментарии набираем перед отправкой?

0

Перевести1611

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

Вы имеете в виду окошко формы ответа, где мы комментарии набираем перед отправкой?

Да.

0

Перевести1612

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

Да.

<style>
#main-reply {
  color: #fff;          /* Белый текст */
  background-color: #222; /* Тёмный фон */
}
</style>

+1

Перевести1613

Merlin777, огромное спасибо! :love:

+1

Перевести1614

Технические подробности

Почему во втором случае мы использовали # решётку?

Разница между #main-reply и .main-reply — это разница между идентификатором (ID) и классом (class) в HTML/CSS:

    #main-reply — это селектор по ID.
    Соответствует элементу с атрибутом id="main-reply".

    .main-reply — это селектор по классу.
    Соответствует элементам с атрибутом class="main-reply".
 
Почему именно #main-reply?
Потому что в нашем HTML поле ввода выглядит так:

<textarea id="main-reply" name="req_message" rows="13"></textarea>

Обратите внимание: у него id="main-reply", а не class. Поэтому в CSS и JavaScript к нему обращаются через #main-reply.

Почему разработчики форума использовали id, а не class?

да фиг их знает
Потому что:

✅ На одной странице обычно только одно поле быстрого ответа — оно уникально.
✅ id идеально подходит для уникальных элементов.
✅ Это упрощает выборку в JavaScript: 
   
    document.getElementById('main-reply')
   или
    $('#main-reply') // в jQuery

Можно ли использовать .main-reply?
Можно — но только если добавить этот класс:

<textarea id="main-reply" class="main-reply" name="req_message"></textarea>

Тогда и #main-reply, и .main-reply будут работать. Но по умолчанию — только #main-reply, потому что класса с таким именем у нас нет.

Поэтому #main-reply  - правильный  селектор в данном случае.

Отредактировано Merlin777 (Чт, 30 Окт 2025 16:48:04)

0

Перевести1615

Merlin777
Хотелось бы дополнить: в большинстве случаев стили вставляются в HTML-верх, скрипты в HTML-низ. За редким исключением наоборот (поочередность загрузки).
По последнему вопросу "Почему разработчики форума использовали id, а не class? -да фиг их знает" - на самом деле, в этом есть логика. Если вкратце: id используется из-за того, что данный элемент подразумевается уникальным на странице, т.е. использовать одно и то же значение id для нескольких элементов недопустимо (и нелогично). Допустим, ссылка на элемент по id всегда будет однозначной и вы всегда сможете к этому элементу обратиться через адресную строку браузера, в отличие от class, который это не умеет и может быть неуникальным, используется как раз для оформления (может быть присвоен множеству элементов).
Например, введите в адресную строку браузера и вы перейдете к самому элементу:

Код:
https://forum.mybb.ru/viewtopic.php?id=39655#main-reply

Ну и полезные советы касаемо приоритетов от @kolobdur74 в этой теме - Правила приоритетов в CSS

+2

Перевести1616

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

Подскажите, пожалуйста, как опустить статус пользователя в профиле под аватарку.

Порядок расположения полей профиля настраивается в Администрирование - Поля профиля путём перетаскивания полей курсором/касанием в нужной последовательности с последующим применением по кнопке Обновить всё.

+1

Перевести1617

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

Порядок расположения полей профиля настраивается в Администрирование - Поля профиля путём перетаскивания полей курсором/касанием в нужной последовательности с последующим применением по кнопке Обновить всё.

Кстати, да, так будет проще всего :) Я совсем забыл про эту штуку :crazyfun:

0

Перевести1618

Существует ли код для формы отвечающий за изменение заголовка страницы темы? По умолчанию заголовок темы имеет стандартное название вроде «Тема пример». Хотелось бы, чтобы была постраничная разбивка {TOPIC_TITLE} - {ON_PAGE}, где в ссылке темы вторая страница выражается p=2 и далее. То есть {название темы} - {номер страницы темы} вроде «Тема пример - 1»; «Тема пример - 2», где цифра в конце показывает номер страницы. Это нужно для поисковых систем для сокращения дублирующихся description.
Существует ли код позволяющий доработать заголовок страницы темы {TOPIC_TITLE} - {SITENAME} - {ON_PAGE}, то есть {название темы} - {название форума} - {номер страницы} ? Лучше, чтобы данный код был расширенный {TOPIC_TITLE} - {SITENAME} - {FORUM_NAME} - {ON_PAGE} - {TOPIC_AUTHOR}, то есть {название темы} - {название форума} - {название раздела форума} - {номер страницы} – {автор темы}. Подобный код предназначен не только для поисковых систем, но и для усиления защиты.

Отредактировано энтузиасты (Ср, 12 Ноя 2025 04:16:08)

0

Перевести1619

энтузиасты
Здравствуйте. Не совсем понятно, что имеется в виду под усилением защиты. Движок возможности изменения заголовков не предусматривает, но это можно сделать скриптом, например таким (в начало HTML верх):

Код:
<script type="text/javascript">
if ($('#pun-viewtopic').length) (function() {
    //            название форума                // номер страницы
    var params = [FORUM.get('topic.forum_name'), (document.URL.match(/p=(\d+)/) || ['',1])[1]];
    params.unshift('');
    document.title += params.join(' - ');
})()
</script>

Имя форума и имя автора тоже можно получить из содержимого страницы, но из HTML верх они не доступны.
Не могу точно сказать, как к этому отнесутся поисковые системы, но по идее современные поисковики умеют обрабатывать скрипты и считывают содержимое страницы с учётом выполненного JavaScript. Так что может и сработает.

0

Перевести1620

Благодарю за информацию Alex_63, на данный момент скрипт работает.
Оптимизация заголовка страниц создаёт неудобства злоумышленникам, которые используют программы во вред ресурсу. Для поисковых систем данная оптимизация нужна для яндекса.

0


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65) #2