IPS4 Настройка CSS

[Владимир Шека 4]

Как редактировать CSS

• Как я понял, по адресу Админка > Кастомизация > Внешний вид > Темы > Выбор вашей темы > HTML и CSS код темы >. Далее путь: CSS > core > global > framework > global.css находятся основные (глобальные настройки css-стилей), но там их менять не нужно, чтобы случайно не запороть.
• Для редактирования есть Админка > Кастомизация > Внешний вид > Темы > Выбор вашей темы > HTML и CSS код темы > Вкладка CSS > файл custom.css, куда добавляете свой код (можно брать фрагменты из global.css) и он становится приоритетней, чем настройки по умолчанию в global.css.

 

Куда обратиться за помощью:

• Крупный форум по движку IPS https://ipbmafia.ru/,
• Еще один https://ipshelp.ru/

[Владимир Шека 4]

Цвет ссылок в посте источник https://ipshelp.ru/topic/236-cvet-ssylok

 

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

Необходимо зайти в админку, а далее Кастомизация > Внешний вид > Темы > Выбор вашей темы > HTML и CSS код темы > Вкладка CSS > файл custom.css

Если добавить в файл:

.cPost a {
    color: #3c6994;
}

то все ссылки в посте станут синими, включая служебные.

 

Если прописать вместо этого следующее:

div[data-role="commentContent"] a {
	color: #3c6994;
}

то будут только обычные ссылки синими, а интерфейсные по стандарту.

Недостаток - работает только на ссылки в теле поста, а в редакторе и прочие ссылки не меняет.

[Владимир Шека 4]

Что полезного можно настроить в custom.css при установке форума IPS

Заходим в путь - Админка > Кастомизация > Внешний вид > Темы > Выбор вашей темы > HTML и CSS код темы > Вкладка CSS > файл custom.css

Далее добавляем код в файл (в большинстве случаев), либо редактируем соответствующие строчки, если они уже есть.

 

/** УДАЛЕНА КНОПКА "СОЗДАТЬ ТЕМУ" С ГЛАВНОЙ (мне мешала) */

.ipsPageHeader.ipsClearfix.ipsSpacer_bottom.cForumHeader {
    display: none !important;
}

/** УДАЛЕН КОПИРАЙТ (и так был удален из кода) */

#elCopyright { display: none; }

/** УДАЛЕНО СООБЩЕНИЕ ГОСТЮ ВНИЗУ СТРАНИЦЫ "Для публикации сообщений создайте учётную запись или авторизуйтесь" */ мне мешало, так как раздувало вертикальную высоту страницы

.ipsType_center.ipsPad.cGuestTeaser { display: none; }

/** УДАЛЕНА НАВИГАЦИЯ ВНИЗУ СТРАНИЦЫ (ПЕРЕЙТИ К СПИСКУ ТЕМ, СЛЕДУЮЩАЯ НЕПРОЧИТАННАЯ и т.п.) */ А это возможно зря, может пригодиться, хотя я этим никогда не пользовался.

.ipsGrid.ipsGrid_collapsePhone.ipsPager.ipsClearfix.ipsSpacer_top.ipsContained { display: none; }

 

[Владимир Шека 4]

Редактирование главной страницы форума - найти globalTemplate где-то в  Админка > Кастомизация > Внешний вид > Темы > Выбор вашей темы > HTML и CSS код темы >

 

Редактирование нижней строчки главной страницы - найти breadcrumb (это что-то типо футера с ссылками "Поиск", "Непрочитанный контент" и т.п.)

[Владимир Шека 4]

Цвет системных ссылок 

Источник: http://www.sitedelkino.ru/izmenit-tsvet-ssylki-html.html

 

В моем шаблоне темы цвет системных ссылок (это те, которые не внутри поста) меняется так. Админка > Кастомизация > Внешний вид > Темы > Выбор вашей темы > HTML и CSS код темы > custom.css

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

 

[Владимир Шека 4]

Для темы Baisik IPB 4.2 (на других не тестил)

 

Изменить цвет фона, некоторых системных надписей и их шрифт

Файл custom.css

body {
    background: #2f3461 url('{resource="background_top.png" app="core" location="global"}') repeat-x 0 0; /** цвет основного фона */
    color: #2f3461; /** цвет ника и кол-ва сообщений */
    font: normal 11px tahoma,helvetica,arial,sans-serif; /** настройка шрифта основных элементом */
    position: relative;
    padding-bottom: 0px; /** отступ внизу страницы, добавляет пустоту, и увеличивает верт. объем страницы, было 20, поставил 0 */
}

 

 

[Владимир Шека 4]

Отступ блока с форумом от верхней границы окна (отступ нужен, чтобы меню у хедера было видно)

 

#ipsLayout_header header {
    height: 68px;
    margin: 0 auto;
}