Рецепты CSS

Нашли что-то внешне радикально отличающее один блог от другого?
Скорее всего это сделано с помощью CSS.
CSS (каскадные таблицы стилей) — основной способ в современном интернете для создания оформления на страницах. Нет он не добавляет динамики или какой-либо прочей активности. Он просто заставляет простой пустой текст выглядить красиво.
Для тех, кто ничего не понимает в CSS, но очень хочет что-то поменять в своем блоге, я начал вести соотвествующую рубрику в своем блоге. 

Но поскольку рекламу оставлять просто так не красиво по отношению к клубу и не правильно по отношению к другим пользователям mypage.ru приведу вводную статью здесь)


 
CSS рецепты расчитаны на использование в специальном блоке только на сервисе MyPage.ru. Блок этот расположен  в Настройках блога -> Оформление -> Редактор CSS.
Там 2 поля ввода.
Нас интересует нижнее, которое не изменяется при смене дизайна.
Все выложенные мною рецепты сначала тестируются на моем собственном блоге или блогах моих друзей. 
Чтобы использовать рецепт просто вставьте его в указанное поле и нажмите кнопку сохранить.

Внимание!
Если различные рецепты затрагивают одни и теже блоки на вашей странице, убедитесь в разлчиности используемых свойств. 
Если имеются общие свойства и они имеют различные значения, то рецепт используемый вторым работать будет не корректно. В таком случае при неободимости совмещения двух рецептов задайте вопрос в этом посте.

Ну и сразу же

Пачка рецептов #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

Пока все..) 
Подробности и обновления здесь
Обсудить у себя 21
Комментарии (21)
фоновые картинки на стороннем ресурсе — не очень хорошо
Можно перезалить. Если наконец-то доделают на mypage загрузку файлегов для дизайна.
Почему? У меня были  - стояли ровно и хорошо
Потому что в хроме сейчас не работает загрузка файлов для дизайна.
И в опере тоже
потому что нет гарантии, что с него эти картинки не удалят
кто их удалит, если хозяин сервиса я?)
Ну если уж так хотите, еще раз повторюсь залейте картинки на mypage. Правда я не представляю как вы собираетесь залить картинки больше 600 px в ширину без изменения размеров 
Оооо, сайчас начнется «а шо это?», «а хде это? а кудаэто? а объясните мне пожалуста!!!!»
Да и пусть)
в клубе у тебя мне понравилось как всё по центру сделано) Не поделишься?)
У меня вехде так —  и в клубах, и в блоге) сейчас скину, только в личку
хорошо, спасибо)
#body {text-align: center;}
Так просто)) спасибо)
А как изменить цвет  даты отправки комментария в комментариях?
А комменты по центру не очень смотрятся, не видно ветки разговора,  всё в одно сливается.
Спасибо за пост) Надеюсь кому интересно разберутся)
Возможно это тоже кому нибудь пригодится.
Как сделать название блога по центру

#blog-name {
text-align: center;
}
Очень полезная информация! Спасибо!
Спасибо, полезно
Новый рецепт
 
Комментарий был удален
Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

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

Новичкам MyPage.Ru
Участников: 1673
РЕКОМЕНДУЕМ СЮДА ЗАГЛЯДЫВАТЬ

Служба помощи MyPage.Ru

Новости системы MyPage.Ru