Темы
Вывод блоков по ID
Написал MACTEP в 12.07.2012 18:20:00 (14028 прочтений)

Вывод блоковПодкинули мне 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 ниже в списке, то все блоки выводились бы с желтым фоном.


Версия для печати Отправить эту статью другу Создать из статьи PDF-файл

Похожие новости

News Theme for Publisher Module

The theme for the news Publisher module Adapted for Xoops: B.Heyula !

xws-50 Иконка в блоках

Особенность темы - вывод в каждом заголовке блока своей иконки. Как это сделано, будет описано позже. Еще в тему добавлено многоуровневое навигационное меню.

XWS-green

Зеленая двух-колоночная тема для XOOPS 2.5. Правые блоки отображаются в левой колонке ниже левых блоков. средний верхний блок отображается в шапке. средний нижний блок...

Фруктовая тема xws-32

Фруктовая трехколоночная тема. Ширина - 1000 px. Под шапкой - три информацирнных блока. Настраиваются в xws32/xoinfo.html

Цветочная тема Flowers-xws-40

Цветочная тема.. Оригинальность темы в заставке из нескольких картинок, причем никакого JS. Только CSS

Тема xws_36_blog

Тема для блога. Две колонки. Информационный футер. В правой колонке отображаются блоки, отмеченные в админке как правые и левые. В футере отображается блок нижний слева...

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

5 пользователь(ей) активно (1 пользователь(ей) просматривают Новости)

Участников: 0
Гостей: 5

далее...

Рекомендуем