Категория:
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
Пока все..) Были еще решения, но напишу позже
Обсудить у себя
25
Код большой.
Управление ссылками в меню навигации
.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
Пока все..) Были еще решения, но напишу позже
-изменить цвет навигации(типа «ответить», «редактировать»...-
#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;}
спс
Вежливый вопрос, спокойный ответ) Не за что)
блин… посмотрела попробывала нечиго нету
закрой "}"
А можно спросить как поменять фон статуса?
#status .status_arr { border-bottom-color: #цвет;}
#status em { background: #тот-же-цвет;}
Спасибо, пригодились коды)))