Суп из топора (cyn_u3_monopa) wrote,
Суп из топора
cyn_u3_monopa

Дизайн блога ЖЖ: как поменять шапку блога. [для семейства стилей Expressive]

Пообещал я написать инструкцию по дизайну блога. Но начал, и понял, что выходит что-то необъятное.
Поэтому вместо талмуда расскажу по шагам, как делать самые простые вещи (вот сейчас - как шапку сменить).

Добавлено 25 марта 2011: написал о смене любых картинок: не только в шапке, а и на полях, в теле записи и т.д. Читать - по ссылке.

Итак, что нужно сделать, чтобы сменить картинку в шапке?

Уточнение: все сказанное в этом посте относится к стилям семейства Expressive. Иначе говоря, работает с 80% всех стилей ЖЖ. Как убедиться, что ваш стиль относится к этому семейству? Нажмите сюда. Вы попадете на страницу управления стилем вашего журнала - конечно, вы должны быть предварительно авторизованы в ЖЖ.
В верхнем правом углу страницы вы увидите плашку "действующее оформление" с превьюшкой вашего стиля.



Там же пишется, к какому семейству он относится. Есть слово expressive? Отлично, этот пост - для вас.

Прежде всего, подготовить свою картинку: шириной ровно 940 пикселей.
Затем выложить её на любой фотохостинг, который не запрещает показ в ЖЖ - например, на radikal.ru (при нажатии на эту ссылку она откроется в новом окне).
Пожалуйста, обратите внимание:
1. при загрузке картинок многие фотохостинги по умолчанию масштабируют их, уменьшая размер. Нам нужны полноразмерные изображения, поэтому надо отключить эту функцию, если она предлагается;
2. нам будет нужен именно и только адрес картинки (прямая ссылка на нее), а не BB-коды или коды HTML! Также убедитесь, что Вы взяли адрес полноразмерной картинки, а не её уменьшенной превьюшки.
Пример, как это правильно сделать для radikal.ru, показан ниже. Если Вы предпочитаете другие фотохостинги - действуйте по аналогии.


Итак, картинка у нас загружена и общедоступна, а её адрес мы получили.
Теперь в своем блоге идем по адресу "журнал" -> "настроить стиль журнала" (или просто нажимаем эту ссылку: http://www.livejournal.com/customize/options.bml - откроется в новом окне).
На странице настроек стиля видим несколько владок (слева, одна над другой). Переходим на вкладку Custom CSS. В большое окошко (Custom stylesheet) вставляем несколько строк кода и нажимаем кнопку "Сохранить изменения".
Это всё!
А вот и сам код:

#header  {background-image: none;}
#header-inner  {
    background-image: url("
адрес");
    height: высотаpx;
}


Вместо слова "адрес" нужно вставить ссылку на картинку (которую мы получили после загрузки на фотохостинг), а вместо слова "высота" пишем число, равное высоте нашей картинки в пикселях.
Адрес нужно, как в примере, заключать в кавычки. Между числом высоты и единицей измерения (px) пробела быть не должно: например, height: 500px; установит высоту шапки 500 пикселей.

Надоело/разонравилось/что-то не получилось? Хотите вернуть родную картинку? Заходите опять на страницу "настроить стиль журнала", там на вкладку "Custom CSS", убираете из окошка Сustom stylesheet тот код, что ввели, и нажимаете "Сохранить изменения".

На фоне новой картинки название и/или подзаголовок журнала стали неразборчивыми? Давайте выберем для них новые цвета и положение.
Для этого нам нужно будет добавить в Custom stylesheet еще несколько строк кода.
Ниже даю вариант для семейства стилей Expressive - этими стилями пользуется большинство ЖЖ-блоггеров.

#header-name {
   margin-left: горизонтальный-сдвиг-названияpx;

  margin-top: вертикальный-сдвиг-названияpx;
   padding: 0px;

}

#header-name A {
   color: #цвет-шрифта-названия;

  font-size: размер-шрифта-названияpx;
}



/* если подзаголовка блога у вас нет, всё, начиная отсюда, можно пропустить */
#header-description {
  color: #цвет-шрифта-подзаголовка;
  margin-left: горизонтальный-сдвиг-подзаголовкаpx;
   margin-top: вертикальный-сдвиг-подзаголовкаpx;
   font-size: размер-шрифта-подзаголовкаpx;
}


Итак, тут два блока кода. Верхний относится к заголовку, нижний к подзаголовку Вашего журнала.

Цвет шрифта. Сюда нужно ввести шесть знаков кода цвета (обратите внимание, знак # перед ним обязателен!). Где можно узнать коды цветов? В любом нормальном графическом редакторе - вроде Photoshop. Если под рукой его нет, можно использовать любой из онлайн-калькуляторов цвета. Например, http://johndyer.name/lab/colorpicker/ (ссылка откроется в новом окне)


Горизонтальный сдвиг названия (или подзаголовка) - укажите здесь число: на сколько точек Вы хотите сдвинуть название. Положительное число сдвинет вправо, отрицательное - влево. Например, margin-left: -20px; передвинет название на 20 точек к левой границе рамки.

Вертикальный сдвиг. Тут положительное число сдвигает вниз, отрицательное - вверх. Можно, например, подняв подзаголовок и опустив название, поменять их местами в шапке.

Размеры шрифта - понятно и без объяснений :)

Tags: web-дизайн, ЖЖ-дизайн
Subscribe

  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 106 comments