Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Оформление, скрипты, правки стиля - Tusich


Оформление, скрипты, правки стиля - Tusich

Сообщений 961 страница 980 из 1006

961

Alex_63
ты исправил индикаторы в мозиле, смотрю. спасибо огромное!
насчёт более подробно, давай по мере возможности  :blush: в лс скину акк, можно так? )

+1

962

Tusich
Ок, вижу, но раз в мозилле поправилось - то видимо пока и нечего больше править )

+1

963

Alex_63
пока вроде да, если где накосячу, я напишу тут ))))
и вот, белые всплывающие окошки, они не изменяемы? эти тёмненькие я посмотрю в стиле, там почти для каждого скрипта есть наладка, а вот белые мне не изменить

0

964

Tusich
Белые это какие? Так-то всё можно стилизовать )

0

965

Alex_63
интернет не хочет со мной сегодня общаться, пришлось через мобильный зайти.
Белые окошки не остаются почему-то на скрине. В общем, при наведении, например, в статистике "активны" или на ник в той же статистике. Или иконки внизу в футере и счетчики. Или в галерее на главной, если навести на картинку. В форме ответа на иконках, они, кстати, у вас тут стилизованы. Индикатор онлайн в иконках аватарок тоже.

0

966

Tusich
Если речь про стандартные подсказки (title), оформляемые браузером, то их нужно сначала преобразовать например в tipsy, и только тогда их можно будет оформить )
Что-то типа того (не тестировал, могут возникнуть конфликты):

Код:
<script>
$(function() {
    $('.punbb *[title]').tipsy({ fade: true, gravity: $.fn.autoNS })
})
</script>

Ставить в HTML-низ

+1

967

Alex_63
как появится тЫрнет, посмотрю, спасибо!

0

968

Alex_63
поставила скрипт, спасибо огромное! всё работает :)

+1

969

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. и не смогла приручить закладки ))) вот эту подсказку хочу чуть ниже спустить, к середине ленты, но когда двигаю, то полностью сама закладка тоже двигается. да, подсказка по середине находится картинки, но лента чуть ниже, можно ли отдельно подсказку здесь поправить?
https://i.imgur.com/r0TWoGPm.png

Заранее спасибо!
_________________ добавлено
а есть ли возможность как-то зафиксировать аватар? или может я в настройках не нашла или есть скрипт, по ширине например и высоте определённый размер. у меня стоит 140 на 140 макс, но сейчас обнаружила, что если меньшей ширины, он всё равно ставит и в постах сразу вот это возникает )) ширина авы меньше, ну и полоска офф железно на своём месте )))
ну или как-то прикрепить эти активности к самой рамке авы?
https://i.imgur.com/NobNFXAm.png
kolobdur даже не зная помогает ))))

Отредактировано Tusich (Пт, 14 Июн 2024 08:48:09)

0

970

Tusich написал(а):

.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, остальные же можно не использовать.

Tusich написал(а):

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, чтобы, в случае необходимости, можно было обратно вернуть.

Tusich написал(а):

2. значение background: только меняет получается задний фон вместе с отступом, что я ставила вот этим padding, получается как рамка толстая, прикольно, но мне бы сам фон чёрный попробовать заменить )))

padding - делает отступ внутри элемента, он так и работает, соответственно если вам не нужен отступ, но нужны рамки, то укажите

padding: 0;

далее ниже пропишите границы (сплошная рамка 5px со всех сторон черного цвета):

border: 5px solid #000;

далее меняете цвет заднего фона (background) на любой другой.

Tusich написал(а):

а есть ли возможность как-то зафиксировать аватар? или может я в настройках не нашла или есть скрипт, по ширине например и высоте определённый размер. у меня стоит 140 на 140 макс, но сейчас обнаружила, что если меньшей ширины, он всё равно ставит и в постах сразу вот это возникает ))

Можно сделать через стили так, что если пользователь загрузил аватар меньшего размера, то чтобы он такого исходного размера и оставался (не увеличивался); если пользователь загрузил аватар большего размера, то ограничить его максимальную ширину и максимальную высоту. Например, сделать до 120 пикселей в ширину и высоту:

Код:
.post .pa-avatar img {
  max-width: 120px;
  max-height: 120px;
}

+2

971

Reysler
поставила fade: false - всё работает, единственное в некоторых кодах отдельных стоит анимация, потом сама посмотрю где, уберу

Reysler написал(а):

padding - делает отступ внутри элемента

да, поэтому я и поставила это значение и мне нужен отступ, а рамка не нужна, поэтому border отсутствует.
но когда добавляю в код эту запись
background: #858585;
цвет например серый, то он не меняет чёрный цвет, а делает так. а мне так не надо, мне просто надо поменять чёрный цвет подсказки на серый
https://i.imgur.com/Y53Awtgm.png
предполагаю, что нужно прописать отдельный путь к этому фону, там по дее несколько кодов. на само тело подсказки, на треугольничек, что посередине сверху и на область, где текст, вот фон текста и надо поменять. а просто если здесь писать .tipsy { тои меняет фон всей области. я не знаю, как правильно прописывать ту область, где текст

Reysler написал(а):

Можно сделать через стили так, что если пользователь загрузил аватар меньшего размера, то чтобы он такого исходного размера и оставался (не увеличивался); если пользователь загрузил аватар большего размера, то ограничить его максимальную ширину и максимальную высоту. Например, сделать до 120 пикселей в ширину и высоту:

нене, смотрите, у меня стоит код индикаторов активности онлайн и оффлайн и они поставлены рядом с аватаром отступом сверху и слева или справа. суть в том, что этот индикатор по идее должен быть привязан к аватару, но если аватар меньше чем 140рх, то индикатор на месте, а ава меньше.
тут либо привязывать индикатор к рамке аватара,
либо делать фиксированную ширину 140px, соответственно картинка будет либо растягиваться, либо сужаться.
в мобильном стиле, кстати, тоже из-за меньшего размера авы, индикатор оказался отдельно стоящим

Отредактировано Tusich (Пт, 14 Июн 2024 22:53:59)

0

972

Tusich написал(а):

да, поэтому я и поставила это значение и мне нужен отступ, а рамка не нужна, поэтому 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 (границы).

+1

973

Reysler
вот да, спасибо огромное :) получилось )

0

974

Tusich написал(а):

нене, смотрите, у меня стоит код индикаторов активности онлайн и оффлайн и они поставлены рядом с аватаром отступом сверху и слева или справа. суть в том, что этот индикатор по идее должен быть привязан к аватару, но если аватар меньше чем 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;
}

+1

975

Reysler
:'( не то совсем, тогда уж лучше зафиксировать намертво ширину аватарки (жаль, что нет в настройках такой кнопочки (было бы здорово, информация к размышлению )

0

976

Tusich
Поперемещайте код в поле HTML-верх или HTML-низ.
Должно всё сработать и получиться так:
https://forumupload.ru/uploads/0000/14/1c/15830/t152176.png

Добавлено спустя 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)

+1

977

Reysler
хм, не срабатывает, мне по идее так и надо.

серая полоска оффлай kolobdur пропала вообще, если поставить в верх.

а если внизу, то просто рядом с постом они находятся и почему-то серая полоска поменялась на зеленую, хотя у него должна быть серая ). щас покажу на скрине
https://i.imgur.com/ukDjoC6m.jpeg

Отредактировано Tusich (Пт, 14 Июн 2024 23:52:11)

0

978

Tusich написал(а):

серая полоска оффлай 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;
}

+1

979

Reysler
там еще в одном месте увидела, заменила )
спасибо огромное! всё работает ) ещё бы подсказки на эти два элемента тоже также поставить  :blush:  тогда вообще без проблем с авкатарами и индикаторами не возникнет, идеальный вариант под разную ширину авок

0

980

Tusich написал(а):

ещё бы подсказки на эти два элемента тоже также поставить

Ищем зеленое:

.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

+1


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Оформление, скрипты, правки стиля - Tusich