Фильтр по:
  

Как сменить картинку блока в стандартном шаблоне №886, uCoz

Инструкции, подробные описания и тпт.

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Инструкции, подробные описания и тпт. » Как сменить картинку блока в стандартном шаблоне №886, uCoz (На примере стандартного шаблона юКоз №886)
Как сменить картинку блока в стандартном шаблоне №886, uCoz
Дата: Среда, 19.12.2012, 18:13 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Как сменить картинку блока в стандартном шаблоне №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;}
.
Он тоже накладывается на общий фон, и задает отображение нижней части блока, то самое, что хотим изменить.

Вот картинка фона этого блока:


...

Что бы изменить картинку, нужно её скачать на компьютер, открыть в графическом редакторе (фотошоп и подобные) и изменить)
...
Прикрепления: 4565949.png (9.1 Kb) · 7717684.png (11.0 Kb) · 8803216.png (7.8 Kb)

 
Дата: Среда, 19.12.2012, 18:20 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Меняем.
Открываем в Фотошопе и переводим в формат RGB:



Допустим, нам нужно просто убрать с изображения цветок.
Поступить можно так:
Скопировать левую часть, вставить новым слоем,



и развернуть зеркально по горизонтали:



И чуть двигаем, перекрывая слоем цветок:


...

Сохраняем «Для WEB» - меню файл » сохранить для веб, под новым именем, например 8-1.gif
В формате гиф, как и было или в png-8 бит.


...

Картинка готова)
Прикрепления: 8004091.png (11.0 Kb) · 5504292.png (12.4 Kb) · 0071831.png (12.7 Kb) · 3355401.png (9.7 Kb) · 7669494.png (9.8 Kb)

 
Дата: Среда, 19.12.2012, 18:29 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Далее, заливаем новое изображение на сайт при помощи файлового менеджера.

Что бы разводить хаос, создадим для темы отдельную папку, например 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;}




И сохраняем.
...

Обновляем страницу сайта и наблюдаем результат.


...
Прикрепления: 4371197.png (17.3 Kb) · 7095334.png (21.9 Kb) · 2650486.png (5.6 Kb)

 
Дата: Вторник, 22.01.2013, 17:21 |
Diana
Генерал-лейтенант
Группа: Помощники
Сообщений: 606
Награды: 0
Репутация: 20
Статус: Offline


 А ты случайно не можешь подсказать как сменить шапку в дизайне 949?
Так то всё устраивает и изменить его можно нормально но там шапка из трех частей(
Несколько дней уже бьюсь чтоб сделать туда одну картинку и нихрена не выходит.
пыталась сделать из двух частей - чтоб одна стояла на месте а вторая - там где заканчивается первая, просто повторялась. Но корректно у меня это тоже не получилось - опять снесла всё(

Кстати я что то в личные сообщения не могу зайти и предпросмотр не пашет. Белое окно и всё почему то. Что ли опять мазила у меня слетела....

 
Дата: Вторник, 22.01.2013, 22:13 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 Diana,
Цитата (Diana, Вт, 22.01.2013, 17:21:30)
Кстати я что то в личные сообщения не могу зайти и предпросмотр не пашет. Белое окно и всё почему то. Что ли опять мазила у меня слетела....

Скорее всего второе )
У меня все нормально ) ибо Мозилла неубиваемая стоит )

 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Инструкции, подробные описания и тпт. » Как сменить картинку блока в стандартном шаблоне №886, uCoz (На примере стандартного шаблона юКоз №886)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия