Как сменить картинку блока в стандартном шаблоне №886, uCoz
|
|
[1] likbezz [19.12.2012, 18:13] |
Как сменить картинку блока в стандартном шаблоне №886, uCoz Имеется в виду вот этот блок, и его фоновая картинка с изображением цветка лилии.
..
А по сути, рассмотрим из чего состоит, как устроен и как изменять дизайн не только данного блока, но и всех подобных. Так как в основе - распространенная техника оформления, при помощи фоновых изображений.
HTML - код блока не сложен:
Code <table border="0" cellpadding="0" cellspacing="0" class="boxTable"> <tr> <td class="boxTitle"><b><!-- <bt> --><!--<s5204>-->Друзья сайта<!--</s>--><!-- </bt> --></b></td> </tr><tr> <td class="boxContent"> <!-- <bc> -->
/* Здесь находится содержание блока - оператор, например $CATEGORIES$ или просто HTML код */
<!-- </bc> --> </td> </tr> </table>
Он состоит из таблицы с классом «boxTable», ячейки для названия блока - с классом «boxTitle» и ячейки для содержания - с классом «boxContent».
Ко всем этим классам прописаны стили, что и отвечают за визуальное оформление блока. Найти их можно в ПУ » Управление дизайном » Таблица стилей CSS
Вот они: Code .boxTable {width:206px;background:url('/.s/t/886/6.gif') repeat-y;} .boxTitle {height:47px;background:url('/.s/t/886/7.gif') no-repeat;padding-top:20px;text-align:center;color:#FFFFFF;font-size:11pt;} .boxContent {background:url('/.s/t/886/8.gif') bottom no-repeat;padding:5px 7px 40px 7px;} - где каждому элементу задается своя фоновая картинка, с различными параметрами.
Работают они следующим образом:
Таблице - элементу с классом «boxTable» - задается фоновая картинка с параметром repeat-y: Quote (Code) .boxTable {width:206px;background:url('/.s/t/886/6.gif') repeat-y;} - то бишь - повторение по вертикали - типа заливки для всего блока. ...
Ячейке с названием блока - элементу с классом «boxTitle» - тоже назначено изображение, но уже другое и с другими параметрами - no-repeat: Quote (Code) .boxTitle {height:47px;background:url('/.s/t/886/7.gif') no-repeat;padding-top:20px;text-align:center;color:#FFFFFF;font-size:11pt;} - то бишь, без повторения, и с положением по умолчанию, а по умолчанию - это слева сверху. Тем самым, она накладывается на предыдущее фоновое изображение, так как находится выше, и перекрывает его, образуя закругление краев и декоративную полоску для титле блока:
...
Вот само это изображение:
...
Ну а блоку для содержания - элементу с классом «boxContent» - задается фон тоже без повторения - no-repeat, но уже с положение по вертикали - bottom Quote (Code) .boxContent {background:url('/.s/t/886/8.gif') bottom no-repeat;padding:5px 7px 40px 7px;} . Он тоже накладывается на общий фон, и задает отображение нижней части блока, то самое, что хотим изменить.
Вот картинка фона этого блока:
...
Что бы изменить картинку, нужно её скачать на компьютер, открыть в графическом редакторе (фотошоп и подобные) и изменить) ...
|
|
[2] likbezz [19.12.2012, 18:20] |
Меняем. Открываем в Фотошопе и переводим в формат RGB:
Допустим, нам нужно просто убрать с изображения цветок. Поступить можно так: Скопировать левую часть, вставить новым слоем,
и развернуть зеркально по горизонтали:
И чуть двигаем, перекрывая слоем цветок:
...
Сохраняем «Для WEB» - меню файл » сохранить для веб, под новым именем, например 8-1.gif В формате гиф, как и было или в png-8 бит.
...
Картинка готова)
|
|
[3] likbezz [19.12.2012, 18:29] |
Далее, заливаем новое изображение на сайт при помощи файлового менеджера.
Что бы разводить хаос, создадим для темы отдельную папку, например theme а в ней папку для картинок: img? и загрузим в ней новую фоновую картинку, ту что меняли.
Получить ссылку на него можно кликнув по значку со знаком [i] - ...
Ну а далее, просто заменяем ссылку на старую картинку ссылкой на новую, вашу. Это в стилях, как и написано выше ПУ » Управление дизайном » Таблица стилей CSS/
Quote (class=alert) ПЕРЕД тем как делать какие либо изменения в стилях или шаблонах, настоятельно рекомендую, делать резервную копию - бекап - всех шаблонов. Делается это там же: ПУ » Управление дизайном » Backup шаблонов
Менять будем фон блока контента - стили элемента с классом boxContent.
Вот так вот: Было: Quote (Code) .boxContent {background:url('/.s/t/886/8.gif') bottom no-repeat;padding:5px 7px 40px 7px;}
Стало: Quote (Code) .boxContent {background:url('http://test.likbezz.ru/theme/img/8-1.gif') bottom no-repeat;padding:5px 7px 40px 7px;}
И сохраняем. ...
Обновляем страницу сайта и наблюдаем результат.
...
|
|
[4] Diana [22.01.2013, 17:21] |
А ты случайно не можешь подсказать как сменить шапку в дизайне 949? Так то всё устраивает и изменить его можно нормально но там шапка из трех частей( Несколько дней уже бьюсь чтоб сделать туда одну картинку и нихрена не выходит. пыталась сделать из двух частей - чтоб одна стояла на месте а вторая - там где заканчивается первая, просто повторялась. Но корректно у меня это тоже не получилось - опять снесла всё(
Кстати я что то в личные сообщения не могу зайти и предпросмотр не пашет. Белое окно и всё почему то. Что ли опять мазила у меня слетела.... |
|
[5] likbezz [22.01.2013, 22:13] |
Diana, Кстати я что то в личные сообщения не могу зайти и предпросмотр не пашет. Белое окно и всё почему то. Что ли опять мазила у меня слетела.... Скорее всего второе ) У меня все нормально ) ибо Мозилла неубиваемая стоит ) |
|