Категория:
CSS для MyPage
Играем со статусом на сайте.
Итак, вы хотите немного исправить недоделки администрации и разместить ваш статус не в визитке.
На данный момент у нас есть 2 варианта размещения.
Первый способ
Не зависит от того, используете ли вы мой рецепт связанный с сокрытием визитки или нет. Собственно поэтому с него и начинаю.
#status {position: fixed; top:50%; bottom:50%; left:-115px; width:250px; height: 20px; background-color: #fff;}
#status {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
#status em.radius6 {opacity:0;filter:alpha(opacity=0); margin-top: -20px}
#status:hover em.radius6 {opacity:1;filter:alpha(opacity=100); z-index: 20; margin-top: -20px; background-color: #fff;}
#status em.radius6 {-moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#status .status_arr {background: url('http://imgin.ru/images/users/doranych/dfae8d128027269bab1efe3128eb83ae.png') no-repeat; background-position: center; margin:0 !important; z-index: 0 !important; border: none !important; width: 250px; height: 20px;}
#status:hover .status_arr {background: none !important;}
Этот код размещает закрепляет ваш статус непосредственно посередине страницы по левому краю, скрывает его за подписью «Статус» и отображает при наведении.
Второй способ
В отличие от первого случая, этот код требует адаптации при использовании без рецепта «Визитка».
#status {position: absolute; top:740px; left:1731px; width:250px; height: 20px; background-color: #fff;}
#status em.radius6 {opacity:0;filter:alpha(opacity=0); margin-top: -20px}#status:hover em.radius6 {opacity:1;filter:alpha(opacity=100); z-index: 20; margin-top: -20px; background-color: #fff;}
#status em.radius6 {-moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#status .status_arr {background: url('http://imgin.ru/images/users/doranych/dfae8d128027269bab1efe3128eb83ae.png') no-repeat; background-position: center; margin:0 !important; z-index: 0 !important; border: none !important; width: 250px; height: 20px;}
#status:hover .status_arr {background: none !important;}
Отличается от предыдущего лишь местом расположения элемента. Статус будет находится справа вверху под выпадающей панелью mypage.
в том случае, если вы не используете рецепты «Визитка» необходимо изменить следующие значения
top:740px и left:1731px на top:-260px и left:731px в первой строке кода т.е. у элемента #status.
Обсудить у себя
10
На данный момент у нас есть 2 варианта размещения.
Первый способ
Не зависит от того, используете ли вы мой рецепт связанный с сокрытием визитки или нет. Собственно поэтому с него и начинаю.
#status {position: fixed; top:50%; bottom:50%; left:-115px; width:250px; height: 20px; background-color: #fff;}
#status {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
#status em.radius6 {opacity:0;filter:alpha(opacity=0); margin-top: -20px}
#status:hover em.radius6 {opacity:1;filter:alpha(opacity=100); z-index: 20; margin-top: -20px; background-color: #fff;}
#status em.radius6 {-moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#status .status_arr {background: url('http://imgin.ru/images/users/doranych/dfae8d128027269bab1efe3128eb83ae.png') no-repeat; background-position: center; margin:0 !important; z-index: 0 !important; border: none !important; width: 250px; height: 20px;}
#status:hover .status_arr {background: none !important;}
Этот код размещает закрепляет ваш статус непосредственно посередине страницы по левому краю, скрывает его за подписью «Статус» и отображает при наведении.
Второй способ
В отличие от первого случая, этот код требует адаптации при использовании без рецепта «Визитка».
#status {position: absolute; top:740px; left:1731px; width:250px; height: 20px; background-color: #fff;}
#status em.radius6 {opacity:0;filter:alpha(opacity=0); margin-top: -20px}#status:hover em.radius6 {opacity:1;filter:alpha(opacity=100); z-index: 20; margin-top: -20px; background-color: #fff;}
#status em.radius6 {-moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;}
#status .status_arr {background: url('http://imgin.ru/images/users/doranych/dfae8d128027269bab1efe3128eb83ae.png') no-repeat; background-position: center; margin:0 !important; z-index: 0 !important; border: none !important; width: 250px; height: 20px;}
#status:hover .status_arr {background: none !important;}
Отличается от предыдущего лишь местом расположения элемента. Статус будет находится справа вверху под выпадающей панелью mypage.
в том случае, если вы не используете рецепты «Визитка» необходимо изменить следующие значения
top:740px и left:1731px на top:-260px и left:731px в первой строке кода т.е. у элемента #status.
Хотя бывает важной информации не достаёт!..
...
Интересная штукенция. Только вот второй вариант не срабатывает.
Пробовал и top left изменить — ни фига)
Тогда как мне быть?!
Ясно!
Жаль нет скринов, чтобы посмотреть. Приходится всё применять.
у меня статус сверху выпадает)
О, даже сразу и не увидеал) Интересно-интересно)
а ты можешь всю визитку загнать в всплывающее окно?
привет, Каин. я что-то игрался в css со статусом, и он у меня начал пропадать при наведении на него курсора. что делать?
задать такие же свойства css для псевдокласса :hover
а как подписан тот класс, который отвечает за дизайн статуса?
искал #status, но не могу найти.
сам прописал в css
#status {color:#505050;}
#status:hover {color:#505050;}
ничего не поменялось
#status {background-color:#505050;}
#status:hover {background-color:#505050;}
меняется цвет за формой со статусом
.widget a:hover {color: white !important;} вот причина ваших проблем. уберите. это в строке 94 доп.кода
спаибо