Юлия (ex_j_u_l_i_) wrote in proba_dizainov,
Юлия
ex_j_u_l_i_
proba_dizainov

Categories:

Простой вариант установления фона в блоге.

В этом посте я напишу про то, как менять ФОН в блоге - по-простому, без кодировок и изменений в CSS. Возможностей здесь достаточно много. Например, свой нынешний вид блога, вот этот:



Я получила из базового шаблона вот такого вида:



Итак, как получить такую разницу между базовым шаблоном и желаемым вариантом,  как установить фон и нужные цвета?
Расскажу со скринами и покажу на примерах.

Примеры, сразу оговорюсь, приведены именно для наглядности, поэтому особо подбирать в них цвета и устанавливать высокохудожественные фоны я не стремилась. Главное - схему понять :)

Итак, идем на основную страницу журнала и из опций, как показано ниже, выбираем "Выберите стиль журнала". По ходу дела отметьте про себя и опцию пониже "Настройте стиль журнала" - через нее в уже выбранный шаблон вносятся отдельные изменения.
Нажали на "Выберите стиль журнала".



Вышел набор шаблонов.
Это далеко не всё, что предлагается в ЖЖ. Чтобы увидеть сразу весь спектр, выбираем, как показано на схеме ниже, пункт "All" (ВСЕ) и ждем, пока загрузится страница.



Вариантов великое множество (кстати, интересно даже как-нибудь посчитать, сколько же всего..) Но для ПРОСТОЙ, без применения кодов, смены фона подходят только некоторые.

Например, Flexible Squares. Всё семейство шаблонов этого типа можно увидеть, нажав на эти слова в первом же встреченном из "All". Посмотрите на схему - в двух нижних в левом углу фон не ставится. В остальных - без проблем. Подбираем себе шаблон желаемого оттенка и нажимаем на "Применить дизайн".




Новый дизайн журнала установлен.




Теперь нажимаем на "Настройте стиль журнала".

Самый первый показатель того, что фон в шаблоне ставится легко - наличие в опциях слова "Стиль". Здесь он есть - значит, идем правильной дорогой...


Откуда брать рисунок для фона?
Источников много.
Я, например, часто беру отсюда.
Приведу пример.
Найдем что-нибудь из темы "синие листья", под цвет выбранного варианта...
Жмем на "скачать фон".



Получаем чистую картинку, без надписей и прочих лишних вещей. Это важно. Если на странице есть еще что-то, кроме картинки, фон не поставится. Копируем адрес из адресной строки...



Жмем на "Стиль" в опциях настройки, прокручиваем страницу пониже и видим место для вставки адреса фона "Background image URL". Вставляем туда скопированную ссылку.



Жмем внизу на "Сохранить". Смотрим в журнал - фон появился.



Другое семейство шаблонов, в которых легко установить фон - Generator.





Выбираем вариант с желательным оттенком...



Находим понравившийся фон.



Скачиваем, копируем адрес...




Вставляем в "Background image URL" (опция "Стиль"), сохраняем. Получаем:





Еще один тип шаблонов - Haven. Лично мне вообще очень нравится :) Информативностью и легкостью внесения изменений.





Выбираем какой-нибудь по вкусу, ставим.
Изначальный вариант:




Подыскиваем картинку для фона...






Копируем ссылку, ставим в "Background image URL", сохраняем, получаем:





Кстати, не забываем про другие опции.
Можно выбрать цвет полосы в верхней части блога: посветлее, потемнее или собственного цвета.
Установим язык...
Прикинем, сколько записей нам удобнее видеть на одной странице блога и френдленты.
Можем сделать ту часть, где размещаются посты, пошире или поуже.
В общем, играем с настройками.










Экспериментируем, пока не надоест))




Другая группа шаблонов, где легко менять фон - Disjointed.




Ставим....




Выбираем картинку на фон...



Получаем:



Цвета не очень нравятся? Это можно корректировать.
Заходим в любую таблицу цветов HTML, например, сюда.
Подбираем нужный цвет, копируем его код...



Вставляем в нужное место на вкладке "Стиль", "Цвета" (Colours).




Получаем новый вариант.




Еще пример.
Было...




Стало:




Фон легко ставить также в шаблоне OSWD:


Например.
Было...




Нашли картинку, скопировали адрес, вставили, сохранили....



Получили:



Цвета там тоже можно понастраивать.


Другая семья шаблонов - A Novel Conundrum:





Было....



Стало:




Или попробуем ракушки...



Вот так.



Или так.





Ну и еще вариант.
"Любой каприз" практически...




Вообще, конечно, ставить картинку можно любую, из любого источника. Правда, советую запостить ее к себе в блог, для верности - можно в режиме "Видно только мне". Так она никуда не денется, ведь разные сайты живут по-разному: нынче здесь, а завтра там, адрес у картинки изменится, где ее потом искать. А так - всегда под рукой.
Пример.
Закачиваем картинку себе в пост (обычным способом, через стандартный ЖЖ-загрузчик). Жмем на нее, чтобы открылась во всей красе, без надписей и прочего.




И дальше все как обычно: копируем адрес, вставляем, сохраняем.

Получается, например, вот так:



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


body{

background-color: #fff;

background-image: url('http://www.lenagold.ru/fon/uzor/arh/arh21.jpg');

background-repeat: repeat;

background-position: top center;

background-attachment: fixed;

}
 


Где http://www.lenagold.ru/fon/uzor/arh/arh21.jpg - изменяемая ссылка-адрес фона (ставьте свою), а fixed как раз и означает, что фон фиксируется.

Ну вот. Примерно так.
В принципе, есть еще и другие группы шаблонов, где ставить фон без кода можно легко и просто. Определяется это наличием в опциях настройки вида закладки "Стиль".

UPD от [info]bragori :
"Поигрался" с настройкой стиля: http://pics.livejournal.com/bragori/pic/0007c3h7.png

1."Disable customized comment pages for your journal" - Отключить настраиваемые страницы с комментариями:
No - стоит по умолчанию. Если выбрано это значение, то отдельные страницы (страницы с постом и комментариями к нему) будут отображаться в вашем стиле. Пример: http://j-u-l-i-a-i.livejournal.com/151360.html
Yes - отдельная страница будет отображаться без вашего стиля. Пример: http://bragori.livejournal.com/67968.html

2. "Content area width
Don't forget to include units; e.g. px, %" - Ширина области содержания. Не забудьте указать единицы e.g. px, %.
Здесь можно задать ширину "основной части" журнала. Величину лучше задавать в процентах - другие пользователи, с другим разрешением экрана, будут видеть ваш журнал по-своему. Если размеры задать в пикселях, то на экране с большим разрешением ваш журнал станет "узким", а на экране с меньшим разрешением им придется пользоваться горизонтальной прокруткой.

3. "Alignment of the content area" - Размещение области содержания.
Куда (влево/вправо/по центру) "основная часть" журнала "прижмется".


Желаю удачи! Если есть какие-то вопросы, спрашивайте.
Кстати, перед экспериментами над видом своего блога лучше подстраховаться - сохраните название того стиля, что у вас стоит сейчас, чтобы при желании можно было легко к нему вернуться.
Tags: Простая смена фона
Subscribe

  • Flash-заставка

    Спасибо gudi_gudi за полезную ссылку! О том, как создать flash-заставку для сайта или страницы, причем гуманно небольшого размера, читаем…

  • Сохраняем ЖЖ

    С разрешения многоуважаемой j_u_l_i_a_i - еще один пост с опытом освоения программы. У меня Windows XP, опыт проводился под…

  • Как сделать скриншот

    С удовольствием и благодарностью выкладываю пост уважаемого bragori. Как сделать скриншот, то есть снимок экрана. Описание под Windows…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 15 comments

  • Flash-заставка

    Спасибо gudi_gudi за полезную ссылку! О том, как создать flash-заставку для сайта или страницы, причем гуманно небольшого размера, читаем…

  • Сохраняем ЖЖ

    С разрешения многоуважаемой j_u_l_i_a_i - еще один пост с опытом освоения программы. У меня Windows XP, опыт проводился под…

  • Как сделать скриншот

    С удовольствием и благодарностью выкладываю пост уважаемого bragori. Как сделать скриншот, то есть снимок экрана. Описание под Windows…