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