Техническая поддержка сервиса Quadro.Boards

Объявление

Идет поиск Хранителя форума

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

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


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Оформление профиля: отображение информации при наведении на аватар


Оформление профиля: отображение информации при наведении на аватар

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

1

Пока тестовая версия скрипта. Как только устоятся наиболее востребованные фичи (если скрипт вообще будет интересен), сделаю красивее/проще.

Скрипт позволяет видоизменять профиль в топике, скрывая все поля кроме аватара на отображая их при наведении
http://sd.uploads.ru/t/yZDU3.jpg http://sd.uploads.ru/t/wjuZI.jpg
Плюс скрипт добавляет индикацию онлайн-офлайн юзера (самая нижняя часть).

Демо http://sadhaka.rusff.ru/viewtopic.php?id=42

Пока скрипт настраивать сложно, но если появится спрос, то чего-нибудь придумаем. Сейчас все оформление заточено под то, что просили, т.е. то, что в демо.

сам скрипт
в хтмл-низ

<script>
var firstfield = "pa-fld4"; //первый средний блок
var secondfield = "pa-fld3"; // второй средний блок
var thirdfield = "pa-posts"; // третий средний блок
var fourthfield = "pa-author"; // четвертый средний блок
var rightfield = "pa-title"; // правый блок
var leftfield = "pa-fld2"; // левый средний блок

$("."+firstfield).addClass("firstfield");
$("."+secondfield).addClass("secondfield");
$("."+thirdfield).addClass("thirdfield");
$("."+rightfield).addClass("rightfield").css("margin-top", "-"+$(this).width()/2);
$("."+leftfield).addClass("leftfield").css("margin-top", "-"+$(this).width()/2);
$("."+fourthfield).addClass("fourthfield");
$(".post-author").each(function() {
$(this).css({
    "background-image": "url("+$(this).find(".pa-avatar img").attr('src')+")",
    "background-position": "center center",
    "background-repeat": "no-repeat",
    "cursor": "pointer",
    "position": "relative"
});
})
</script>


Верхняя часть скрипта - настройки, позволяющие выводить нужную информацию (поле профиля) в нужном месте.
Каждой строке соответствует своя область (они подписаны комментарием).
Изменяемой частью является часть после знака равно в кавычках

var firstfield = "pa-fld4";

здесь можно указать класс дополнительного поля (pa-fld4 - дополнительно поле №4) и поле по умолчанию (pa-posts - количество постов юзера).

Это в хтмл-верх или без тегов <style> в свой стиль
Это оформление профиля.

Код:
<style>
.post-author, .post-author ul {
	min-height: 300px;
}
.post-author {
	border-top: 5px solid rgba(0,0,0,.7);
	border-bottom: 5px solid rgba(0,0,0,.7);
}
.post-author li {
	display: none;
}
.post-author:hover ul {
	display: block;
	background: rgba(226,226,226,.8)
}
.post-author:hover ul li.firstfield,
.post-author:hover ul li.secondfield,
.post-author:hover ul li.thirdfield,
.post-author:hover ul li.fourthfield {
	position: absolute;
	width: 150px;
	left: 50%;
	margin: 0 0 0 -75px;
	display: block;
	text-align: center;
	}
.post-author:hover ul li.firstfield {
	top:0;
	height: 160px;
	border-left: 1px solid rgba(255,255,255,.9);
	border-right: 1px solid rgba(255,255,255,.9);
	overflow: hidden;
	background: rgba(18,18,18,.8);
}
.post-author:hover ul li.firstfield img {
	height: 160px;
}
.post-author:hover ul li.secondfield {
	top:160px;
	height: 60px;
	background: rgba(18,18,18,.8);
	color: #fff;
	padding: 7px 0 7px 0;
	border-left: 1px solid rgba(226,226,226,.8);
	border-right: 1px solid rgba(226,226,226,.8);
}
.post-author:hover ul li.thirdfield {
	top:234px;
	max-height: 160px;
	height: 26px;
	background: rgba(0,0,0,.1);
	color: #000;
	border-left: 1px solid rgba(255,255,255,.9);
	border-right: 1px solid rgba(255,255,255,.9);
	padding: 3px 0 3px 0;
	font: 13px/26px Arial;
}
.post-author:hover ul li.thirdfield:after {
	display: inline;
	float: right;
	margin-right: 40px;
	margin-left: -40px;
	text-transform: uppercase;
}
.post-author:hover ul li.thirdfield:after {
	content: "posts";
}
.post-author:hover ul li.fourthfield {
	top:266px;
	max-height: 160px;
	background: rgba(0,0,0,.1);
	color: #000;
	border-left: 1px solid rgba(255,255,255,.9);
	border-right: 1px solid rgba(255,255,255,.9);
	padding: 3px 0 3px 0;
	text-transform: uppercase;
	font: normal 13px/1.5 Arial;
}
.post-author:hover ul li.fourthfield a {
	text-decoration: none;
}
.post-author:hover ul li.fourthfield:after,
.post-author.online:hover ul li.fourthfield:after {
	display: block;
	margin: 0 auto;
	text-transform: uppercase;
}
.post-author:hover ul li.fourthfield:after {
	content: "is offline";
}
.post-author.online:hover ul li.fourthfield:after {
	content: "is online";
}
.post-author:hover ul li.rightfield {
	position: absolute;
	right: -34px;
	transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
	text-transform: uppercase;
	height: 15px;
	display: block;
	color: #000;
	font: normal 13px/15px Arial;
	top: 50%;
}
.post-author:hover ul li.leftfield {
	position: absolute;
	left: -40px;
	transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
	text-transform: uppercase;
	height: 15px;
	display: block;
	color: #000;
	font: normal 13px/15px Arial;
	top: 50%;
}
.post-author:hover ul li.leftfield a {
	text-decoration: none;
}
b.b, b.r, b.l {
	font-weight: normal;
	text-transform: uppercase;
	font: 12px/1.5 Arial;
	margin-bottom: 5px;
	margin-top: 5px;
}
b.r,b.l {display: inline-block;}
b.b {display: block;}
b.r {width: 70%;}
b.l {width: 30%}
</style>

Скрипт использует 3 допполя.
Одно для картинки сверху при наведении (можно использовать также поле аватара, а можно любое текстовое поле. Заполняется так (текстовое поле, название любое, запрещаем заполнять юзерам)

<img src="http://sd.uploads.ru/t/QSHsC.jpg" />


Второе для вывода доп инфы во втором блоке по центру. Заполняется так (текстовое поле, название любое, запрещаем заполнять юзерам)

<b class="b">Kris Lea</b><b class="l"> 27 </b><b class="r"> developer</b>

<b class="b">Kris Lea</b> - выводит текст во всю строку
<b class="l"> 27 </b> и <b class="r"> developer</b> выводят текст в две колонки слева и справа соответственно

Третье - ссылка на био или анкету. Заполняется так

<a href="http://ato.su/musicbox/i/0513/8e/743627.mp3">Character</a>

Необязательно использовать допполя, но чтобы получить картинку как в примере - придется.

Бонус. Скрипт скрытия названия полей (и дополнительных, не дополнительных). В выделенную строку в кавычках пишем через запятую классы полей

<script type="text/javascript">
    var A=["pa-fld1","pa-fld2","pa-fld3","pa-fld4","pa-fld5","pa-posts"]
    $(".post .post-author li").each(function (){
    for(var i=0; i<A.length;i++){if($(this).hasClass(A[i])){
    $(this).html($(this).html().replace(/^[^:]*:/,''));}};});
    </script>

+3

2

sadhaka
Добрый день. подскажите, пожалуйста, как сделать простой вариант как на этом форуме: http://homelike.rusff.ru/viewtopic.php? … =4#p651881

при наведении на аватар чтоб был текст на всю картинку.
я попробовала сделать из того, что вы показали в учебном посте - не вышло у меня(((((

Отредактировано Fisik (15.04.2015 15:02:00)

0

3

Fisik
Создаете доп.поле, запрещаете пользователям его заполнять и вставляете в него нечто такое

<div class="hprofile">sdfdgdfgfgd fgdfgdfgdfgdf gdfgdfgdf gdfgdfgdf</div>

вместо выделенного - любое Ваше содержимое

а это в свой стиль
//выделенные цифры подгоняете под свой аватар.

.hprofile {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    display: none;
    height: 122px;
    margin-top: -128px;
    opacity: 0;
    position: absolute;
    width: 120px;
    transition: ease 0.6s opacity;
    color: #fff;
    padding: 3px;
}
.hprofile:hover {
    display: block;
    opacity: 1;
}

0

4

sadhaka
что-то не выходит(((((((

к примеру у нас аватар 170*170. значит везде цифры ставлю 170?
и помещаю в Структура style.css ?

а

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

Создаете доп.поле

это в разделе "Поля профиля" создаю поле, ставлю там Тип поля - текстовое, знаком 99, не разрешать заполнять другим.

все верно? не выходит(((((

0

5

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

0

6

sadhaka
вот все сделала.
http://byfisik.rusff.ru/viewtopic.php?id=2#p2

0

7

Fisik
Теперь замените первое (второе оставьте как есть) правило

.hprofile {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 164px;
  margin-left: 4px;
  margin-top: -174px;
  opacity: 0;
  padding: 3px;
  position: absolute;
  transition: opacity 0.6s ease 0s;
  width: 164px;
}

0

8

sadhaka
ничего не поменялось((((((
на двух форумах пытаюсь.........

0

9

Fisik
Вы зачем 2 раза разместили стили? Удалите все, что у Вас там есть и установите 1 раз то, что ниже.

.hprofile {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
  color: #fff;
  height: 164px;
  margin-left: 4px;
  margin-top: -174px;
  opacity: 0;
  padding: 3px;
  position: absolute;
  transition: opacity 0.6s ease 0s;
  width: 164px;
}

.hprofile:hover {
    opacity: 1;
}

0

10

sadhaka
вышло!!! спасибо огромное!!!
а чтобы так было у всех пользователей - у них должны быть аватары 170? чтоб у всех работало

0

11

Fisik
ну, работать-то будет у всех, у кого заполнено допполе, но если аватар меньше - будет не очень красиво.

0

12

sadhaka
я поняла все. дальше доработаю.
У меня правда еще вопрос - наверное более сложный и не в этой теме, но я могу перенести, если нужно.

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

0

13

Fisik
Во-первых, у вас в хтмл-низу стили не обрамлены в теги <style></style> и выводятся в футере
http://take.ms/AJNPm
Подробнее о повторениях, не заметил.

0

14

summer
это исправила. но таблица, к примеру, все-равно съезжает когда тему какую-нибудь открываешь

0

15

Fisik
сделайте скриншот. какой браузер?

0

16

Герда

Браузер - хром.

http://sg.uploads.ru/t/CSQ0P.jpg

0

17

Fisik
найди в стиле:

.punbb .formal .container {
    padding: 10px 5px 8px;
}

замени на красное

найди в стиле:

.punbb fieldset {
    border-style: solid;
    border-width: 1px;
    margin: 0 0 1em;
    padding: 0;
}

замени красное

найди в стиле:

.punbb .fs-box {
    padding: 1em 0 0.8em;
    max-width: 860px;
}

добавь красное

под формой ответа стоит контейнер:

<div style="width: 190px; font-size: 12px; color: rgb(40, 33, 20); text-align: left; line-height: 11px; margin-left: 467px; margin-top: -322px; position: absolute;">

красное убрать

Отредактировано Герда (20.04.2015 10:06:11)

0

18

Герда
сделала. просто сдвинулось ниже
http://sg.uploads.ru/t/eyv7u.jpg

0

19

Fisik
а где этот контейнер должен висеть?
не посередине формы ответа же.

0

20

Герда
он висит внизу. но он висит и на верху где и должен. их почему-то два на экране.

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Оформление профиля: отображение информации при наведении на аватар


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC