Категория: CSS для MyPage

Пачка рецептов #1

Разберу css своего блога на данный момент.

Код большой.


Управление ссылками в меню навигации
.blog-nav li:hover {background: url('http://imgin.ru/images/0d4d524e5c38d45d8afabfd5a9001e75.png') repeat;}  - изменение фона при наведении
.blog-nav li:hover a {color: #fff !important;} — и цвет ссылки при наведении.

Блок комментариев
.comment .txt {font-size: 12px; font-family: Georgia;} — изменение начертания и размера шрифта
#comments a {color: #000 !important;}  - цвет ссылок в комментах

Кнопки оформления в комментариях
.mypageSkin a {background-color: #d9d0b3 !important;} — фон
.mypageSkin .mceButton {border: none !important;} — граница
.mypageSkin a.mceButtonEnabled:hover {background-color: #495879 !important;} — цвет при наведении

Блок всплывающего уведомления на страницах вашего блога
#notify, .notify_load {background: url('http://imgin.ru/images/13cba80ce82587c88a3978cfff88c19c.png') repeat !important; color: #f0f110 !important;} — фоновая картинка и цвет текста 
#notify a {color:#f0f110 !important;} — цвет ссылок

Блок управления плеером
.player i {color: #000 !important;} — цвет текста
.player .inf .progress .load, .player .volume .progress,  .player .h, .player .inf .progress {background: #000 !important;} — цвет всех элементов управления
.player .play {background-image: url('http://imgin.ru/images/a08b2d6db5d31a969740cc982124962a.png') !important;} — картинка заменяющая стандартную синюю кнопку.

Выпадающая панель свреху
#head-line {background-color: #333 !important;} — фон всегда видимой линии
#head-panel {background-color: black;} — цвет самой панели
#head-panel a {color: #fff !important;} — цвет ссылок
#mylove {background: url('http://imgin.ru/images/a96040fab793da6d780583de7f5afeb2.png') !important;} — замена картинки рекламы mylove

Фон виджетов сайдбара
.left .widget {background: url(http://f.mypage.ru/bad76d55f201c1930857707ae3b78dcf_
141fda0852aad57d0d7996d9b894b6bb.png) repeat;} — картинка фоновая
 
И теперь самое вкусно
Визитка 
#vcard {position: absolute; top: -1000px; left: -1000px;} — спрятал за границы экрана визитку
#vcard .username, #vcard .inf span {position: absolute; top:1000px; left:1000px;} — вытащил имя пользователя и статус обратно
#vcard .username {margin-top: 15px;width: 270px;text-align: center; font-size:15px !important;} — размер шрифта и центрирование ника.
#vcard .inf span {margin: 260px 0 0 80px; width: 100px;} — центрирование статуса и ширина зеленой полоски
После добавления css для визитки необходимо создать блок свободный текст и выставить его на самом верху. Туда можно вставить картинку или текст, которые будут обрамлены ником и статусом.
Для опускания статуса ниже меняйте первое значение свойства margin в строке #vcard .inf span

Пока все..) Были еще решения, но напишу позже
Обсудить у себя 24
Комментарии (54)
Отлично!
спасибо)
взял к себе на вооружение)
А как изменить цвет ников в комментариях с синюшного на другой? 
Попробуй вот это
-изменить цвет навигации(типа «ответить», «редактировать»...-

#comments .comment .user {
color: #000;
}
#comments .comment ul.actions li a {
color: #000;
}
а вот это изменить синий цвет ников

.comment .user_info span a {
    color: #000;
}
Так это у меня поменяно, сам глянь — красненького цвета, а то как было синюшного, так и осталось. И тут — черного!
ники изменились, а ответить/удалить остались синими
Всё, спасибо!!! У меня этих кодов попросту небыло)
Я рад что на пользу) Самого этот синий достал)
Извините, что не отвечал. Не было возможности написать комментарий с телефона..(

Спасибо! Это то, что я искал.

А как сделать шрифт как предыдущий в клубе «Всё для блога! Фоны, эпиграфы, аватары, дизайны!»
 А то что то у тебя покапалась и не разобрала какой именно для моего вопроса. Спрашиваю потому что шрифт нравится)))

А какой шрифт там был?

а я забыла))

Пичалище

Так у тебя-то поменян цвет надписи внизу что нового)))

А, ты про эту надпись?) здесь же… Всплывающие уведомления на страницах сайта..)

ну и как её изменить?))))

Ну написано же все)) подробности как пользоваться здесь

Спасибо, кстати у тебя значки съехали.

какие?)

и когда на них наводишь рамка вся дергается почему-то...

Так и должно быть)

Ни фига у меня при нажатии просто типо вдавливается и меняется на другой цвет, а у тебя всё дергается вместе с местом где сообщение вводишь.

да, я знаю, руки никак не дойдут поправить

а что ты сделал чтобы цвет при наведении поменять???

>Кнопки оформления в комментариях

О как много мне это говорит....))))))))

Всё нашла)))

Не подскажите, что я делаю не так: не меняется цвет Ников в комментариях. «Ответить, редактировать, удалить....» поменяли цвет, а ники нет.

Код ввела тот, что дядя Костя написал. Может я его не так ввожу? 

Комментарии кирилицей уберите полностью) Должно быть только то, что ограничено {} и то, что перед ними.

Спасибо большое) Поменялся 

Всегда пожалуйста)

можно вопросик?! как сменить шррифт в самом блоге, и посте-через редактор...

body {font-size: 10px !important; font-family: Georgia !important;}

спасибо

спасибо, кэп!
У меня даже получилось впихнуть эти коды для изменения цвета ников в комментариях….и они даже заработали! спасибо, теперь я точно знаю что не нуб. Ну по крайней мере не полный....

а как можно изменить шрифт верхней и нижней выплывающих панелей??? например, как у Хейлель ?

ах, да, еще и цвет шрифта верхней выдвигающейся панели  

Блок всплывающего уведомления на страницах вашего блога
это первое  
Выпадающая панель свреху
это второе 
не забудьте добавить к стилям оформления font-family:  с указанием нужного вам шрифта. Но помните, что шрифт должен быть распространенным.

а можно про шрифт поподробнее?  моя запись должна выглядеть вот так, примерно ? font-family:Comic Sans MS. а после чего она должна быть ? 

а за цвет большое спасибо))

а у меня такая мааленькая проблемка
я хочу сделать «статус на сайте» под свободным текстом, но никак не выходит

у меня поему то ничего не вышло с уведомлениями

oops за мой вопрос))
Можно ли мне дать код чтобы название блога было в середине ?!

#blog-name {text-align: center;}

спс

Вежливый вопрос, спокойный ответ) Не за что)

блин… посмотрела попробывала нечиго нету

body, html {font-family: background-repeat: transparent;

закрой "}"

А можно спросить как поменять фон статуса?

#status .status_arr { border-bottom-color: #цвет;}

#status em { background: #тот-же-цвет;}

Спасибо, пригодились коды)))

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети:

Каин
Каин
Был на сайте никогда
Родился: 9 Июля
admin@unohog.ru
Читателей: 187 Опыт: 0 Карма: 1
Я в клубах
I am Sherlocked Пользователь клуба
Уно Хогвартс Администратор клуба
CSS | Design Пользователь клуба
Web-Grower Модератор клуба
Sherlove Пользователь клуба
Проект "Together" Пользователь клуба
Новичкам MyPage.Ru Модератор клуба
Поддержка кнопки Пользователь клуба
Служба помощи MyPage.Ru Пользователь клуба
Много ARTа не бывает Модератор клуба
Ἔρως - Ἀφροδίτη Пользователь клуба
все 35 Мои друзья