Ошибка?? Почему это оно заходит
- Автор темы Avgust999
- Дата начала
ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
Если быть точнее то баннер немного прячется на аве в ник под авой как исправить это
Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
Хм , часто баннер нормально выглядит на ПК, но ломается на телефоне.
Попробуй -
Значения меньше/больше уже сам отредактируешь
Попробуй -
Fix:
@media (max-width: 768px) {
.memberProfileBanner {
height: 180px;
overflow: hidden;
}
}Значения меньше/больше уже сам отредактируешь
ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
Попробуй проверить отрицательные отступы в стиле
И замени например на :
Отрицательные:
margin-top: -XXpx;
top: -XXpx;И замени например на :
Fix:
.memberProfileBanner {
margin-top: 0;
top: 0;
}ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
Где посмотреть
Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
Бывают ещё проблемы из-за position: absolute или фиксированной высоты.
Fix:
.memberProfileBanner img {
width: 100%;
height: 100%;
object-fit: cover;
}
Если вдруг это div с background-image::
.memberProfileBanner {
background-size: cover;
background-position: center;
}Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
margin-top: -... / top: -...
1. Зайди в Админ-панель
2. Перейди в
Внешний вид - Стили - Твой стиль
3. Нажми Свойства стиля или CSS
4. Открой:
extra.less
или member.less
или public:member.less
Найди там строку :
Типа:
margin-top: -10px;
top: -20px;
transform: translateY(-...);Если найдёшь убери там минус или поставь 0
ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
Мой extra.less
Extra:
@logoImages: 'https://i.postimg.cc/RZGf9h7w/i-(52).jpg'; // Изображение логотипа (указывать в кавычках)
@logoSize: 20px; // Размер логотипа
@logoOpacity: 100%; // Прозрачность логотипа (100% - непрозрачный, 0% - прозрачный)
.fontMontserrat(@fweight) {
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: @fweight;
src: local(''),
url('/styles/role-play/fonts/montserrat-@{fweight}.woff2') format('woff2'),
url('/styles/role-play/fonts/montserrat-@{fweight}.woff') format('woff');
}
}
.fontMontserrat(400);
.fontMontserrat(500);
.fontMontserrat(600);
.fontMontserrat(700);
@strongTextShadow: 1px 0 1px rgba(0,0,0,.5),
0 1px 1px rgba(0,0,0,.5),
-1px 0 1px rgba(0,0,0,.5),
0 -1px 1px rgba(0,0,0,.5);
.gradientUserBanner(@start: transparent, @end: transparent, @position: right) {
background-image: linear-gradient(to @position, @start 0%, @end 100%);
}
.svg-userBannerVariation(@color; @bg; @logo: @logoImages) {
color: @color;
background-color: @bg;
border: none;
.userBanner-before {
&:before {
content: '';
display: block;
width: 15px;
height: 15px;
background: url('https://i.postimg.cc/RZGf9h7w/i-(52).jpg') no-repeat center / @logoSize,
linear-gradient(to top, rgba(0,0,0,.8) 10%, rgba(0,0,0,.2) 100%);
filter: opacity(@logoOpacity);
padding: 2px;
border-radius: 50%;
}
}
}
.userBanner {
text-transform: uppercase;
font-weight: 800;
padding: 3px 5px 3px 3px;
border: 1px solid transparent;
border-radius: 10px;
text-align: center;
display: inline-flex;
justify-content: space-between;
background-size: 500% 500%;
animation: AnimBanner 10s ease infinite;
align-items: center;
align-content: center;
position: relative;
strong {
font-size: 85%;
font-family: 'Montserrat', sans-serif;
font-weight: 800;
padding-left: 3px;
line-height: .95;
text-shadow: @strongTextShadow;
}
.message-userBanner& {
display: flex;
}
}
@media (max-width: @xf-responsiveMedium) {
.message:not(.message--forceColumns) .message-userTitle,
.message:not(.message--forceColumns) .message-userBanner.userBanner {
display: inline-flex;
}
}
.userBanner.userBanner-- {
&staff {
.svg-userBannerVariation(#fff, #5c97bf);
.gradientUserBanner(#8B008B,#00BFFF);
background-image: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
background-size: 900% 900%;
}
&admin {
.svg-userBannerVariation(#fff, #4169E1);
.gradientUserBanner();
}
&stadm {
.svg-userBannerVariation(#fff, #32CD32);
.gradientUserBanner();
}
&mladm {
.svg-userBannerVariation(#fff, #00FF00);
.gradientUserBanner();
}
&newmember {
.svg-userBannerVariation(#fff, #6c7a89);
.gradientUserBanner();
}
&verified {
.svg-userBannerVariation(#fff, #446cb3,);
.gradientUserBanner();
}
&proveren {
.svg-userBannerVariation(#fff, #B0C4DE,);
.gradientUserBanner();
}
&osnoval {
.svg-userBannerVariation(#fff, #fB0C4DE);
.gradientUserBanner(#FFFF00,#FFA500);
}
&banned {
.svg-userBannerVariation(#fff, #9a12b3);
.gradientUserBanner();
}
&rukov {
.svg-userBannerVariation(#fff, #FF0000);
.gradientUserBanner(#FA8072, #FF0000, #FA8072);
}
&dedmoroz {
.svg-userBannerVariation(#fff, #FF0000);
.gradientUserBanner(#FF0000, #FF0000, #FF0000);
}
&ga {
.svg-userBannerVariation(#fff, #228B22);
.gradientUserBanner(#00FF00, #32CD32,#228B22);
background-image: linear-gradient(270deg, #32CD32,#228B22,#00FF00);
}
&admforum {
.svg-userBannerVariation(#fff, #d80000);
.gradientUserBanner(#00FF00, #008000,#00FF00);
background-image: linear-gradient(270deg, #00FFFF,#008080,#00FFFF);
}
&razrab {
.svg-userBannerVariation(#fff, #d80000);
.gradientUserBanner(#00FF00, #008000,#00FF00);
background-image: linear-gradient(270deg, #D2691E,#CD853F,#D2691E);
}
&gs {
.svg-userBannerVariation(#fff, #d80000);
.gradientUserBanner(#00FF00, #008000,#00FF00);
background-image: linear-gradient(270deg, #0000FF,#000080,#0000FF);
}
&zgs {
.svg-userBannerVariation(#fff, #d80000);
.gradientUserBanner(#00FF00, #008000,#00FF00);
background-image: linear-gradient(270deg, #4169E1,#00BFFF,#4169E1);
}
&lider {
.svg-userBannerVariation(#fff, #d80000);
.gradientUserBanner(#00FF00, #008000,#00FF00);
background-image: linear-gradient(270deg, #FFFF00,#D2691E,#FFFF00);
}
&zga {
.svg-userBannerVariation(#fff, #006400);
.gradientUserBanner(#98FB98, #006400,#006400);
background-image: linear-gradient(270deg, #98FB98,#006400,#006400);
}
&pochet {
.svg-userBannerVariation(#fff, #d80000);
.gradientUserBanner(#00FF00, #008000,#00FF00);
background-image: linear-gradient(270deg, #FFFF00,#00FF00,#FF0000,#FF00FF,#0000FF,#00FFFF,#8A2BE2);
}
}
@keyframes AnimBanner {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.label {
color: #fff;
text-transform: uppercase;
font-weight: 650;
font-size: 70%;
padding: 2px 4px;
text-align: center;
background-size: 300% 300%;
border-radius: 5px;
}
&.v {
background: #ff0000;
box-shadow: 0 0 12px #ff0000;
}
&.ras {
background: #0044ff;
box-shadow: 0 0 12px #0044ff;
}
&.otk {
background: #00AA00;
box-shadow: 0 0 12px #00AA00;
}
&.rasm {
background: #ee7700;
box-shadow: 0 0 12px #ee7700;
}
&.inf {
background: #ffbb00;
box-shadow: 0 0 12px #ffbb00;
}
@keyframes rotate-in-center {
0% {
transform:rotate(0);
}
100% {
transform:rotate(360deg);
}
}
.aur_NewYear {
text-align: center;
white-space: nowrap;
overflow: hidden;
position: fixed !important;
top: 0;
z-index: 999999 !important;
margin: 0;
padding: 0;
pointer-events: none;
width: 100%;
}
.aur_NewYear li {
position: relative;
animation-fill-mode: both;
animation-iteration-count: infinite;
list-style: none;
display: inline-block;
width: 12px;
height: 18px;
border-radius: 50%;
margin: 20px;
padding: 0;
background: rgba(0, 247, 165, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
animation-name: flash-1;
animation-duration: 2s;
}
.aur_NewYear li:nth-child(2n+1) {
background: rgba(0, 255, 255, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
animation-name: flash-2;
animation-duration: 0.4s;
}
.aur_NewYear li:nth-child(4n+2) {
background: rgba(247, 0, 148, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
animation-name: flash-3;
animation-duration: 1.1s;
}
.aur_NewYear li:nth-child(odd) {
animation-duration: 1.8s;
}
.aur_NewYear li:nth-child(3n+1) {
animation-duration: 1.4s;
}
.aur_NewYear li:before {
content: "";
position: absolute;
background: #222;
width: 10px;
height: 9.3333333333px;
border-radius: 3px;
top: -4.6666666667px;
left: 1px;
}
.aur_NewYear li:after {
content: "";
position: absolute;
top: -14px;
left: 9px;
width: 52px;
height: 18.6666666667px;
border-bottom: solid #222 2px;
border-radius: 50%;
}
.aur_NewYear li:last-child:after {
content: none;
}
.aur_NewYear li:first-child {
margin-left: -40px;
}
@keyframes flash-1 {
0%, 100% {
background: rgba(0, 247, 165, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
}
50% {
background: rgba(0, 247, 165, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
}
}
@keyframes flash-2 {
0%, 100% {
background: rgba(0, 255, 255, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
}
50% {
background: rgba(0, 255, 255, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
}
}
@keyframes flash-3 {
0%, 100% {
background: rgba(247, 0, 148, 1);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
}
50% {
background: rgba(247, 0, 148, 0.4);
box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
}
}
@media (max-width: 76px) {
.memberProfileBanner {
height: 18px;
overflow: hidden;
}
}Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
Проблема оказалась не в самом баннере профиля и не в отрицательных margin, а в стилях, которые накладываются поверх страницы. В extra.less используется элемент .aur_NewYear с position: fixed и очень большим z-index, из-за чего он перекрывает элементы профиля и создаёт ощущение, что баннер выходит за границы, особенно на мобильных устройствах.
Решение - ограничить влияние этого элемента. Надо отключить .aur_NewYear на мобильных экранах через media-запрос (до 768px), чтобы гирлянда не накладывалась на контент профиля и не ломала вёрстку. После этого перекрытие баннера исчезло.
Также была ошибка в media-запросе для самого баннера профиля: использовалось значение max-width: 76px, которое никогда не срабатывает. Замени его на корректное max-width: 768px и задай overflow: hidden (и адекватную высоту), из-за чего баннер перестал выходить за пределы блока на мобильных устройствах.
Решение - ограничить влияние этого элемента. Надо отключить .aur_NewYear на мобильных экранах через media-запрос (до 768px), чтобы гирлянда не накладывалась на контент профиля и не ломала вёрстку. После этого перекрытие баннера исчезло.
Также была ошибка в media-запросе для самого баннера профиля: использовалось значение max-width: 76px, которое никогда не срабатывает. Замени его на корректное max-width: 768px и задай overflow: hidden (и адекватную высоту), из-за чего баннер перестал выходить за пределы блока на мобильных устройствах.
ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
Дай готовый пж екстра без ошибок
Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
Попробуй сам , учись . Если вообще никак не получится - скину
У кого есть такие роли и новогодние игрушки ?
Программировать - значит понимать
- Мар
- 215
- 260
Только чтение
ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...
- Июл
- 1,172
- 1,305
Активный
