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

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

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


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


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

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

1

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

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

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

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

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

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

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

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

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

Предыдущая часть темы: Общие вопросы по оформлению (65)

+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 (Вчера 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 (Вчера 15:39:08)

+2

1607

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

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

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

+1

1608

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

+1

1609

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

Отредактировано Санна (Вчера 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 (Вчера 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


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