Рамка или иконка OnLine OffLine [обсуждение скрипта]

Первое сообщение в теме :

Туториал находится тут: https://help.forum2x2.ru/t14890-topic

Реально ли сделать так на движке phpBB2?

Спойлер:

Даночка, спасибочки что открыла вновь темку. Вот привела меня нечистая найти эту тему и устроить кавардак у себя на форуме)))
Короче я все сделал так как написано у тебя вот тут

Sayra-hafize, будет так - вариант и для BB2, и для Pun:

1. У меня наложились картинки оф и он одна на другую
Но спасибо недавней теме про это мне удалось это дело убрать

2. У меня у всех пользователей конкретно уменьшились аваторки и стоит скобка

показываю скрин



все авки съехали в право (может из за скобки)

над головами, у одной авки звезды у второй фрукты. Все они были ровненько над авками и сами авки были большего размера . Даночка помоги плиз , так нравятся рамочки что не хочется удалять

Christian, уточню один момент: в Вашем случае это - не рамки, а кнопки. Аватары надо принудительно подгонять под один размер из-за неизменяемых размеров именно у рамок, а в случае с кнопками такое не нужно (можете посмотреть у меня на форуме - все авки разные, кнопки офф и он на своих местах)
Т.е. вот это

Код:

.ava img {
width: 134px;
height: 134px;
margin: -143px 5px 12px;
}

смело удалите.

все авки съехали в право (может из за скобки)

Они не съехали, они выровнялись по центру. Это задано кодом:

Код:

.ava {
text-align: center;
}

чтобы кнопка оказалась точно по центру под аватаром.


Возможно, я не совсем поняла, но:

У меня наложились картинки оф и он одна на другую
Но спасибо недавней теме про это мне удалось это дело убрать

Зачем? Они должны накладываться )

Даночка из этого кода??? удалить? который вставляется в CSS ?

Код:

.ava {
text-align: center;
}
.prfav {
display:block;
position: relative;
width: 87px;
height: 13px;
background: transparent url("http://i27.servimg.com/u/f27/14/67/67/89/kg13-515.png") no-repeat;
margin: -7px auto 0;
}
.prfav img {
display:block;
position: relative;
}

Я удалил вот это
width: 87px;
height: 13px;
Кнопка оффлайн ваще пропала. Кнопка -рамка ОНЛАЙН съехала в левый край)) отошла от авки вниз И эта проклятущая скобка))


и у меня нету такого margin: -143px 5px 12px;

Возможно, я не совсем поняла, но:
У меня наложились картинки оф и он одна на другую
Но спасибо недавней теме про это мне удалось это дело убрать
Зачем? Они должны накладываться )

Это я не так объяснил)) У меня кнопка онлайн просто была другая. Я изменил картинку и все стало отлично

Лишняя скобка скорее всего из шаблона. Проверьте там!

Вы сказали про принудительное масштабирование аватар - оно происходит только в первом варианте кода для CSS, в Вашем должно быть все в порядке. К сожалению, не могу вживую посмотреть, как это выглядит.

Я удалил вот это
width: 87px;
height: 13px;

Верните обратно! Оно не из свойств аватара .ava img , а от блока кнопки .prfav - с ним все в порядке!

Вернул CSS оффлайн появилась ну и все сдвинуто. Честно я не понимаю что надо делать )) Дана мы вроде на ты?

Пропала Дана))
короче что я сделал
1. Переписал шаблон -скобка пропала. ИСПРАВЛЕНО))
2. В CSS я вписал код предназначенный для РАМКИ

Код:

.prfav {
display:block;
position: relative;
width: 150px;
height: 150px;
background: transparent url("http://i27.servimg.com/u/f27/14/67/67/89/kg13-515.png") no-repeat;
}

.prfav img {
display:block;
position: relative;
}

только изменил адрес img на кнопку
В итоге получилось ава как и была на месте , кнопка онлайн оффлайн в крайнем левом углу и отступает от картинки вот как тут

Скорей всего пока так и оставлю .
3. Если добавить в CSS вот этот код

.ava {
text-align: center;
}

то, аватар уезжает на середину, кнопка офф онл остается в крайнем левом углу. Размеры авак не изменяются. Слава богу ))

Можно мне вживую посмотреть? Сними техработы ненадолго, пожалуйста.

ок чичас открою

Откуда у кнопки такие размеры?

Код:

width: 150px;
height: 150px;

у тех, что установлены сейчас должны быть

Код:

width: 87px;
height: 13px;

Но если будешь менять кнопки - тогда да, подгони ширину width и высоту height под их габариты своих кнопок

И пропал отступ сверху -

Код:

margin: -7px auto 0;

надо вернуть в свойства

Весь код для кнопок слегка отличается от кода рамок

Код:

.ava {
text-align: center;
}
.prfav {
display:block;
position: relative;
width: 87px;
height: 13px;
background: transparent url("http://i27.servimg.com/u/f27/14/67/67/89/kg13-515.png") no-repeat;
margin: -7px auto 0;
}
.prfav img {
display:block;
position: relative;
}

но из него нужно удалить только первые строки про text-align: center;

все изменил как ты сказала
поставил код

Код:

.prfav {
display:block;
position: relative;
width: 87px;
height: 13px;
background: transparent url("http://i27.servimg.com/u/f27/14/67/67/89/kg13-515.png") no-repeat;
margin: -7px auto 0;
}

.prfav img {
display:block;
position: relative;
}

посмотри че вышло

Ну вот, почти так, как должно быть ))

Поскольку выравнивания аватара по центру профиля нет, то и кнопки онлайна по центру не получится. Но можно ее поставить "почти" по центру - если задать отступ слева не auto, а конкретную - 30px

Измени строку

Код:

margin: -7px auto 0;

на

Код:

margin: -7px 0 0 30px;

когда я ставлю этот код

Код:

.ava {
text-align: center;
}

то и рамка появляется у меня под бородой))) но сама авка уезжает в центр

а если удалить text-align: center; и оставить только .ava
то пропадает кнопка оффлайн

Ну оно смотрится неплохо на авке 150*150 а на меньшей ваще ужас))

на
Код:
margin: -7px 0 0 30px

сейчас попробую

Ну да ))) у меня онлай прямо на бороде висит))) а у маленьких авок всеравно торчит... Видимо надо им авки менять

а если удалить text-align: center; и оставить только .ava
то пропадает кнопка оффлайн

Надо удалять весь блок с этим содержимым.

Код:

.ava {
text-align: center;
}

Он - одно целое, это название класса и описание его свойств.

Даночка)) я уже удалил)) Это я эксперементировал)) и тебе докладывал)) Пожалей свою умную головушку))) . Спасибо тебе огромное . С горем пополам получилось кое что ))

Да ничего, ей полезно - будет шустрее соображать )))

Рада, что получилось! К сожалению, способ не универсальный при разной ширине аватар. У себя я его не под аву, а под рамку вокруг авы ставила - так более-менее ровно получается.

поставил размеры
margin: -7px 0 0 -5px
и получилось ваще хорошо)) маленькие авки ваще отлично смотрится. Ну а для большой тоже нормально )) На бороде не висит и ладно)))
Даночка а такие ваще кнопки нужно самому делать? (ну или просить кого) или есть уже где то шаблоны?

На бороде не висит и ладно)))

Вообще - в Сети попадаются, но не всегда комплектами. Надо искать по ключевым словам free button online offline
Но в идеале - сделать / заказать самому.

Даночка а у меня ентая кнопочка (он/оф) ушла из под картинки и теперь внизу (как было в старом варианте ) Я в кодах не лазил и ничего не менял.

Может кому нужны рамочки на русском?

Krest пишет:Может кому нужны рамочки на русском?

А для BB3 еще нет варианта?

Есть вот такой вариант, исключительно под BB3 - на верхнем левом уголке аватара располагается небольшое украшение в виде еловой лапы. Когда пользователь выходит в онлайн, на лапе появляются праздничные шарики:

Спойлер:

Скрипт загружается в любой виджет на главной странице:

Код:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".postprofile dl dt img").wrap('<div class="user2"></div>');
jQuery(".user2").prepend(jQuery('<div></div>'));
jQuery(".online .user2 div").prepend(jQuery('<img src="http://i61.servimg.com/u/f61/14/71/65/95/jhk610.png" alt="Я тут!" Title="Я тут!" class="rec" />'));
});
</script>

Теперь стили к нему - загружаются в персональную CSS:
- В контейнеры .user2 div устанавливаем фоновое изображение с еловой лапой.
- Изображению шарика назначаем класс rec и абсолютное позиционирование (чтобы он лежал поверх ветки).
- У сообщений с классом online отключаем фоновое изображение с надписью "онлайн", которое стоит по умолчанию

Код:

<style type="text/css">
.user2 div{
position:absolute;
height:134px;
width:93px;
background: transparent url("http://i61.servimg.com/u/f61/14/71/65/95/lekjhf11.png") no-repeat top left;
}
.rec {
position:absolute;
}
.online {
background-image:none;
}
</style>

Ух ты, спасибо! То, что надо!