Как сделать модуль для InstantCMS и любой модуль

Как сделать модуль для InstantCMS и любой модуль

Эту статью я хочу посвятить оформлению каких либо блоков на любом сайте. Все сайты, в основном состоят из набора готовых блоков, которые разложены на рабочей поверхности страницы. И не важно формирует ли их движок или ты втыкаешь их ручками, разницы нету абсолютно никакой. Чтобы в дальнейшем твой сайт можно было быстро изменить или переиначить, или даже просто что то добавить, советую тебе соблюдать простейшие правила. Придумай для себя конструкцию блока. Я сейчас для примера беру простейшую конструкцию самого что ни на есть типового блока. Пусть это будет маленький рекламный блок.

Вот что мы будем делать:

 

Для придания единого стиля всем блокам твоего сайта предлагаю воспользоваться контейнером <div>

Теперь определимся со структурой : у нас есть блок в котором находится заголовок и само тело блока, то есть текст картинки и всякая прочая гадость. И в итоге у нас получается такая структура:

<div id="block"> <!--открываем контейнер блока-->

<div class="titles"></div> <!--контейнер с заголовком-->

<div class="bodyblock"></div> <!--контейнер с телом блока-->

</div> <!-- закрывем контейнер блока -->

Исходя из этой схемы строим блок.

<div id="block">

<div class="titles">Рекламный блок</div>

<div class="bodyblock"><p>Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.</p><p align="center"><img src="probka.jpg" width="78" height="80" /></p>

</div>

</div>

 

Смотрим что у нас получилось :

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

-----

Дальше нам потребуется CSS. Подключаем его отдельным файлом или пишем прямо в теле кода, думаю в этом проблем не будет ))) На всякий случай дам ссылку как подключить CSS к документу.

В первую очередь обработаем сам блок, окантуем наш блок рамкой, делается это с помощью команды border, и зададим размеры блока командами width и height

/создаем класс /

#block

{

border:solid 1px #000; /сплошной бордюр толщиной в 1 пиксел черного цвета/

width:250px; /Ширина контейнера 250 пикселов/

height:400px;/Высота контейнера 400 пикселов/

}

 

Смотрим что у нас получилось :

Рекламный блок

 

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

-----

Теперь нам нужно привести в порядок заголовок блока, нам нужно закрасить его в синий цвет, сделать отступы в 1 пиксел, сделать рамку более светлого цвета, окрасить буквы в жёлтый цвет, поменять размер шрифта и добавить птичку. Для этого пишем ещё один кусок кода.

.titles
{
color:#FFFF00;
/ ставим желтый цвет шрифта/
background:url(galka.png) no-repeat #3333CC;
/ подложка контейнера синего цвета с рисунком из корня сайта без повтора/
margin:2px;
/ отступы вокруг контейнера 2 пиксела по кругу/
border:solid 1px #0099FF;
/ рамка вокруг контейнера сплошная толщиной 1 пиксел голубого цвета/
font-size:18px;
/ размер шрифта 18 пикселов/
font-weight:bold;
/шрифт жирный/
height:35px;
/высота контейнера 35 пикселов/
}
.titles p
{
padding-left:27px;
/ отступ заголовка слева 27 пиксел/
line-height:0px;
/высота линии текста 0 пикселов/
}

 

 

Смотрим что у нас получилось :

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

-----

Ну вот впринципе и все, осталось только привести в порядок текст блока, думаю надо сделать поменьше шрифт и добавить отступы по бокам пикселей этак по пять с каждой стороны. Для этого добавляем ещё один кусок кода.

.bodyblock
{
padding-left:5px;
padding-right:5px;
font-size:9px;
color:#333333;
}

 

Не забываем, что уменьшив шрифт, мы так же уменьшаем высоту блока поэтому не забудьте поменять высоту, хотя на практике обычно высота модуля не указывается, если у вас блок одинаковый для всех элементов сайта, в этом случае лучше добавить нижний отступ margin-bottom:15px; для класса #block

 

Смотрим что у нас получилось :

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

-----

Теперь смотрите что может получиться если убрать ширину и высоту у блоков но разложить их в какую то жёсткую сетку, шаблон сайта или ещё в какую херню. Я использую для этого обычную таблицу.... Напоминаю в CSS убираем высоту и ширину блока и добавляем нижний отступ, писать код не буду думаю сами допетрите ))) Учитывая подробный вышеидущий текст ))))

Вот такой примерчик:

Ширина столбика 250рх

Ширина столбика 350рх

Ширина 100рх

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

Ещё один

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования

Широкий Блок В середине

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередованияВысокой

Широкий блок в середине

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередованияВысокой

Узенький

текст текст текст текст текст текст текст текст текст текст текст текст

Узенький

текст текст текст текст текст текст текст текст текст текст текст текст

А теперь поговорим про модули InstntCMSони абсолютно ничем не отличаются от того, что мы сейчас сделали ручками, разница только в том, что контентом их наполнять не надо, всё делает движок. Всё правим в таблице стилей. Файл который находится в папке с твоим шаблоном по пути templates/шаблон/css/styles.css

Ищем там такую запись :

#left .module, #right .module {
border: 1px solid #9DB0BC;
padding: 0px;
margin-bottom:2px;
}

#left .moduletitles, #right .moduletitles{
font-size: 14px;
font-weight:bold;
text-align:center;
margin-bottom: 6px;
background:url(/templates/_default_/images/modtitles.jpg) repeat-x #9DB0BC;
padding: 0px;
height: 34px;
line-height:34px;
border-bottom:solid 1px #9DB0BC;
}
#left .modulebody, #right .modulebody {
padding: 10px;
background-color:#FFFFFF;
}

#center .module{
padding: 10px;
margin-bottom:2px;
}

#center .moduletitles{
font-size:18px;
text-transform:uppercase;
border-bottom:solid 1px #7192A6;
color:#7192A6;
}
#center .modulebody {
padding: 10px;
background-color:#FFFFFF;
}

Вот так выглядят наши модули в instantcms обрати внимание на идентификаторы #left, #right, #center . Если на сайте левые, правые и центральные модули отличаться не будут визуально, тогда достаточно сделать один комплект этих записей. Кстати...

На всякий случай расскажу как расставить позиции в шаблоне instantcms

Позиция модуля в шаблоне выглядит так :

<div id="здесь как раз вставляем тот самый идентификатор"><?php cmsModule("left"); ?></div>

Ну вот вроде и все по поводу модулей в инстанте и вообще всяческих блоков на сайте. Надеюсь кому то это поможет, а такие найдутся обязательно. Все эмоции и пожелания высказываем в комментах ))))

Как сделать класс для админа 559
Как сделать модуль для InstantCMS и любой модуль 100
Как продвинуть группу в одноклассниках? (Примеры)
Как сделать модуль для InstantCMS и любой модуль 35
Как сделать модуль для InstantCMS и любой модуль 60
Как сделать модуль для InstantCMS и любой модуль 63
Как сделать модуль для InstantCMS и любой модуль 12
Как сделать модуль для InstantCMS и любой модуль 88
Как сделать модуль для InstantCMS и любой модуль 21

Похожие статьи