Alex_63
ты исправил индикаторы в мозиле, смотрю. спасибо огромное!
насчёт более подробно, давай по мере возможности в лс скину акк, можно так? )
Оформление, скрипты, правки стиля - Tusich
Сообщений 961 страница 980 из 1019
Поделиться961Чт, 13 Июн 2024 11:47:03
Поделиться962Чт, 13 Июн 2024 11:54:13
Tusich
Ок, вижу, но раз в мозилле поправилось - то видимо пока и нечего больше править )
Поделиться963Чт, 13 Июн 2024 12:10:41
Alex_63
пока вроде да, если где накосячу, я напишу тут ))))
и вот, белые всплывающие окошки, они не изменяемы? эти тёмненькие я посмотрю в стиле, там почти для каждого скрипта есть наладка, а вот белые мне не изменить
Поделиться964Чт, 13 Июн 2024 12:21:22
Tusich
Белые это какие? Так-то всё можно стилизовать )
Поделиться965Чт, 13 Июн 2024 13:01:52
Alex_63
интернет не хочет со мной сегодня общаться, пришлось через мобильный зайти.
Белые окошки не остаются почему-то на скрине. В общем, при наведении, например, в статистике "активны" или на ник в той же статистике. Или иконки внизу в футере и счетчики. Или в галерее на главной, если навести на картинку. В форме ответа на иконках, они, кстати, у вас тут стилизованы. Индикатор онлайн в иконках аватарок тоже.
Поделиться966Чт, 13 Июн 2024 13:05:30
Tusich
Если речь про стандартные подсказки (title), оформляемые браузером, то их нужно сначала преобразовать например в tipsy, и только тогда их можно будет оформить )
Что-то типа того (не тестировал, могут возникнуть конфликты):
<script> $(function() { $('.punbb *[title]').tipsy({ fade: true, gravity: $.fn.autoNS }) }) </script>
Ставить в HTML-низ
Поделиться967Чт, 13 Июн 2024 13:07:21
Alex_63
как появится тЫрнет, посмотрю, спасибо!
Поделиться968Чт, 13 Июн 2024 20:15:12
Alex_63
поставила скрипт, спасибо огромное! всё работает
Поделиться969Пт, 14 Июн 2024 08:17:05
Alex_63
вот такую ерунду я собрала методом тыка по панели разработчика
.tipsy {
padding: 5px 5px !important;
text-wrap: balance; !important; /не знаю на сколько это балансирует, ну пусть будет
font:12px 'Oswald' !important;
letter-spacing:1px !important;
visibility:visible !important;
-moz-border-radius: 3px !important; /и вот эти четыре параметра, что ниже так и не поняла, работают ли
-khtml-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
}
НООО как всегда, так как я не знаю англ яз и тыкаюсь как котёнок, не учу и не запоминаю, только по готовым значениям бегаю, возникли вопросики ))
1. как сократить время появления и время исчезания подсказок? как у вас в форме ответа надо везде, не разобралась я с этим и наверное надо в двух местах делать на появление и исчезание (я пыталась поставить названия, но что-то видимо не правильно )))
кстати значение opacity как-то либо я не так ставлю, либо он начинает глючить, потому что вместе с прозрачностью и моменты появления и исчезания меняются не в лучшую сторону, в форме ответа если быстро по кнопкам вести курсор, то не успевают исчезнуть и за одно наведение по всем кнопкам, можно даже увидеть все подсказки ))) в общем поправить бы этот момент
2. значение background: только меняет получается задний фон вместе с отступом, что я ставила вот этим padding, получается как рамка толстая, прикольно, но мне бы сам фон чёрный попробовать заменить )))
3. и не смогла приручить закладки ))) вот эту подсказку хочу чуть ниже спустить, к середине ленты, но когда двигаю, то полностью сама закладка тоже двигается. да, подсказка по середине находится картинки, но лента чуть ниже, можно ли отдельно подсказку здесь поправить?
Заранее спасибо!
_________________ добавлено
а есть ли возможность как-то зафиксировать аватар? или может я в настройках не нашла или есть скрипт, по ширине например и высоте определённый размер. у меня стоит 140 на 140 макс, но сейчас обнаружила, что если меньшей ширины, он всё равно ставит и в постах сразу вот это возникает )) ширина авы меньше, ну и полоска офф железно на своём месте )))
ну или как-то прикрепить эти активности к самой рамке авы?
kolobdur даже не зная помогает ))))
Отредактировано Tusich (Пт, 14 Июн 2024 08:48:09)
Поделиться970Пт, 14 Июн 2024 21:52:16
.tipsy {
padding: 5px 5px !important;
text-wrap: balance; !important; /не знаю на сколько это балансирует, ну пусть будет
font:12px 'Oswald' !important;
letter-spacing:1px !important;
visibility:visible !important;
-moz-border-radius: 3px !important; /и вот эти четыре параметра, что ниже так и не поняла, работают ли
-khtml-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
}
В данном случае достаточно оставить два border-radius: собственно сам border-radius и на всякий случай -webkit-border-radius для устаревших версий Android, остальные же можно не использовать.
1. как сократить время появления и время исчезания подсказок? как у вас в форме ответа надо везде, не разобралась я с этим и наверное надо в двух местах делать на появление и исчезание (я пыталась поставить названия, но что-то видимо не правильно )))
кстати значение opacity как-то либо я не так ставлю, либо он начинает глючить, потому что вместе с прозрачностью и моменты появления и исчезания меняются не в лучшую сторону, в форме ответа если быстро по кнопкам вести курсор, то не успевают исчезнуть и за одно наведение по всем кнопкам, можно даже увидеть все подсказки ))) в общем поправить бы этот момент
Поскольку tipsy ‒ плагин jQuery, то и работать необходимо с его настройками. За время появления "подсказок" отвечает параметр delayIn, а за затухание (исчезание) delayOut. Оба эти параметры указываются в миллисекундах (ms).
В HTML-низ найдите:
<script>
$(function() {
$('.punbb *[title]').tipsy({ fade: true, gravity: $.fn.autoNS, delayIn: 50, delayOut: 500 })
})
</script>
Выделенное красным (включая запятую) добавьте в свой код. Отрегулируйте значения по своему предпочтению. Если не нужна анимация появления/затухания, то просто удалите fade: true (включая запятую) или замените true на false, чтобы, в случае необходимости, можно было обратно вернуть.
2. значение background: только меняет получается задний фон вместе с отступом, что я ставила вот этим padding, получается как рамка толстая, прикольно, но мне бы сам фон чёрный попробовать заменить )))
padding - делает отступ внутри элемента, он так и работает, соответственно если вам не нужен отступ, но нужны рамки, то укажите
padding: 0;
далее ниже пропишите границы (сплошная рамка 5px со всех сторон черного цвета):
border: 5px solid #000;
далее меняете цвет заднего фона (background) на любой другой.
а есть ли возможность как-то зафиксировать аватар? или может я в настройках не нашла или есть скрипт, по ширине например и высоте определённый размер. у меня стоит 140 на 140 макс, но сейчас обнаружила, что если меньшей ширины, он всё равно ставит и в постах сразу вот это возникает ))
Можно сделать через стили так, что если пользователь загрузил аватар меньшего размера, то чтобы он такого исходного размера и оставался (не увеличивался); если пользователь загрузил аватар большего размера, то ограничить его максимальную ширину и максимальную высоту. Например, сделать до 120 пикселей в ширину и высоту:
.post .pa-avatar img { max-width: 120px; max-height: 120px; }
Поделиться971Пт, 14 Июн 2024 22:44:20
Reysler
поставила fade: false - всё работает, единственное в некоторых кодах отдельных стоит анимация, потом сама посмотрю где, уберу
padding - делает отступ внутри элемента
да, поэтому я и поставила это значение и мне нужен отступ, а рамка не нужна, поэтому border отсутствует.
но когда добавляю в код эту запись
background: #858585;
цвет например серый, то он не меняет чёрный цвет, а делает так. а мне так не надо, мне просто надо поменять чёрный цвет подсказки на серый
предполагаю, что нужно прописать отдельный путь к этому фону, там по дее несколько кодов. на само тело подсказки, на треугольничек, что посередине сверху и на область, где текст, вот фон текста и надо поменять. а просто если здесь писать .tipsy { тои меняет фон всей области. я не знаю, как правильно прописывать ту область, где текст
Можно сделать через стили так, что если пользователь загрузил аватар меньшего размера, то чтобы он такого исходного размера и оставался (не увеличивался); если пользователь загрузил аватар большего размера, то ограничить его максимальную ширину и максимальную высоту. Например, сделать до 120 пикселей в ширину и высоту:
нене, смотрите, у меня стоит код индикаторов активности онлайн и оффлайн и они поставлены рядом с аватаром отступом сверху и слева или справа. суть в том, что этот индикатор по идее должен быть привязан к аватару, но если аватар меньше чем 140рх, то индикатор на месте, а ава меньше.
тут либо привязывать индикатор к рамке аватара,
либо делать фиксированную ширину 140px, соответственно картинка будет либо растягиваться, либо сужаться.
в мобильном стиле, кстати, тоже из-за меньшего размера авы, индикатор оказался отдельно стоящим
Отредактировано Tusich (Пт, 14 Июн 2024 22:53:59)
Поделиться972Пт, 14 Июн 2024 23:01:01
да, поэтому я и поставила это значение и мне нужен отступ, а рамка не нужна, поэтому border отсутствует.
но когда добавляю в код эту запись
background: #858585;
цвет например серый, то он не меняет чёрный цвет, а делает так. а мне так не надо, мне просто надо поменять чёрный цвет подсказки на серый
В таком случае замените .tipsy на .tipsy-inner, вот отредактированный код:
.tipsy-inner { background-color: #858585 !important; padding: 5px 5px !important; text-wrap: balance; !important; font:12px 'Oswald' !important; letter-spacing:1px !important; visibility:visible !important; -webkit-border-radius: 3px !important; border-radius: 3px !important; } .tipsy-arrow { border-color: transparent transparent #858585 transparent !important; }
.tipsy-arrow - цвет стрелочки, выполнен в виде border (границы).
Поделиться973Пт, 14 Июн 2024 23:03:00
Reysler
вот да, спасибо огромное получилось )
Поделиться974Пт, 14 Июн 2024 23:25:37
нене, смотрите, у меня стоит код индикаторов активности онлайн и оффлайн и они поставлены рядом с аватаром отступом сверху и слева или справа. суть в том, что этот индикатор по идее должен быть привязан к аватару, но если аватар меньше чем 140рх, то индикатор на месте, а ава меньше.
тут либо привязывать индикатор к рамке аватара,
либо делать фиксированную ширину 140px, соответственно картинка будет либо растягиваться, либо сужаться.
Пока я вижу это в виде отдельного скрипта, переносящего элемент ближе к аватарке, поскольку div-элемент DOM, отвечающий за активность, расположен не на одной линии с аватаром - нет зависимости структуры, поэтому её приходится позиционировать абсолютно.
В HTML-низ:
<script>document.querySelectorAll(".acchide,.post-author .pa-online").forEach(e=>{e.closest(".post").querySelector(".pa-avatar img").insertAdjacentElement("afterend",e)})</script>
Далее в стилях ищем:
.post-author .pa-online, .post-author:not(.online) .pa-author .acchide { position: absolute; display: inline-block !important; top: 51px; right: 35px; left: auto !important; line-height: unset; background: #49cd00 !important; height: 50px; width: 6px; margin: 0 0 0 -5px !important; padding: 0 !important; border: 0 !important; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 0%; cursor: help; }
Меняем его на:
.post-author .pa-online, .post-author:not(.online) .pa-avatar .acchide { position: absolute; display: inline-block !important; top: 51px; right: -6px; left: auto !important; line-height: unset; background: #49cd00 !important; height: 50px; width: 6px; margin: 0 0 0 -5px !important; padding: 0 !important; border: 0 !important; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 0%; cursor: help; }
Поделиться975Пт, 14 Июн 2024 23:40:13
Reysler
не то совсем, тогда уж лучше зафиксировать намертво ширину аватарки (жаль, что нет в настройках такой кнопочки (было бы здорово, информация к размышлению )
Поделиться976Пт, 14 Июн 2024 23:43:53
Tusich
Поперемещайте код в поле HTML-верх или HTML-низ.
Должно всё сработать и получиться так:
Добавлено спустя 3 минуты 54 секунды:
Может у вас там еще какие-то элементы подгружаются, можно сделать отложенную загрузку и дождаться, пока страница загрузится. Замените тогда мой скрипт на этот:
<script>$(document).ready(function(){document.querySelectorAll(".acchide,.post-author .pa-online").forEach(e=>{e.closest(".post").querySelector(".pa-avatar img").insertAdjacentElement("afterend",e)})})</script>
Добавлено спустя 6 минут 26 секунд:
Отредактировал код
Отредактировано Reysler (Пт, 14 Июн 2024 23:50:19)
Поделиться977Пт, 14 Июн 2024 23:51:10
Reysler
хм, не срабатывает, мне по идее так и надо.
серая полоска оффлай kolobdur пропала вообще, если поставить в верх.
а если внизу, то просто рядом с постом они находятся и почему-то серая полоска поменялась на зеленую, хотя у него должна быть серая ). щас покажу на скрине
Отредактировано Tusich (Пт, 14 Июн 2024 23:52:11)
Поделиться978Пт, 14 Июн 2024 23:55:40
серая полоска оффлай kolobdur пропала вообще, если поставить в верх.
Потому что я упустил из виду:
.post-author:not(.online) .pa-author .acchide { background: #a3a3a3 !important; }
Поскольку мы перемещаем элемент .acchide в другое место, находящееся в области элемента .pa-avatar, то и его меняем:
.post-author:not(.online) .pa-avatar .acchide { background: #a3a3a3 !important; }
Добавлено спустя 3 минуты 26 секунд:
Так же ниже код меняем с этого:
.post-author:not(.online) .pa-author .acchide:hover { background: #b3b3b3 !important; }
На этот:
.post-author:not(.online) .pa-avatar .acchide:hover { background: #b3b3b3 !important; }
Поделиться979Сб, 15 Июн 2024 00:03:05
Reysler
там еще в одном месте увидела, заменила )
спасибо огромное! всё работает ) ещё бы подсказки на эти два элемента тоже также поставить тогда вообще без проблем с авкатарами и индикаторами не возникнет, идеальный вариант под разную ширину авок
Поделиться980Сб, 15 Июн 2024 00:13:13
ещё бы подсказки на эти два элемента тоже также поставить
Ищем зеленое:
.post-author .pa-online strong {
position: absolute;
display: inline-block;
top: 137px;
left: -9px;
padding: 5px 5px !important;
min-height: 18px;
line-height: 18px;
background: #00464e;
font-weight: 100;
text-wrap: nowrap;
color: #fff;
font-family: 'Oswald';
letter-spacing:1px !important;
font-size: 12px;
text-align: center;
z-index: 9999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 0.8;
visibility: hidden;
cursor: help;
}
Выделенное красным меняем на 58
.post-author .pa-last-visit {
position: absolute;
display: inline-block;
top: 188px;
right: -53px;
padding: 5px 5px !important;
min-height: 18px;
line-height: 18px;
background: #00464e;
font-weight: 100;
text-wrap: nowrap;
color: #fff;
font-size: 12px;
font-family: 'Oswald';
letter-spacing:1px !important;
text-align: center;
z-index: 9999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 0.8;
visibility: hidden;
cursor: help;
}
Выделенное красным меняем на 155
Выделенное синим меняем на 39