Часть информации была размещена в обновлённом гайде по оформлению.

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

Было:

#body section article {
    padding: 20px;
    background: rgb(36 34 34 / 68%);
    margin-bottom: 10px;
    position: relative;
    z-index: 0;
    border-radius: 4px;
    width: auto; backdrop-filter: blur(3px);
}

Стало:

.backed-by-image {
    background: rgb(36 34 34 / 68%);
    backdrop-filter: blur(3px);
    margin-bottom: 10px;
    z-index: -1;
}

Некоторые значения просто не нужны на новом сайте

Если вы хотите сделать так, чтобы в таблице при наведении курсора не менялся цвет колонки, или наоборот менялся, то вот пример:

.ft_html table tbody tr:hover {
    color: inherit;
    background-color: inherit;
}

Если вы хотите, чтобы таблица не была шириной на всю страницу, то это делается так:

.ft_html table {
    width: inherit;
}

Если вы меняли стиль тега hr и у вас он съехал, то может помочь вот что:

hr {
    border: none;
    background-color: #d86629;
    box-shadow: 0px 0px 20px 4px #ff6c00;
    height: 0px;
    width: 798px;
    margin-bottom: 40px;
    margin-top: 40px;
}

Раньше цвет названия отчёта менялся так:

#breadcrumbs ul li {
    color: #e4d396;
}

Теперь так:

.breadcrumb-item.active {
    color: #e4d396;
}

Это заменяем

#breadcrumbs ul li a {
    color: #9b8068;
}

На это:

.breadcrumb-item > a {
    color: #9b8068;
}

Можно в CSS избавиться от кода, который содержит body aside. Это раньше была боковая панель пользователя, где были кнопки возвращение в профиль и добавление нового творчества.

Верхний контейнер, который содержит в себе кнопки «FAQ», «Основное» и так далее называется .container.pl-0.pr-0.container.pl-0.pr-0

Если вы редактируете стиль тега nav, то будьте готовы и к тому, что этот стиль будет применим к кнопкам «О проекте» «Правила» «Правообладателям» в футере сайта. Чтобы этого избежать вместо

nav {

}

Используйте

nav.row {

}

Выпадающие списки. Появляются при нажатии на кнопку «Действия», кнопку профиля, и так далее

.dropdown-menu {
    border: double 4px #eb6036a3;
    box-shadow: 0px 0px 10px #ff8836;
    background: #270b08bd;
}
.dropdown-item {
    color: #ffce93;
}

Сама кнопка Действия может быть отредактирована следующим образом:

.btn-light {
    color: #ffce93;
    background-color: transparent;
    border-color: transparent;
}
.btn-light:hover {
    color: #ffce93;
    background-color: #270b08bd;
    border-color: transparent;
}

Как заменить лого даркмуна так, чтобы оно всегда оставалось по центру? Сперва нужно поменять следующие параметры:

.navbar-brand.mr-3.flex-shrink-0 {
    width: 100%;
}
header.row {
    display: block;
    width: 100%;
}

После чего можно настраивать лого:

.d-sm-block {
    width: 100%;
    height: 132px;
    background: url(https://i.imgur.com/MN0N7u1.png) no-repeat center;
    content-visibility: hidden;
}

Придётся повозиться с отступами. В дополнении к этому, можно скрасить оформление шапки таким образом:

Изображение

Вот таким вот образом:

header.row {
    display: block;
    width: 100%;
    height: 360px;
    background: url(https://i.imgur.com/M9U1ocR.png) no-repeat bottom;
}

Если вам не нравится позиция кнопки вашего профиля, то её можно сдвинуть:

.icms-user-menu {
    margin-top: -300px;
}

P.S.: Спасибо Mercyss и Darth Any за наводки.

+20
714
16.09.23 02:54
+4
ludwici ludwici 12 сентября 2023 в 14:02 #

Запись будет пополняться

0
Merck Merck 13 сентября 2023 в 14:07 #

Можно ли будет записаться на онлайн курсы по CSS?

Я тебе фоточку Теннанта за это скину в новом образе 

0
ludwici ludwici 13 сентября 2023 в 16:34 #

Вот бы самому эти курсы пройти

0
ludwici ludwici 16 сентября 2023 в 00:48 #

Обновил информацию про лого, думаю сейчас она будет полезнее

0
yuutaf yuutaf 12 сентября 2023 в 15:15 #

спасибо людвичи

0
ShelbyWalk ShelbyWalk 12 сентября 2023 в 21:08 #

Людвичи спасибо брат

0
Krähenkönigin Katarina Kening Krähenkönigin Katarina Kening 13 сентября 2023 в 05:08 #

Людвичи лучший, как всегда!

0
Pivolga Pivolga 13 сентября 2023 в 07:58 #

Лучший. Как вернусь домой, начну постигать, по твоим великолепным записям, новый CSS

0
ashtress ashtress 13 сентября 2023 в 08:50 #

Спасибо за гайдик по оформлению, поможет если не всем, то многим.

Как же классно теперь писать комментарии с мобильного. И при этом даже без проблем можно делать всякие коды, которые не сломаются. 

0
Merck Merck 13 сентября 2023 в 14:03 #

Врешь. Обманщик. Хитрец. Локи. Чарльз Ликер, тебя раскусили.

+2
DXVIL NXVXR SLXXP DXVIL NXVXR SLXXP 14 сентября 2023 в 08:30 #

Про выпадающие списки, кстати, можно подсократить до такого состояния. 

.dropdown-item.text-nowrap { /*выпадающие штуки*/
color: #fff;
background-color: #000;
}
.dropdown-item.text-nowrap:hover { /*они же, но при наведении*/
color: #000;
background-color: #fff;
}

Мало ли кому будет полезно!

upd. Внезапно пришло осознание, что для вкладки с профилем (которая в правом верхнем углу),  всё равно придётся дописать .dropdown-menu{background-color: #000), это так, на будущее, тоже. Зачем-то...

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.