Войти Регистрация
Блоггеру на заметку

Вопросы по работе с компьютером и программами для него.

21448 участников, 11741 тема

Установка шаблона, состоящего из картинки-фона

Кроме шаблонов, описанных в предыдущем посте (в формате xml), часто можно встретить шаблоны в виде картинки-фона для блога (+ иногда прилагается картинка для заголовка). Особенно популярны такие шаблоны, как мне показалось, среди скрапбукеров…

Примером может служить мой шаблон (у меня в блоге они будут под тегом "simple") из элементов наборов от Bel Vidotti Scraps:

image

Скорее всего, вместе с картинкой-фоном будет и инструкция по установке. Я постаралась расписать очень подробно (уже публиковала инструкцию в своем блоге, теперь просто копирую сюда и немного дописываю):

  1. Нажмите "Настроить" в правом верхнем углу вашего блога (вы должны быть залогинены!)
  2. Жмите Выбор нового шаблона и установить шаблон Minima! (Вы не потеряете ваши виджеты/панели). Сохраните.
    image
  3. Идите в Элементы страницы и жмите "Добавить гаджет"
    image
  4. Найдите "HTML/JavaScript" и нажмите "Добавить в блог"
    image
  5. В окне настроек вставьте следующий код:
    <style type="text/css">body {background-image: url(адрес картинки); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }</style>
  6. Выберите понравившийся шаблон и скопируйте ссылку на него. Именно эту ссылку и надо указать в коде вместо слов "адрес картинки".
    image

Кроме указанного кода я буду еще иногда советовать указать цвет фона страницы. Для этого перед закрывающей скобкой } надо будет дописать:

background-color: #код_цвета;

Понятно, что вместо слов “код_цвета” надо будет подставить выбранный/предложенный цвет.

Для установки картинки-заголовка (другими словами, “шапки” блога), которые часто предлагаются вместе с картинкой-фоном (в одном стиле), заходите в пункт “Элементы страницы” и у заголовка нажимайте “Изменить”.

image

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

image

В чем минусы такого подхода (использование фоновой картинки)?

  • На мониторах с разным разрешением будет смотреться по-разному! У кого-то картинка обрежется, у других будут пустые места.
  • Размер, а, следовательно, и вес картинки довольно велик. Если соединение медленное, то картинка будет грузиться довольно долго.
  • Изображение-фон расположено на неком фотохостинге, у которого могут быть перебои в работе или он может вообще заблокировать аккаунт автора шаблона/прекратить существование/быть взломанным (надеюсь, конечно, что не будет таких неприятных моментов)… Так что на всякий случай сохраните фон себе на компьютер (загрузите на свой фотохостинг…)

Зато такой шаблон проще сделать самим (а, точнее, проще объяснить, как это делать!), но об этом в другой раз.

Вот, вроде и все, о чем хотела рассказать… Возможно, что-то еще вспомню и допишу… Если что-то упустила – свистните :)

Комментарии

Россия, Москва

ДД! Оля а где посмотреть шаблон?

Беларусь, Гродно

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

Россия, Москва

и как его использовать, скачать?

Беларусь, Гродно

тут все прописано как раз
если хотите именно этот, то использовать ссылку на него, когд прописать, как написано

если другой, то походите по ссылкам в посте, много написано

Россия, Москва

не могу понять, запуталась совсем, мне нужно создать свой макет в фотошоп, я правильно понимаю, тогда какие размеры использовать? а потом его загружать, или я не правильно понимаю?

Россия, Москва

я смогу с его помощью сделать себе дизайн блога?

Россия, Кемерово

Оль, теперь не могу понять, как сделать шапку фона,чтобы у картинки небыло фона)) то есть чтоб видны были только элемнты (созданные в ФШ) на общем фоне.

Вот у меня щас так... А мне надо,чтоб белого фона в шапке не было http://scrapfantazy.blogspot.com

Вопрос снят))))))))) сохранила в PNG

Беларусь, Гродно

гг

Россия, Кемерово

Оля, привет. Вставляю фон...но он вставляется не как фон,а на месте гаджета ( внизу в полосе или там где,выбрала гаджет), что не так? еще дело в том,что первые 2 пункта у меня совпадают с вашим описанием.....не могу найти,где сделать новый шаблон...

Беларусь, Гродно

а ссылочку? и подробно, как вставляете?

Россия, Кемерово

вставлять скртншоты не умею.. на пальцах объясню...

С ссылкой все в порядке,раз картинка вставляется,но не туда,куда надо. Она у меня в  размером 1890х1024. Как я пыталась е загрузить:

1. Открываю блог,в правом верхнем углу "Настроить"

2. открывается вкладка "Дизайн" (макета нет,но вид,как у вас в пункте 3.

3. Где у вас стрелочка (гаджет внизу), ыбираю "HTML/JavaScript", ввожу ваш код, а на место УРЛ свою ссылку ( с радикала).

в итоге эта картинка вставляется в то место, где расположен гаджет ( в данном случае как в вашем примере - внизу)

ну и ссылка http://www.radikal.ru][IMG]http://s017.radikal.ru/i410/1111/a3/3c2da28d9cdf.jpg - это вторая строчка радикала ("Картинка в тексте"), может надо вот эту "Картинка на странице просмотра полноразмерного изображения"

ПЫСЫ: все получилось, картинка встала фоном,но она слишком маленькая (чуть выходит за границы текстов), как ее побольше сделать?

Наверное, дело в том, что радикал сжал картинку очень сильно. Куда ее можно еще залить,откуда код вставить?

Редактирую по ходу экспериментов.

и так на радикале сняла галочку с "Уменишить" и все получилось!!!!!!!!!!!!!!!!!!!!!!!!

Беларусь, Гродно

я ссылку на блог просила, чтобы увидеть, что не так
но вопрос снят, как понимаю?

Россия, Кемерово

да, Оль, все  норм.. воот что вышло)  

Россия, Киров
СПАСИБО!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Я это сделала! с пятидесятой попытки!
Думала надо скобки убирать, оказалось - нет
Беларусь, Гродно
поздравляю! похвастаешься?
Беларусь, Гродно

чудесно! одно НО: по бокам часть фона под текстом и плохо читать из-за этого

чтобы исправит, не обязательно перерисовывать

можно найти свойства элемента #main-wrapper и прописать у него свойство padding-left: 40px;

и потом у .sidebar прописать padding-right: 30px;

Россия, Киров
спасибо, получилось!
Беларусь, Гродно
отлично!
Россия, Киров
Оль, ты гений!
Беларусь, Гродно
неа :)
Россия, Киров
новой строчкой написать?
Россия, Киров
сейчас попробую, спасибо большое!
Турция, Анталия
Олечка,спасибо большое тебе,второй день бьюсь над шаблоном,2 раза уже вообще закрыть блог хотела.сегодня все начало получаться,наверно просто вчера невыспалась.хочется конечно сделать шаблон самой,но пока поставила готовую картинку.Оленька спасибо что ты есть,и за твое терпениеimage
Беларусь, Гродно
благодарю за комментарий!
Россия, Москва

Оль, я плачу. Не получается. Застряла на пункте 6. может я адрес не тот вставляю. ты не могла бы пример привести этоф формулы. например, как у тебя....

Беларусь, Гродно

вот например так: body {background-image: url(http://i202.photobucket.com/albums/aa281/serenkaja/blogspot-designs/doro-merryflower2.jpg); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }

Оля, у меня тоже не получается((( Я на пикассу загрузила, а дальше что? Счас плакать буду(((

Беларусь, Гродно

открой картинку, правой кнопкой по ней и "copy image url" или как-то так

и используй этот адрес, как я писала в посте

я с пикассой не дружу))) я на фотобукет залила)))

Беларусь, Гродно

блин, ББ ссылку преобразовывает

Украина, Черновцы

Оль, и у меня не получается...

Украина, Черновцы

Урря! Получилось!!! Пасибочки за "блоггерские заметки"!!!!

Беларусь, Гродно

на здоровье

Италия, Римини

Оль, а какого размера файл (картинка фон) должен быть?  и обязательно ли "шапка" должна идти отдельной картинкой или можно сразу сделать её на фоне?

Беларусь, Гродно

в среднем 1280х960 (были и другие варианты)

шапка должна быть отдельно. т.к. фон не движется, а шапка должна сверху оставаться

Италия, Римини

это в пиксилях? значит ориентироваться на эти цифры? Или ты об этом ещё будешь писать подробнее?

Беларусь, Гродно

да, в пикселях... я видела варианты 1280х800 и 1280х1024... сама делала, как и писала выше...

белую область - примерно 700 пикселей шириной

Италия, Римини

а какой из этих вариантов оптимальнее всего на твой взгляд? Белую область? в смысле центральную?

Беларусь, Гродно

я выбрала 1280х960px

да, центральная - не могла подобрать слово

Италия, Римини

спасибо:)

а по весу есть какие-то ограничения?

Беларусь, Гродно

не за что

по весу ограничений нет, но чем больше весить будет, тем дольше грузиться будет

Италия, Римини

Оля , забыла ещё про размер "шапки" спросить:)
Я тебя тут замучила вопросами, ты наверное об этом писать отдельно собираешься?!

Беларусь, Гродно

ничего, легче написать будет

шапка - примерно как ширина центральной области, чуть меньше... да и все на усмотрение :)

покажешь труды потом свои?

Италия, Римини

ну конечно:) пока ещё всё на уровне экспериментов, очень приблизительно:) Хотелось сразу свой шаблон сделать, чтоб потом не менять ничего.