Подкинули мне PSD файп с темой, которую надо было сверстать. Но дизайнер о верстальщике не думает, он нарисовал блок меню, отличный от других блоков. Ситуация решаема несколькими путями, предлагаю вам один из вариантов. В нашем примере можно будет вывести любой блок в любом оформлении. При этом, можно будет разделить блоки по модулям, по размещению, по ID блока. Слева вариант темы, сверстанной мной. Главное меню отличается от остальных.
Итак, начнем. Открываем тему, находим код вывода блоков. В большинстве тем этот код вынесен в отдельные файлы и расположен в папке xotpl. Может быть и другое расположение, его могли прописать даже в файле theme.html.
Код должен выглядеть примерно так (для левых блоков, файл theme_blockleft.html):
<div class="left-block-container ">
<{if $block.title}>
<div class="left-block-title"><{$block.title}></div>
<{/if}>
<div class="left-block-content"><{$block.content}></div>
</div> Рассмотрим каждый стиль:: left-block-container - оболочка левых блоков left-block-title - заголовки левых блоков left-block-content - содержание блоков Воспользуемся той возможностью, что классы можно наращивать. К примеру, class="left block" , в стилях можно описать отдельно класс left, и отдельно block. .left { background: none repeat scroll 0 0 #FFEE75; color: #000000; } .block { border: 1px solid #B2AF92; color: #444444; } При чем, если стили повторяются, то приоритет имеет ток класс, который ниже в файле. Изменим первую строку, добавим класс blockid-<{$block.id}> XOOPS изменит этот класс на blockid-x, где x - ID блока Дополнительно добавим стиль модуля blockmodule-<{$block.module}> Наш код будет выглядеть так: <div class="left-block-container blockid-<{$block.id}> blockmodule-<{$block.module}>">
<{if $block.title}>
<div class="left-block-title"><{$block.title}></div>
<{/if}>
<div class="left-block-content"><{$block.content}></div>
</div>
Осталось добавить стили этих блоков:
.leftcolumn {
background: none repeat scroll 0 0 transparent;
float: left;
margin: 0;
width: 190px;
}
.left-block-container {
background: none repeat scroll 0 0 transparent;
border: 1px solid #DBD7B2;
border-radius: 3px 3px 3px 3px;
height: 100%;
margin: 0 0 10px;
padding: 0;
}
.blockmodule-system {
background: none repeat scroll 0 0 #FFEE75;
color: #000000;
}
.blockid-5 {
background: url("../images/main_bg_main.png") repeat-x scroll 0 0 #FFFDE7;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
}
.blockid-1 {
background: none repeat scroll 0 0 #DBD7B2;
border: 1px solid #B2AF92;
color: #000000;
}
.blockid-12 {
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
}
В нашем случае задано: Фон основного меню выведен картинкой. Фон меню пользователя коричневый. Фон блока темы оформления - белый. Остальные системные блоки с левой стороны будут с желтым фоном. Если бы мы разместили класс blockmodule-system ниже в списке, то все блоки выводились бы с желтым фоном.
|