Часть информации была размещена в обновлённом гайде по оформлению.
С переходом на новый сайт у многих, если не у всех, сломались стили. Вот пара заметок для того, чтобы настроить их под новый сайт.
Было:
#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;
}
Запись будет пополняться
Можно ли будет записаться на онлайн курсы по CSS?
Я тебе фоточку Теннанта за это скину в новом образе
Вот бы самому эти курсы пройти
Обновил информацию про лого, думаю сейчас она будет полезнее
спасибо людвичи
Людвичи спасибо брат
Людвичи лучший, как всегда!
Лучший. Как вернусь домой, начну постигать, по твоим великолепным записям, новый CSS
Спасибо за гайдик по оформлению, поможет если не всем, то многим.
Как же классно теперь писать комментарии с мобильного. И при этом даже без проблем можно делать всякие коды, которые не сломаются.
Врешь. Обманщик. Хитрец. Локи. Чарльз Ликер, тебя раскусили.
Про выпадающие списки, кстати, можно подсократить до такого состояния.
Мало ли кому будет полезно!
upd. Внезапно пришло осознание, что для вкладки с профилем (которая в правом верхнем углу), всё равно придётся дописать .dropdown-menu{background-color: #000), это так, на будущее, тоже. Зачем-то...