ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Ищешь чем бы украсить свой форум или сайт к Хэллоуину? 🎃 Мы поможем нарядиться! 🎃

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

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



Всплывающее поле профиля на аватаре (CSS)

Сообщений 1 страница 1 из 1

1

[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Всплывающее поле профиля на аватаре">
  <div id="icon"></div>
  <img src="https://forumupload.ru/uploads/0007/e3/f7/2/829725.gif" class="postimg">
</a>

<div id="cover-block">
Дата: 17.08.2020<br>
Автор: <a href="/profile.php?id=2" target="_blank">Герда</a><br>
Бесплатный код<br>
Описание: При наведении курсора на аватар, всплывает содержимое дополнительного поля.
</div>

</div>

<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]

Коды и описание

Анимация с плавным появлением

https://forumupload.ru/uploads/0007/e3/f7/2/74062.gif

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Анимация с плавным разворачиванием

https://forumupload.ru/uploads/0007/e3/f7/2/186892.gif

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Совмещенный вариант анимации: разворачивание + появление

https://forumupload.ru/uploads/0007/e3/f7/2/68616.gif

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Пояснения и настройки
Куда ставить?
Все коды, которые выложены вставляются в Администрирование > Свой стиль
ИЛИ вы можете вставлять их в Администрирование > Настройки > HTML-верх, но МЕЖДУ тегами <style>:

Код:
<style>
тут ваши коды
</style>

Как поставить номер доп.поля?
Найдите в кодах .pa-fld2 (встречается ТРИ раза)
замените красную цифру на номер вашего доп.поля
Можно, кстати, выводить на аватарке не доп.поле, а другое. Для этого вставьте вместо pa-fld2 нужный селектор поля. Например, pa-title перенесет на аватарку статус.

Где брать коды для полупрозрачного цвета фона?
Полупрозрачные цвета ставятся вот таким кодом:

rgba(255,255,255,0.5)

Синяя цифра - это прозрачность. Она может варьироваться от 0 до 1. Процент прозрачности указывается через точку, например: 0.68
Красные цифры - код цвета RGB. Чтобы подобрать другие цвета, вы можете загуглить "цвета RGB" или воспользоваться фотошопом:
https://forumupload.ru/uploads/0007/e3/f7/2/127821.jpg
В данном примере этот оттенок синего будет вставляться цифрами 46, 139, 174

Как правильно позиционировать доп.поле?
Чтобы не путаться с анимацией воспользуйтесь кодом с настройками дизайна доп.поля:

https://forumupload.ru/uploads/0007/e3/f7/2/265053.jpg

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Когда вы убедитесь, что дополнительное поле ровно "встало" на аватарку, добавляйте анимацию.
В первом варианте анимации добавляется прозрачность:

Код:
opacity: 0;
transition: all 0.6s;
-webkit-transition: all 0.6s;
}
.pa-fld2:hover {
opacity: 1;
}

Во втором варианте мы меняем высоту на 0px, а нужную нам высоту переносим в анимацию при наведении:

Код:
.pa-fld2:hover {
height: 295px; /* высота аватарки (МИНУС высота border-top) */
}

Третий вариант совмещает оба этих эффекта, поэтому нужно добавить и то, и другое.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+2

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."