Бэкграунды и фоны для сайта

Меняем фон в адаптивном дизайне ucoz 1090

cloom — Thu, 13 Feb 2014 11:34:34 GMT

В 2014 году Ucoz выпустил в свет несколько новых шаблонов для бесплатного использования. Эти шаблоны доступны в Общих настройках в админ-панели любому у кого есть сайт на платформе Ucoz или аккаунт в Uid.me.

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

Как изменить фон в адаптивном дизайне ucoz 1090

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

Фон в новом дизайне ucoz 1090 прописан в Таблице стилей (см. скрин):

body.t-body {
background: url(/.s/t/1090/bg.jpg);
}

как видим это просто ссылка на какую-то картинку. Теперь зная это, мы можем заменить данную картинку своей или сделать градиентный фон либо заменить цветом, хотя если замещать цветом то этот код лучше просто удалить и прописать цвет выше, где задается цвет body (в нашем примере это белый цвет background: #fff;) - смотрите скрин.

Как поменять задний фон для шаблона 809 на сайте ucoz

cloom — Thu, 13 Dec 2012 15:16:13 GMT

Фон 809 шаблона 809 на сайте ucoz, немного более сложно устроен, так как состоит из нескольких частей. Про все эти части говорится в самом начале Таблицы стилей 809 шаблона ucoz.

Я сейчас попробую здесь показать вам тот кусок CSS кода и дать пару комментов, по поводу каждой строчки, поясняя по ходу, за что отвечает каждый конкретный тег, чтобы вы смогли лучше ориентироваться и не удалить случайно то, что не не надо .

/* General Style */ body {margin:0px; padding:0px; background: #8bae24;} .wrap {background: url('/.s/t/809/1.png') repeat-x #8bae24;} .wrap1 {text-align: center; background: url('/.s/t/809/2.png') center repeat-y; } .contanier {background: url('/.s/t/809/3.jpg') top center no-repeat; text-align: center;}

Как видите, вначале весь задний фон заливается приятным зеленым цветом #8bae24. Следующий блок, покрывает body поверх вертикальным градиентным фоном в виде рисунка 1.png, его размеры = 1px × 900px (в масштабе 1px × 625px) и заполняет он всю поверхность слева направо.

Далее, формируется подложка под контент сайта или его "тело". Подложка состоит из повторяющихся горизонтальных рисунков 2.png и большой картинки 3.jpg

Из крупных рисунков используемых в формировании фона и дизайна контентной части шаблона 809, вам следует знать еще о футере. Иначе если вы поменяете все картинки описанные выше и не замените нижнюю часть сайта. Новый шаблон будет выглядеть нелепо. Найдите упоминание в Таблице стилей рисунка 4.jpg и замените на свой. 4.jpg встречается несколько раз при описании стиля для разных модулей шаблона 809, а выглядит он так:

Теперь, чтобы поменять фон, можно брать оригинальные картинки и редактировать их в любой графической программе, меняя цвета. Или замещать картинки на заливку цветом. Экспериментируйте, но предварительно сохраните код стиля у себя на компьютере.
Пример, как может выглядеть код (я показал не весь) после ваших изменений я привел ниже. Для своих картинок вы можете создать папку img в файловом менеджере и перенести в нее новые изображения для обновленного дизайна 809.
/* General Style */ body {margin:0px; padding:0px; background: ВАШ ЦВЕТ;} .wrap {background: url('/img/1.png') repeat-x #ВАШ ЦВЕТ;}

Иногда совсем не обязательно кардинально менять шаблон ucoz, порой достаточно поискать среди готовых. Более современные шаблоны вы сможете найти в разделе "Новые"

Зеленый, табличный ucoz дизайн 963, меням фон

cloom — Sun, 18 Nov 2012 15:26:12 GMT

Шаблон ucoz под номером 963 вызывает ностальгию. Когда-то я пробовал на нем сотворить сайт. Это было в первые дни моего знакомства с системой Ucoz. (Блин, все мне в укозе нравится кроме его названия, как ни назови хоть юкоз, хоть укоз.)

Шаблон 963, табличный и состоит из графических элементов. То есть рисунков, которые формируют внешний вид и дизайн шаблона. Это может вызвать осложнения у вас если вы захотите поменять фон в дизайне ucoz 963.

Фон шаблона описан в теге body, изменив значение цвета фона мы можем получить неприглядную картинку. И все потому, что картинки из которых состоит 963-й дизайн привязаны к этому цвету #144E56.

Решение данной проблемы - избавление от всех рисунков являющихся элементами дизайна или редизайн и замена всех рисунков в шаблоне, что мало кому может понравится.

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

Итак, код фона выглядит так: можете посмотреть на скрине его расположение.





Теперь я поменяю фон на белый  и посмотрим что из этого получится.




А причина как раз в этих картинках из которых и состоит шаблон 963.



Эьл элемент блока меню, его верхняя часть. Узнали? Так что решайте, стоит ли менять фон в данном шаблоне, выбрать ли другой или сделать глобальный редизайн 963 шаблона. Ну и пишите, если зайдете в тупик или возникнут непреодолимые сложности.